CODEWITHSUNDEEP
javascriptphpjqueryajax
Paul Ledger
Paul Ledger

Reputation: 1135

Jquery form data not sending through ajax POST method

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.

Upvotes: 0

Views: 714

Answers (2)

Pakk
Pakk

Reputation: 1339

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.

  1. You would want to send prefix to the controller to properly add new htmlNamePrefixes to the new partial view.
  2. 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).

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

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" />

Upvotes: 1

Related Questions