Выберите поле с опцией «Другое», чтобы отобразить поле ввода текста. Как вернуть значение для отправки формы с помощью jquery?

У меня есть форма со следующим полем выбора:

<fieldset id="workers_comp_info">
  <p>
    <label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
    <select name="i_n_r_reason" id="i_n_r_reason">
      <option value="No employees">No employees</option>
      <option value="1-2 employees">1-2 employees</option>
      <option value="Other">Other(Specify reason)</option>
    </select>
    <input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
  </p>
</fieldset>

Я написал следующий код jquery, чтобы скрыть текстовое поле «other_reason», если в поле выбора не выбрано «Другое».

$('#i_n_r_reason').change(function() {
  $('#other_reason').toggle($(this).val()=='Other');
}).change();

Я создаю метод jquery с именем SubmitForm. Я хочу написать что-то вроде этого:

function SubmitForm() {
  if ($('#i_n_r_reason').val()=='Other')
    ('#i_n_r_reason').val = ('#other_reason').val
  ('#account_form').submit();
}

Когда пользователь выбирает «Другое», отображается текстовое поле для ввода причины. Я хочу, чтобы эта причина переопределяла «Другое», когда пользователь отправляет форму. Но этого не происходит с этим кодом. Какие-либо предложения?


textfield forms drop-down-menu jquery
person user338413    schedule 15.09.2010    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Ответ xar имеет приятную функциональность, но он не достигает первоначальной цели замены значения #i_n_r_reason значением #other_reason, когда выбрано «Другое». Я собрал все вместе ниже.

<html>
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.4.4");
    </script>
    <script type="text/javascript">
        $(function(){
            //initially hide the textbox
            $("#other_reason").hide();
            $('#i_n_r_reason').change(function() {
              if($(this).find('option:selected').val() == "Other"){
                $("#other_reason").show();
              }else{
                $("#other_reason").hide();
              }
            });
            $("#other_reason").keyup(function(ev){
                var othersOption = $('#i_n_r_reason').find('option:selected');
                if(othersOption.val() == "Other")
                {
                    ev.preventDefault();
                    //change the selected drop down text
                    $(othersOption).html($("#other_reason").val()); 
                } 
            });
            $('#form_id').submit(function() {
                var othersOption = $('#i_n_r_reason').find('option:selected');
                if(othersOption.val() == "Other")
                {
                    // replace select value with text field value
                    othersOption.val($("#other_reason").val());
                }
            });
        });
    </script>
</head>
<body>
<form action="http://www.perfectweb.com/resources/post.php" id="form_id" method="post">
    <fieldset id="workers_comp_info">
      <p>
        <label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
        <select name="i_n_r_reason" id="i_n_r_reason">
          <option value="No employees">No employees</option>
          <option value="1-2 employees">1-2 employees</option>
          <option value="Other">Other(Specify reason)</option>
        </select>
        <input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
      </p>
    </fieldset>
    <input id="form_submit" type="submit" value="submit" />
</form>
</body>
</html>
person perfectweb    schedule 24.03.2011

arrow_upward
3
arrow_downward 

<html>
<head>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //initially hide the textbox
            $("#other_reason").hide();
            $('#i_n_r_reason').change(function() {
              if($(this).find('option:selected').val() == "Other"){
                $("#other_reason").show();
              }else{
                $("#other_reason").hide();
              }
            });
            $("#other_reason").keyup(function(ev){
                  var othersOption = $('#i_n_r_reason').find('option:selected');
                  if(othersOption.val() == "Other"){
                    ev.preventDefault();
                    //change the selected drop down text
                    $(othersOption).html($("#other_reason").val()); 


                  } 
            });
        });
    </script>
</head>
<body>
    <fieldset id="workers_comp_info">
      <p>
        <label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
        <select name="i_n_r_reason" id="i_n_r_reason">
          <option value="No employees">No employees</option>
          <option value="1-2 employees">1-2 employees</option>
          <option value="Other">Other(Specify reason)</option>
        </select>
        <input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
      </p>
    </fieldset>
</body>
</html>

Итак, в основном, что он делает:

Когда раскрывающийся список изменится, оцените значение. Если это «Другие», покажите текстовое поле, иначе скройте его.

Во второй части после отправки формы оцените значение выбранного раскрывающегося списка. Если это «Другие», то запретите отправку формы, вместо этого измените текст выбранного раскрывающегося списка на значение из текстового поля.

Я думаю, код вполне объясним. Надеюсь это поможет.

ОТРЕДАКТИРОВАНО

person xar    schedule 15.09.2010
comment
Спасибо, кажется, что показать и спрятать коробку не получится. Однако вариант, который я использую с toggle(), работает. И не похоже, что я могу переопределить значение поля выбора. - person user338413; 16.09.2010
comment
@ user338413: здесь код работает нормально. Я только что обновил свой ответ и показал весь код. - person xar; 16.09.2010

arrow_upward
0
arrow_downward 

function SubmitForm() {
  if ($('#i_n_r_reason').val()=='Other')
    ('#i_n_r_reason').val = ('#other_reason').val
  ('#account_form').submit();
}

это точная копия вашего текущего кода? или быстро переписать? столько всего не хватает!!

я не уверен, что вы можете установить значение поля выбора на что-то, что не является опцией. то, что вы могли бы сделать, это иметь скрытое поле, в котором хранится значение выбора или значение вашего дополнительного текстового поля.

поэтому в вашей функции change() при выборе. установите значение скрытого поля в значение выбора с чем-то вроде:

$('#MyHiddenField').val($(this).val());

и в вашей функции отправки формы сделайте следующее:

if ($('#i_n_r_reason').val()=='Other'){
 $('#MyHiddenField').val($('#MyHiddenField').val());
}
person Patricia    schedule 15.09.2010
comment
Сейчас я использую скрытое поле, но у меня возникла проблема с получением из него значения. Я собираюсь опубликовать этот вопрос снова с новым кодом. - person user338413; 16.09.2010