Reputation: 25

get id of form being submitted

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?

Upvotes: 0