get id of form being submitted

Question

I posted a question earlier wrt dynamically created forms, and got excellent advice. At the moment I have a list of forms, formCELL, each created as follows.

html

<div class="container">
    <div class="container-element" id="1">
        <h3>HEADER</h3>
        <form action="refresh.php" id="formCELL" method="post" name="form_1">
            <div class="panel-body">
                <div class="col-xs-10 com">
                    CONTENT GOES HERE
                </div>
                <div class="col-xs-2 btn">
                    <button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
                </div>
            </div>
        </form>
    </div>
    <div class="container-element" id="2">
        <h3>HEADER</h3>
        <form action="refresh.php" id="formCELL" method="post" name="form_2">
            <div class="panel-body">
                <div class="col-xs-10 com">
                    CONTENT GOES HERE
                </div>
                <div class="col-xs-2 btn">
                    <button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
                </div>
            </div>
        </form>
    </div>
    <div class="container-element" id="3">
        <h3>HEADER</h3>
        <form action="refresh.php" id="formCELL" method="post" name="form_3">
            <div class="panel-body">
                <div class="col-xs-10 com">
                    CONTENT GOES HERE
                </div>
                <div class="col-xs-2 btn">
                    <button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
                </div>
            </div>
        </form>
    </div>
    <div class="container-element" id="4">
        <h3>HEADER</h3>
        <form action="refresh.php" id="formCELL" method="post" name="form_4">
            <div class="panel-body">
                <div class="col-xs-10 com">
                    CONTENT GOES HERE
                </div>
                <div class="col-xs-2 btn">
                    <button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
                </div>
            </div>
        </form>
    </div>
</div>

javascript

$(document).ready(function() {

   $('#formMAIN').submit(function(event) {

       //formCELL is generated here through AJAX call.....

   });
});

$('#formCELL').submit(function(event) {

    // process the form
    alert("about to submit");
    //AJAX call to go here

    var user_id = $(this).closest("form").attr('id');   
    alert(user_id);

    event.preventDefault();
});

I am trying to get the id of the form being submitted so I can process it further, and I've tried diferent variations of $(this).closest("form").attr('id'); and all return a value of undefined

How can I get the id of the form being submitted?

ID's are meant to be unique. You have 2 forms bearing the same ID. You want to use a class if you want to go further with this. However, you didn't name one of the forms `formMAIN`, you called them both `formCELL`, that's why it's not working. Let me know if you want this as an "answer". — Funk Forty Niner, Sep 13 '16 at 12:43
Hey - I noticed the issue with the id's when I was updating the original post - I've since set the form class to formCELL, and the id to "frm1", "frm2" etc. event.target.id returns the id of the form, but I presumed I could just navigate through siblings and parent divs to update various elements. — PaulMasterson, Sep 13 '16 at 12:51
@Fred -ii- As was suggested below, I used event.target.id to get the id of the form. So now, to get various attributes of the parent div, I'm using the following: var user_id = event.target.closest('div').id; var score = $('div #' + user_id +'').attr('data-score'); var time = $('div #' + user_id +'').attr('data-time'); alert(score); alert(time); is this way of navigating through elements on the page acceptable? I know it 'works', but it seems convoluted. Am I missing a simpler way? — PaulMasterson, Sep 13 '16 at 13:53

score 1 · Accepted Answer · answered Sep 13 '16 at 12:35

1

You can use event.target.id to get form id

answered Sep 13 '16 at 12:35

berrtech

328
1
9

ie 6-8 uses `event.srcElement` instead of `event.target.id` – berrtech Sep 14 '16 at 11:32

score 0 · Answer 2 · answered Sep 13 '16 at 12:32

0

Just bind the "submit" event to whole form and then use

$(this).attr('id');

answered Sep 13 '16 at 12:32

Wax Cage

788
2
8
24

score 0 · Answer 3 · answered Sep 13 '16 at 12:50

0

Maybe use data-id bro . Put data-id as attribute in form So you can easily get it using $(this).attr('data-id')

answered Sep 13 '16 at 12:50

Beginner

4,118
3
17
26

get id of form being submitted

3 Answers3