Jquery form data not sending through ajax POST method

Question

I have a form which sends data to php via ajax , very simple. But when I submit the form the data is not being sent across.

Javascript:

$(document).ready(function(e) { $('#update').submit(function(event) { event.preventDefault(); var fd = new FormData($('#update')[0]); alert(fd); $.ajax({ url:'func/update.php?id=<?php echo md5($result['id']);?>', processData: false, contentType: false, data: fd, type:'POST', dataType:"JSON", success:function(json){ } }); }); });

PHP:

if(empty($_POST)){ echo 'No post data'; }else{ echo 'data sent'; } print_r($_POST);

The php is left very basic to see what is going on. I would normally attach my data fom the individual field.

data:{a:a,b:b,c:c}... and so on.

HTML:

<form id="updateStaff"> Profile Picture<br /><img id="pp_img_display" src="../images/<?php echo $result['pp'];?>" width="100px" /><br /><small>Upload a new image</small><br/><input onchange="uploadImage()" type="file" id="file" /><input type="hidden" id="pp_img" value="<?php echo $result['pp']; ?>" /><br/><small>upload .jpg .png .jpeg only</small><br /><div class="form_err" id="image_err"></div> Name: <select id="prefix" required="required"> <option><?php echo $result['prefix']; ?></option> <?php $pre = array('Mr','Mrs','Miss','Ms'); for($x = 0; $x < count($pre); $x++){ if($pre[$x] != $result['prefix']){ echo '<option>'.$pre[$x].'</option>'; } }?> </select>&nbsp; <input type="text" id="f_name" placeholder="First Name" value="<?php echo $result['f_name'];?>" required="required" />&nbsp; <input type="text" id="l_name" placeholder="Last Name" value="<?php echo $result['l_name'];?>" required="required" /><br/> Job Title: <input type="text" id="job" required="required" placeholder="Job Tilte" value="<?php echo $result['job_title']; ?>" /> <br/> Years of Experience: <input type="number" id="xp" required="required" placeholder="1" value="<?php echo (int)$result['xp'];?>" /> <p><input type="submit" value="Update" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Cancel" onclick="history.go(-1);"/></p> </form>

I would have thought that formData would be a shorter way of doing this.

url:'func/update.php?id=<?php echo md5($result["id"]);?>', escape your string properly — 웃웃웃웃웃
– 웃웃웃웃웃, Commented Mar 20, 2014 at 14:39
should not be data stiringify before send it data: JSON.stringify(fd)? — Suman Bogati
– Suman Bogati, Commented Mar 20, 2014 at 14:40
If you use firefox (or Chrome I think), press F12. Then go to console, make sure that Net is marked. Right click in the console output and tick the "Log Request and Response Bodies". Attempt to do the ajax call, what are you sending and where? Is it correct? — Francisco Presencia
– Francisco Presencia, Commented Mar 20, 2014 at 14:41

A. Wolff · Accepted Answer · 2014-03-20 14:43:08Z

To be send, element requires name attribute:

<input name="myInputSend" type="text" id="f_name" placeholder="First Name" value="<?php echo $result['f_name'];?>" required="required" />

Community · Accepted Answer · 2017-05-23 12:03:50Z

Once you have added something like this first answer into your project to apply name prefixes to your partial views, you can post them back as is.

On a side note

If you get into variable length lists within those partial views, its no longer that easy.

You would want to send prefix to the controller to properly add new htmlNamePrefixes to the new partial view.
To make posting easy in those situations I've created this helper $.fn()

The helper function will re-base missing / added name indexes back in order for each of the partial views within a parenting form (even if the partial views , had partial views) for the post back to go through as it should. (apologize for the early stage and messed up commenting).

Collectives™ on Stack Overflow

Jquery form data not sending through ajax POST method

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related