CODEWITHSUNDEEP
javascriptjquery
rachit srivastava
rachit srivastava

Reputation: 19

load to work as append in jquery

i am creating form using js functions.. i want that when this function is called twice form should be created twice.. i am using jquery load hence it is overwriting again and again...

my jquery code:

function form(module,user) {

    $.post("php/test.php",{ module:module , user:user}, function(data, status){
    var f= jQuery.parseJSON( data );

   $(".cards-container").load("modules/ams.html",function(){
     $(".cards-container > div").addClass("card card-shadow animated fadeInDown");

     $(".form-t").append("<input type='text'"+"placeholder="+f.text+" name='fname' required>");
   });
 });}

form("home",200);form("home",300);

AMS.html: 

<div class='w100 large forms'>

        <form action='test.php' method='post'>
            <div class="form-t"></div>

  <input type='submit' value='Submit'></form>
  </div>

Upvotes: 0

Views: 1418

Answers (2)

RomanPerekhrest
RomanPerekhrest

Reputation: 92904

JQuery load() method always replaces content of "element-receiver". Use get() method to request new content with subsequent appending:

var f= jQuery.parseJSON( data );
$.get('modules/ams.html', function(data){ 
  $(".cards-container").append(data);
  $(".cards-container > div").addClass("card card-shadow animated fadeInDown");
  $(".form-t:last").append("<input type='text'"+"placeholder="+f.text+" name='fname' required>");
});

Upvotes: 1

Steve Harris
Steve Harris

Reputation: 5109

Load will always overwrite. It is a shortcut function for an Ajax method. So instead, use Ajax so you have control of the result:

$.ajax({
    url: "modules/ams.html",
    type: "GET"
}).done(function (result) {
    $(".cards-container").append(result);
});

This will just append the content directly into the container. You will have to apply any other logic you need. Remember that ids should be unique and forms cannot be nested so make sure you avoid loading html with a form when your container is already within a form.

Upvotes: 1

Related Questions