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
– TecHunter, Commented May 29, 2013 at 8: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
– nathanvda, Commented May 29, 2013 at 8:17

Ivan Drinchev · Accepted Answer · 2013-05-29 08:07:15Z

2

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');}
        });
    });

});

answered May 29, 2013 at 8:07

Ivan Drinchev

19.6k4 gold badges69 silver badges97 bronze badges

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

Comments

Talha · Accepted Answer · 2013-05-29 08:08:09Z

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, 2013 at 8:08

Talha

19.3k8 gold badges53 silver badges66 bronze badges

1 Comment

Faizan Khattak Over a year ago

I m not using submit button . Form submit when click on li

TecHunter · Accepted Answer · 2013-05-29 08:20:17Z

0

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

answered May 29, 2013 at 8:20

TecHunter

6,1712 gold badges32 silver badges47 bronze badges

Comments

Baby Groot · Accepted Answer · 2013-10-28 07:05:57Z

0

$("#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();
});

edited Oct 28, 2013 at 7:05

Baby Groot

4,27939 gold badges55 silver badges70 bronze badges

answered Oct 28, 2013 at 6:44

test

1

Collectives™ on Stack Overflow

Form submission using jQuery ajax

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related