CODEWITHSUNDEEP
jqueryjquery-selectors
Simon
Simon

Reputation: 59

jQuery multiple forms per page

I have a page which dynamically creates multiple forms, each form had a unique "id" Within each form is one hidden input field always with the same"id" and "name"

What I am wanting to do is with each form to be able to do an ajax(post) call, which I can do, my issue is getting the input field value from the from ..

So I can get the 

    $(document).ready(function() {



var n = $("form").size();
alert('there are ' + n + ' forms');

$('form').submit(function(event){
    event.preventDefault();

    var formName = $(this).attr('id');
    alert(formName);

});

});

So what I amnting to do is to get the value of the input field in the form that has been triggered, the id is held in the var formName

I have been stabbing away but getting no-where fast...

Thanks

Simon

Upvotes: 3

Views: 1825

Answers (2)

Quasdunk
Quasdunk

Reputation: 15220

You want to do this:

$('form').submit(function(event){
    var post_data = $(this).serialize();
    var post_to = $(this).attr('action');
    $.post(post_to, post_data, function(return_data) {
      alert(return_data);
    });
    return false;

});

You actually do not need to know the id of the form. You can simply reference it with $(this), and the serialize()-function takes care of all the values you want to post.

Upvotes: 0

Alex Pliutau
Alex Pliutau

Reputation: 21957

Put your hidden element ID into the find(). And make .ajax() with passing hiddenValue to data.

$('form').submit(function(event){
    event.preventDefault();
    var hiddenValue = $(this).find('#id-of-hidden').val();
});

Upvotes: 1

Related Questions