POST multiple AJAX data

Question

I'm trying to POST multiple AJAX data to update.php. This is my code at the moment:

$.ajax({  
    url:"update.php",  
    method:"POST",  
    data: $('#update_form').serialize(),   
    beforeSend:function(){  
        $('#update').val("Geupdate!");  
    },  
    success:function(data){  
        $('#update_form')[0].reset();  
        $('#add_data_Modal').modal('hide');  
        $('#employee_table').html(data);  
    }  
});

However I also want to sent an ID within the data. This is the form that I'm using.

 <form method="post" id="update_form">
     <label>Notitie:</label>
     <input type="text" name="name" id="' . $row["id"] . '" class="form-control" value='.$row["name"].' width="100%">
     <br />
     <input type="submit" name="update" id="update" value="Opslaan" class="btn btn-success" />
 </form>

How can I combine data: $('#update_form').serialize() and id="' . $row["id"] . '" together?

I tried a few combinations but I can't find the correct answer. Here is what I've tried:

data: $('#update_form').serialize(), id: <?php echo $row["id"] ?>

You're serializing the entire form, what you have should work. Is it not outputting what you expect? If not, what's your console log reporting? — Adam
– Adam, Commented Jan 5, 2018 at 14:26
rather than serialize you could use FormData( form ) and append additional fields/values to it as you see fit — Professor Abronsius
– Professor Abronsius, Commented Jan 5, 2018 at 14:27
@Adam, console log doesn't report an error. However I also want to POST the ID that is in <input>, which I can't get to work. — SmashingJummy
– SmashingJummy, Commented Jan 5, 2018 at 14:31

charlietfl · Accepted Answer · 2018-01-05 14:45:35Z

3

One simple way is add a hidden input to the form so serialize() will include the id

<form method="post" id="update_form">

   <input type="hidden" name="id" value="' . $row["id"] . '" > 

  <label>Notitie:</label>
  <input type="text" name="name" id="' . $row["id"] . '" class="form-control" value='.$row["name"].' width="100%">
  <br />
  <input type="submit" name="update" id="update" value="Opslaan" class="btn btn-success" />
</form>

edited Jan 5, 2018 at 14:45

answered Jan 5, 2018 at 14:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

SmashingJummy Over a year ago

Thanks, this did the trick! Only little problem where the spaces between " id ". Removing this made it work :)

Ravi · Accepted Answer · 2018-01-05 14:33:12Z

2

You are serializing entire form, which includes your textbox data as well. So, you don't need to explicitly add each element of form.

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>: $("input, textarea, select" ).serialize();

So, whatever element added in form (<input>, <textarea>, and <select>) gets serialized implicitly. So, in case, you wanted to pass additional data along with form, then you can create a hidden field inside your form.

edited Jan 5, 2018 at 14:33

answered Jan 5, 2018 at 14:28

Ravi

31.6k44 gold badges124 silver badges180 bronze badges

Comments

Professor Abronsius · Accepted Answer · 2018-01-05 14:34:48Z

-1

I don't use jQuery so this is a bit of a "stab in the dark" but you could alternatively use a FormData object and append a new parameter & value to it like this perhaps.

$.ajax({ 
    var form=$('#update_form');
    var fd=new FormData( form[0] );
        fd.append('id', document.querySelector('input[name="name"]').id );

    url:'update.php',  
    method:'POST',  
    data: fd,  
    beforeSend:function(){  
        $('#update').val('Geupdate!');  
    },  
    success:function(data){  
        form[0].reset();  
        $('#add_data_Modal').modal('hide');  
        $('#employee_table').html(data);  
    }  
});

answered Jan 5, 2018 at 14:34

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Collectives™ on Stack Overflow

POST multiple AJAX data

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related