CODEWITHSUNDEEP
javascriptphpjqueryajax
Yash
Yash

Reputation: 91

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

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..

Upvotes: 1

Views: 2117

Answers (1)

Pankaj Chauhan
Pankaj Chauhan

Reputation: 1715

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);
  }
 });
});

Upvotes: 2

Related Questions