trying to get a form id with closest?

Question

for a little shopping cart i have multiple forms on a page. Each form represents the amount of a product with a bunch of action triggers. And outside the forms i also have a couple of data which i need to use.

Anyway for this i need to get the form id corresponding to an action trigger.

So i created a function which is called when an action button is clicked.

    function transferData() {
    // var form_id= $(this).closest("form").prop("id");
   // var form_id= $(this).prev("form").prop("id");
    var form_id= $(this).closest('td').parent().closest('form').prop('id');

action is triggered by

<button name="submit[1]"  type="button"  onClick="transferData()" class="btn btn-info btn-sm"><i class="fa fa-refresh"></i></button>

html structure simplfy

<tr><form id="form_update[1]" name="form_update[1]" action="cart_update.php" method="post"><td data-th="Product"><div class="row">
                                <div class="col-sm-2 hidden-xs"><img width="100" src="../images/frere.jpg" alt="Frere" class="img-responsive"/></div>
                                <div class="col-sm-10">
                                    <h4 class="nomargin">Frere</h4>
                                    <p>bad boy frere</p>
                                </div>
                            </div></td><td data-th="Price">$25.00</td><td data-th="">&nbsp;</td><td data-th="Quantity">
                            <input type="number" min="0" name="item_qty_summary[1]" class="form-control text-center" value="4">
                        </td><td data-th="Subtotal" class="text-right" >$100</td><td class="actions text-right">

                            <button name="submit[1]"  type="submit"  onClick="transferData(this)" class="btn btn-info btn-sm"><i class="fa fa-refresh"></i></button>

                            <a href="cart_update.php?removep=2015002&return_url=aHR0dC90aXF1ZXNob3AvaW5jbHVkZXMvdmlld19jYXJ0XzIwMTUucGhw" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></a>                                                               
                        </td></form></tr>

But i get an undefined error message and not the id

What am i overlooking??

How can we answer this question, dependent on the structure of your HTML, without seeing any of your HTML? — David Thomas, Feb 07 '15 at 17:40
Please paste your html code,may be an issue with dom traversing. — Farhan, Feb 07 '15 at 17:40
@Alvaro: both [`attr()`](http://api.jquery.com/attr/) *and* [`prop()`](http://api.jquery.com/prop/) will return the `id` reliably. — David Thomas, Feb 07 '15 at 17:43
If `this` is a form element, then you don't even need jQuery. `this.form.id` should do it. — Roamer-1888, Feb 07 '15 at 17:57
@DavidThomas i thought i depends on the jquery version used. prop is latter then attr — alex, Feb 07 '15 at 17:57
@alex: true, I guess; but `prop()` was introduced in jQuery 1.6, anyone using a version of jQuery older that should, I think, specify in the question which version they're using (and, to some extent, *why*, because in most cases the best advice in that situation would be to upgrade, either to version 1.11.x or 2.x). — David Thomas, Feb 07 '15 at 18:02

Bhojendra Rauniyar · Answer 1 · 2015-02-07T17:46:46.847

4

Pass a parameter in your function like below:

function transferData(elem) {

And use $(elem) instead of $(this) and use in your html like this:

onClick="transferData(this)"

From your update of html, you may use like this:

var form_id= $(elem).closest('form').attr('id');

edited Feb 07 '15 at 17:46

answered Feb 07 '15 at 17:41

Bhojendra Rauniyar

83,432
35
168
231

i see what your doing, tried but not getting the result ;( btw i have add a simplfied html structure – alex Feb 07 '15 at 17:53
It works but why you're using id like this? `form_update[1]` where [ ] may cause the problem to work with the id.... See this answer: http://stackoverflow.com/questions/22448626/how-to-take-id-as-selector-when-used-hash/22448650#22448650 – Bhojendra Rauniyar Feb 07 '15 at 17:58
form_update[x] represents a product row in a product cart. So 5 product in a cart and i have 5 forms id form_update[0]...form_update[4].... – alex Feb 07 '15 at 17:59

score 4 · Accepted Answer · answered Feb 07 '15 at 18:15

4

First, attach your event handlers in javascript ...

$("button[type='submit']").on('click', transferData);

... then, in the event handler, this is the clicked element (a submit button) :

function transferData() {
    var form_id= this.form.id;
    ...
}

answered Feb 07 '15 at 18:15

Roamer-1888

19,138
5
33
44

of all the suggestions this one worked as expected! Hopefully i can use it! – alex Feb 07 '15 at 18:26
But how can make the submit the last action in function transferData? ` function transferData(elem) { var form_id= this.form.id; var radioValDest =$('input:radio[name=dest]:checked').val() $(form_id).('#dest1').val(radioValDest); alert('form id '+form_id+' dest1 '+radioValDest ); form_id.Submit(); }` – alex Feb 07 '15 at 18:32
i need to alter a hidden input field value before submitting the form. The hidden input field i set equal to input field outside the form – alex Feb 07 '15 at 18:42
@alex, you need to familiarise yourself with [jQuery traversing methods](http://api.jquery.com/category/traversing/). Web tutorials are available. – Roamer-1888 Feb 07 '15 at 20:03

trying to get a form id with closest?

2 Answers2