При изменении через <select> проверить видимые входные данные JS

Question

При изменении через <select> проверить видимые входные данные JS

0

У меня есть этот код, некоторые из них, но не работают, или у меня просто нет кодов.

<script type="text/javascript">
    $(document).ready(function(){
    $('#fac').hide();//div fac
    $('#stud').hide();

    $("#thechoices").change(function(){

    $("#all").children().show();

    $("#" + this.value).show().siblings().hide();   


    });

    $("#thechoices").change();
    });

    **if ($('#stud:not(:visible)')){
        $("#myform").validate({
           ignore: ":hidden"**
        });
    }

    </script>

Я хочу иметь альтернативные требуемые данные. Моя цель в моей форме - скрыть и показать вклад, касающийся какой позиции (член факультета или ученика в качестве опций выбора) и сохранить в базе данных. Различные поля ввода, которые появляются (с тем же именем для целей db) для учащегося и преподавателя. Однако, когда я выбираю Student (теперь появляются поля ввода Student, а поля ввода участников факультета скрыты), заполните поля и нажмите кнопку "Отправить", я не могу продолжить, потому что скрытые поля (через JS и Select Tag) для преподавателей член также должен быть заполнен.

Вот моя форма:

<form name = "myform">
<label>Select Position</label>
            <select id="thechoices" name="position">        
                <option value="stud">Student</option>
                <option value="fac">Faculty Member</option>
            </select>
<div id = "all">    
    <div id="stud">
        <input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
        <input type="text" name="id_num" size="8" placeholder="8-digits only"required />
        <input type="submit"  value='Borrow' class="button radius">
    </div>

    <div id="fac">
        <input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
        <input type="text" name="id_num" size="8" placeholder="8-digits only"required />
        <input type="submit"  value='Borrow' class="button radius">
    </div>
</div>

То, что должно быть сделано? Я с нетерпением жду решения об этом. Огромное спасибо заранее. Это было 4 часа, когда я попытался решить мою проблему с ресурсами (здесь, здесь и т.д.), Но я не знаю, куда поместить эти коды в работу.

Cecil 03 янв. 2014, в 14:12

Источник

0

У вас неверный HTML. Идентификаторы должны быть уникальными.
putvande 03 янв. 2014, в 13:30
0

Хорошо. Я собираюсь изменить эти идентификаторы.
Cecil 03 янв. 2014, в 13:34

Теги:

javascript

jquery

html

validation

forms

2 ответа

1

Я согласен с cretzzzu3000. Также я хотел бы скрыть или показать связанные поля при выборе. Так что пользователю не нужно беспокоиться о остальных полях вообще. Вот что я пробовал.

$(document).ready(function(){
    $('select').on('change',function(){
        var selected = this.value,
            div_all = $(this).next('div'),
            selected_div = div_all.children('div#'+selected);

        div_all.find('input[type=text]').removeAttr('required');
        selected_div.find('input[type=text]').attr('required','required');
        selected_div.fadeIn().siblings('div').fadeOut();
    });
});

Надеюсь, это поможет. Благодарю.

sanman 03 янв. 2014, в 13:11

Ещё вопросы

У вас неверный HTML. Идентификаторы должны быть уникальными.
Хорошо. Я собираюсь изменить эти идентификаторы.

cretzzzu3000 · Accepted Answer · 2014-01-03T11-23-00.000Z

Когда вы скрываете или показываете входы, вы также можете изменить свой "обязательный" атрибут:

Когда вы скрываете ввод, выполните:

$("#my_input").removeAttr("required");

Когда вы показываете вход, выполните:

$("#my_input").attr("required","required");

В своем коде выполните следующие действия:

 $("#thechoices").change(function(){

    $("#all").children().show();

    $("#" + this.value).show().siblings().hide();

    var selection = this.value;   

     $("#" + this.value + "input").each(function()
      {
        $(this).attr("required","required");
      })

     $("#thechoices option").each(function()
      {
         if($(this).val()!=selection)
          {
             var id = $(this).val();
             $("#"+id+" input").each(function()
               {
                 $(this).removeAttr("required");   
               })
          }
       })

    });