Идентичные формы, мешающие

Question

У меня проблема с двумя формами, которые отправляются одной и той же кнопкой. Когда подана первая форма, она скрыта и отображается другая форма. Теперь, когда я нажимаю кнопку во второй форме, значение переменной по-прежнему содержит «дать» из selectbox в первой форме.

Что я делаю неправильно?

Jquery код:

$('.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 код: Форма 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> 

---

Форма 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> 

---

Answer 1

$(".input_action").val() всегда даст вам значение первого элемента, который соответствует в документе.

Если вы хотите получить его из текущей формы, вам необходимо найти текущую форму, а затем найти соответствующий элемент в этом поле.

Контекст обработчика события будет нажат на элемент, поэтому вы можете получить его с помощью this.

Вы можете получить форму, используя объект form.

Затем вы можете использовать метод jQuery find, чтобы получить нужный элемент.

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

Answer 2

Ваша проблема - вы не нашли подходящего элемента .input_action. Попробуйте это:

$('.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; 
    } 
}); 

Answer 3

Сначала закройте ваш первый ДИВ

<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> 

вашу вторую форму является Ok

и в вашем JQuery изменения сценария 'дать' случай 'дать'

здесь fiddle