How to load page on button click using jquery ajax and Php?

Question

How to load page on button click and pass data to that new page using jquery ajax and place the value in input field into new loaded page?.Basically, what I am saying is,

I have a button named SOmething and I just want by clicking on this button the show.php page should load without refreshing and the value 123 I recieved in success function should be placed in input field defined in show.php.so far I've done this.

index.php

<div id='page_details'>
<div class="container  border w-25 mt-3 p-2">
 <div class="border p-3 my-3">
    <a class="text-dark call" href='#' id='number'>SOmething</a>
  </div>
 </div>
</div>

  $.ajax({
        url: 'show.php',
        method: 'POST',
        data: {
            number: '123' 
        },
        success: function(data) {
            console.log(data);
            $("#page_details").load('show.php', {
                'data': data
            });  
        }
    });

show.php

Getting undefined index number errror.

 $number = $_POST['number'];
 $data = $_POST['data'];

<div class="col">
  <p>Amount</p>
  <input class='form-control' value='<?php echo $number ?>'/>  
 <input class='form-control' value='<?php echo $data ?>'/>  //It loads another page within page..
</div>

Even though I got number 123 in console but is not showing in input field...

Regards..

You have invalid JSON -> number: 123' You need to have quotes either at both sides of the value, or neither (since it's a number). Also, get rid of the AJAX call - the load() is doing everything you need. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Jul 14, 2019 at 9:27
@Archer Thanx for replying.I misplaced 123' here but not in the actual code.I updatad the code.but I am not getting any value and it loads the whole page content within page loads.SO there would be two pages up and down. — Yash
– Yash, Commented Jul 14, 2019 at 9:30

Pankaj Chauhan · Accepted Answer · 2019-07-14 10:06:56Z

2

First: understand the "show.php" file , here you received two value so you need to pass data parameter also, Second: User html comment under html tag

Now solution for your problem below, just use below script:

$("#number").on("click", function(){
 $.ajax({
   url: 'show.php',
   method: 'POST',
   data: {
      number: '123',
      data: 'pankaj' 
     },
   success: function(data) {
   console.log(data);
   $("#page_details").html(data);
  }
 });
});

answered Jul 14, 2019 at 10:06

Pankaj Chauhan

1,75315 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load page on button click using jquery ajax and Php?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related