CODEWITHSUNDEEP
phpjquery
Nirali Joshi
Nirali Joshi

Reputation: 2008

Load content using ajax

I am new to ajax.

I have index.html

<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"n.php",success:function(result){
      $("#div1").html(result);
    }});
  });
});
</script>

<div id="div1" style="margin-left: 25;"></div>
<button>Add Author</button>

n.php

Name:<input type="text" name="txtname">
age:<input type="text" name="txtage">

Simply i want to add name and age textboxes on index.html page when 'Add Author' button clicks without refreshing page.But above code loads name and age textboxes only once.I want it every time when button clicks.

Edit:

Now if I want to put another button 'remove author',and want to perform exact opposite action(i.e) remove both textboxes.what should i do? can u please help?

and want to know how can i check validation server side?

Please Help.

Upvotes: 0

Views: 96

Answers (3)

Shijin TR
Shijin TR

Reputation: 7756

 <script>
   $(document).ready(function(){
   $("button").click(function(){
    $.ajax({url:"n.php",success:function(result){
  $("#div1").append(result);
   }});
   });
  });
  </script>

    <div id="div1" style="margin-left: 25;"></div>
    <button>Add Author</button>

Upvotes: 0

Kumar Saurabh Sinha
Kumar Saurabh Sinha

Reputation: 870

try the following:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"n.php",success:function(result){
      $("#div1").append(result);
    }});
  });
});
</script>

use append instead of html. append will add the response at the end of whatever content is present in the div wherease html will replace the present content.

Upvotes: 1

Yogesh Suthar
Yogesh Suthar

Reputation: 30488

Change this

$("#div1").html(result);

to

$("#div1").append(result);

So everytime you click the button it will append the textboxes.

Upvotes: 2

Related Questions