CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Baba Turk
Baba Turk

Reputation: 27

How to get form's id, only which submitted

I have 4 forms in my html, and required that form's id which submitted. But every time constantly first form's id comes in output. My HTML is:

<form name="form" id="filterHeadByFamNum" class="form-horizontal" role="form">
    <div class="form-group">
        <label>Family Number</label> <input type="text" name="familyNumber" placeholder="Family Number" class="form-control">
    </div>
    <button type="button" class="btn btn-primary" onclick="filterByFamNum();return false;">Submit</button>
</form>

<form name="form" id="filterHeadByMemName" class="form-horizontal" role="form">
    <div class="form-group">
        <label>Head Name</label> <input type="text" name="head" placeholder="Head Name" class="form-control">
    </div>
    <button type="button" class="btn btn-primary" id="head" onclick="filterByMemName();return false;">Submit</button>
</form>

<form name="form" id="filterMemberByPhone" class="form-horizontal" role="form">
    <div class="form-group">
        <label>Phone Number</label> <input type="text" name="phone" placeholder="Phone Number" class="form-control">
    </div>
    <button type="button" class="btn btn-primary" onclick="filterByPhone();return false;">Submit</button>
</form>

<form name="form" id="filterMemberByCNIC" class="form-horizontal" role="form">
    <div class="form-group">
        <label>CNIC</label> <input type="text" name="cnic" placeholder="CNIC" class="form-control">
    </div>
    <button type="button" class="btn btn-primary" onclick="filterByCNIC();return false;">Submit</button>
</form>

and my js is

function filterByFamNum(){
    var name = $(this.form).attr('id');
    console.log(name);
}

function filterByMemName(){
    var name = $(this.form).attr('id');
    console.log(name);
}

function filterByPhone(){
    var name = $(this.form).attr('id');
    console.log(name);
}

function filterByCNIC(){
    var name = $(this.form).attr('id');
    console.log(name);
}

Ouptut of every form submit is constantly filterHeadByFamNum

Upvotes: 1

Views: 4951

Answers (3)

Venkata Krishna
Venkata Krishna

Reputation: 15112

I would use @JoshCrozier's solution for this problem but just for the sake of completion and/or if you're adamant about using your solution instead. Here it is:

jsbin DEMO -> http://jsbin.com/yiteludomu/2

Add this as a parameter in each of your javascript functions to send the button you're clicking.

<button type="button" class="btn btn-primary" onclick="filterByFamNum(this);return false;">Submit</button>

here is how you handle button click .. observe btn which is the clicked button.

function filterByFamNum(btn){
    var name = $(btn).parent('form').attr('id');
    alert(name);
}

Upvotes: 1

void
void

Reputation: 36703

var submittedForms = [];
$('form').on('submit', function () {
    submittedForms.push(this.id);
});

submittedForms array will hold the ids of all the submitted form.

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240928

Rather than adding event listeners to the buttons, just listen for the submit event on the form:

$('form').on('submit', function () {
    var id = this.id;
    console.log(id);
});

..or without jQuery:

Array.prototype.forEach.call(document.querySelectorAll('form'), function (el) {
    el.addEventListener('submit', function () {
        var id = el.id;
        console.log(id);
    });
});

Upvotes: 3

Related Questions