Form submission using jQuery ajax

Question

Form is not submit using ajax.form submit on click li. Give me some solution

My js code is here

$(document).ready(function(){

$('#sortable li').click(function() {

$("#frmgallery").submit(function(event) {
    event.preventDefault();
    var formdata = $(this).serialize();
    alert(formdata);
    $.ajax({
        type: "POST",
        url: "gallery.php",
        data: formdata,
        success: function(){alert('success');}
    });
});

});

HTML is here

 <form method="post" enctype="multipart/form-data" id="frmgallery" name="gallery" action="<?php get_template_directory();?>admin.php?page=gallery/gallery.php">

<ul id="sortable">

Query

<li  class="ui-state-default" name='liindex' id="<?php echo $row['glryRecordId'];?>" >
<span style="display:none"><?php echo $row['glryRecordId'];?></span>
<img class='thumbnail' alt=''  src='<?php echo get_site_url();?>/wp-content/themes/townsley/upload/<?php echo $row['glryName']; ?>' width='80' height='60' 
 style="border: 1px solid #D3D3D3;padding:2px;"/><input type="hidden" value="<?php echo $row['glryRecordId'];?>" name="recordId[]" />
    <a href="<?php get_template_directory();?>admin.php?page=gallery/gallery.php&delid=<?php echo $row['glryRecordId'];?>" style="display:block;text-align:center"  title="DELETE this image from the record" class="arial-red">Remove</a>
</li>


</ul>
</form>

Please help me Thanks

ajax jquery javascript

careful with `function(event)`, prefer using a not reserved name like `function(e)` — TecHunter, May 29 '13 at 08:16
Please format your HTML so it is better readable. This will also help yourself. Also, clean-up or remove redundant css classes. I can't imagine your `ul` needs to be sortable (or choose more "semantic" names). From the code it seems you first have to click the `ul#sortable` before you attach the `submit` event-handler, is that on purpose? — nathanvda, May 29 '13 at 08:17

score 2 · Answer 1 · answered May 29 '13 at 08:07

You should provide your HTML too in your question, but as far as i can see, you have event in event callbacks with actually nothing to initiate the submit event. So basically you should consider something like this :

$(document).ready(function(){

    $('#sortable li').click(function() {
        event.preventDefault();
        var formdata = $("#frmgallery").serialize();
        alert(formdata);
        $.ajax({
            type: "POST",
            url: "gallery.php",
            data: formdata,
            success: function(){alert('success');}
        });
    });

});

score 0 · Answer 2 · answered May 29 '13 at 08:08

0

You can use the ajaxForm/ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function.

Example:

$("#frmgallery").ajaxForm({url: 'gallery.php', type: 'post'})

or

$("#frmgallery").ajaxSubmit({url: 'gallery.php', type: 'post'})

ajaxForm will send when the submit button is pressed. ajaxSubmit sends immediately.

answered May 29 '13 at 08:08

Talha

18,898
8
49
66

I m not using submit button . Form submit when click on li – Faizan Khattak May 29 '13 at 08:13

score 0 · Answer 3 · answered May 29 '13 at 08:20

Have you tried return false at the end of your submit function?

    $("#frmgallery").submit(function(e) {
        e.preventDefault();
        var formdata = $(this).serialize();
        alert(formdata);
        $.ajax({
            type: "POST",
            url: "gallery.php",
            data: formdata,
            success: function(){alert('success');}
            error: function(){alert('error');}
        });
        return false;
    });
$('#sortable li').click(function() {

     $("#frmgallery").submit();
});

Also post what you get from $.ajaxcall

score 0 · Answer 4 · edited Oct 28 '13 at 07:05

$("#frmgallery").ajaxForm({url: 'gallery.php', type: 'post'})

Have you tried return false at the end of your submit function?

    $("#frmgallery").submit(function(e) {
        e.preventDefault();
        var formdata = $(this).serialize();
        alert(formdata);
        $.ajax({
            type: "POST",
            url: "gallery.php",
            data: formdata,
            success: function(){alert('success');}
            error: function(){alert('error');}
        });
        return false;
    });
$('#sortable li').click(function() {

     $("#frmgallery").submit();
});

Form submission using jQuery ajax

4 Answers4

Linked