CODEWITHSUNDEEP
javascriptjquery
Mathias
Mathias

Reputation: 119

Identical forms interfering

I have a problem with two forms, that is being submitted by the same button. When the first form is submitted it's being hidden and the other form is showed. Now when i click the button on the second form, the variable value still contains 'give' from the selectbox in the first form.

What am i doing wrong?

Jquery code:

$('.submit_button').click(function() {
    var value = $(".input_action").val();
    alert(value);

    switch(value) {
        case 'give':
            $('#content_wrapper').hide();
            $('#send_wrapper').show();
            break;

        default:
            alert("default");
            break;
    }
});

Html code: Form 1:

<div id='content_wrapper'>
<form class='form_content' method='post' action=''>
<select name='action' class='input_action'>
<option selected='give'>Give</option>
</select>
<input class='submit_button' type='button' name='button' value='submit'>                  
</form>

Form 2:

<div id='send_wrapper'>
<form name='form_content' class='form_content' method='post' action=''>
<input name='input_action' class='input_action' value='' type='hidden'>
<input class='submit_button' type='button' name='button' value='submit'>
</form>
</div>

Upvotes: 0

Views: 56

Answers (3)

Nick
Nick

Reputation: 4212

First close your first div

<div id='content_wrapper'>
<form class='form_content' method='post' action=''>
<select name='action' class='input_action'>
<option selected='give'>Give</option>
</select>
<input class='submit_button' type='button' name='button' value='submit'>                  
</form>
</div>

your second form is Ok

and in your jquery script change 'give' case to 'Give'

here is a fiddle

Upvotes: 0

Eternal1
Eternal1

Reputation: 5625

Your problem is - you're not finding a proper .input_action element. Try this:

$('.submit_button').click(function() {
    var form = $(this).parent("form");
    var value = form.find(".input_action").val();
    alert(value);

    switch(value) {
        case 'give':
            $('#content_wrapper').hide();
            $('#send_wrapper').show();
            break;

        default:
            alert("default");
            break;
    }
});

Upvotes: 1

Quentin
Quentin

Reputation: 943213

$(".input_action").val() will always give you the value of the first element that matches in the document.

If you want to get the one from the current form, then you need to find the current form and then find the matching element within that.

The context of the event handler will be the element clicked, so you can get that with this.

You can get the form using the form property.

You can then use the jQuery find method to get the element you want.

var value = $( this.form ).find('.input_action').val();

Upvotes: 1

Related Questions