Several jQuery forms

Question

I have several forms on one page, they're all the same, but have different hidden values:

<?php foreach ($results as $result): ?>

<form method="POST" action="edit.php"> 

<input type="hidden" name="id" value="<?php echo $result['id']; ?>">

<input type="submit" name="action" value="Edit">

</form>

<?php endforeach; ?>

I want id to be submitted using $.post when this is clicked to edit.php, however if I use $("#id").val() (I'm trying to post the hidden input which is named id), it only selects the first id value in the page, and not the one that was clicked by the submit button.

$.post("edit.php", { id: $("#id").val(), action: "Edit" },
function(data){
alert("Data Loaded: " + data); //im using fancybox here to display an inline frame
});

How can I submit the id of the current form clicked?

first of all you are using the id selector # but you do not have ids on your elements.. you have named them as id but no id attribute is present (which should be unique, anyhow) — Gabriele Petrioli
– Gabriele Petrioli, Commented Nov 1, 2010 at 23:13

rojoca · Accepted Answer · 2010-11-01 23:02:53Z

1

I assume you're binding to the submit event on the forms. Use serialize instead of querying for values:

$('form').submit(function(){

    $.post('edit.php', $(this).serialize(), function(data) {
        alert("Data Loaded: " + data);
    });

    return false;
});

answered Nov 1, 2010 at 23:02

rojoca

11.2k4 gold badges48 silver badges47 bronze badges

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

2 Comments

Nick Craver Over a year ago

Note that this will not include the action=Edit pair in the post like a normal <form> submission would.

rojoca Over a year ago

@Nick Craver - correct. This could be handled with the addition of a hidden field instead: <input type="hidden" name="action" value="Edit">

Nick Craver · Accepted Answer · 2010-11-01 23:09:29Z

1

Since you still need to include the submit's name/value pair, find the name="id" input within the <form> you're on, like this:

$.post("edit.php", { id: $(this).find("input[name=id]").val(), action: "Edit" }, 
function(data){
  alert("Data Loaded: " + data);
});

id attributes should be unique in the document, since your markup in the question doesn't have an ID it looks like you fixed that issue. This finds the name="id" <input> in the <form> you're in the submit handler of.

answered Nov 1, 2010 at 23:09

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Comments

woodscreative · Accepted Answer · 2010-11-01 23:08:23Z

0

Do you have multiple page elements with the same ID? Using $("#id").val() I believe would only retrieve the first value of an element with that ID. Having more than one would result in an array of elements. To find a specific element that is duplicated you would have to put it into context like:

$("#myform").find("#id").val()

answered Nov 1, 2010 at 23:08

woodscreative

1,0319 silver badges26 bronze badges

Comments

Silkster · Accepted Answer · 2010-11-01 23:21:37Z

0

Use the form element that is submitted as a context in your selector:

$('form').live('submit', function(e) {

    var form = $(this);
    var id = $('#id', form).val();

    //... do your post here
});

NOTE: I used .live() to bind to the submit event in case you're adding forms dynamically.

answered Nov 1, 2010 at 23:21

Silkster

2,22016 silver badges29 bronze badges

Collectives™ on Stack Overflow

Several jQuery forms

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related