CODEWITHSUNDEEP
javascriptjquery
SilverSurfer
SilverSurfer

Reputation: 4366

How to know which form I clicked with button class

How can I know which form I clicked? Is it possible with a button class instead of buttons with id?

$(document).ready(function () {
    $(".form-buttons").click(function () {
        //I only want the form which corresponds to the button I clicked
        var formDates = $(form).serialize()
        alert ("You clicked "+formDates)
    })
})

<form id="form1">
    <input type="text" value="date1" name="name1"/>
    <input type="text" value="date2" name="name2"/>
    <input type="text" value="date3" name="name3"/>
    <button type="button" class="form-button"></button>
</form>
<form id="form2">
    <input type="text" value="date4" name="name1"/>
    <input type="text" value="date5" name="name2"/>
    <input type="text" value="date6" name="name3"/>
    <button type="button" class="form-button"></button>
</form>

Upvotes: 1

Views: 1253

Answers (5)

Aprilsnar
Aprilsnar

Reputation: 535

Check this fiddle on how I would do it.

https://jsfiddle.net/xtfeugav/

Simple use

$("form").submit(function(e) {

to listen for every submit on all the forms you have. To get the ID of the form you use

var formid = $(this).attr('id');

I used e.preventDefault(); to prevent the form don't update the page.

Remember to use <input type="submit" value="Submit"> on your forms to make this work.

Its a simple code, hope it helps.

Upvotes: 0

Barry Meijer
Barry Meijer

Reputation: 760

You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!

Solution 1: Traversing up the DOM

<script>
        $(document).ready(function () {
            $(".form-button").click(function () {
                var clicked_form = $(this).parent();
                var formDates = clicked_form.serialize(); 
                alert ("You clicked "+formDates);
            })
        })
    </script>
</head>

<body>
    <form id="form1">
        <input type="text" value="date1" name="name1"/>
        <input type="text" value="date2" name="name2"/>
        <input type="text" value="date3" name="name3"/>
        <button type="button" class="form-button"></button>
    </form>
    <form id="form2">
        <input type="text" value="date4" name="name1"/>
        <input type="text" value="date5" name="name2"/>
        <input type="text" value="date6" name="name3"/>
        <button type="button" class="form-button"></button>
    </form>
</body>

Solution 2: Submit the form

You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.

<script>
        $(document).ready(function () {
            $("form").on('submit', function (e) {
                e.preventDefault();                    
                var formDates = $(this).serialize() 
                alert ("You clicked "+formDates)
            })
        })
    </script>
</head>

<body>
    <form id="form1">
        <input type="text" value="date1" name="name1"/>
        <input type="text" value="date2" name="name2"/>
        <input type="text" value="date3" name="name3"/>
        <input type="submit" class="form-button"></input>
    </form>
    <form id="form2">
        <input type="text" value="date4" name="name1"/>
        <input type="text" value="date5" name="name2"/>
        <input type="text" value="date6" name="name3"/>
        <input type="submit" class="form-button"></input>
    </form>
</body>

Upvotes: 0

dinesh
dinesh

Reputation: 342

Yes use class instead of id for similar elements. Please try this.

Note: form-button is the class name in your HTML and not form-buttons

$(document).ready(function () {
    $(".form-button").click(function () {
        var formDates = $(this).closest('form').serialize();
        alert ("You clicked "+formDates)
    })
})

Upvotes: 1

ClementNerma
ClementNerma

Reputation: 1109

You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :

$(document).ready(function () {
    $(".form-buttons").click(function () {
        alert('You clicked the form' + this.parentElement.getAttribute('id'));
    })
})

Upvotes: 0

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

I think you be looking for 

$('.form-button').on('click', function () {
    alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});

something Maybe Like mentioned above.

Upvotes: 0

Related Questions