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

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

1 голос
/ 15 сентября 2010

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

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

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

Ответы [ 3 ]

4 голосов
/ 25 марта 2011

Ответ 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>
3 голосов
/ 15 сентября 2010 
<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>

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

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

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

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

EDITED

0 голосов
/ 15 сентября 2010 
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());

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...