Блог

Я столкнулся здесь с очень странной ситуацией. Допустим, у меня есть форма с тремя входными элементами типа radio, точно так же, как это

 <form>
    <input type="text" name="donor" value="" />Heart
    <input type="radio" name="organ" value="10" />Heart
    <input type="radio" name="organ" value="20" checked="checked" />Lungs
    <input type="radio" name="organ" value="30" />Kidney    
</form>
  

и я подумал, что эта строка

 alert("input type: "   document.forms[0].organ.type);
  

вернул бы тип radio вместо undefined . Хотя, этот

 alert("input type: "   document.forms[0].organ[0].type);  
  

возвращает тип radio и, конечно, это не то, что я хочу. Вы можете увидеть здесь колдовство.

Кто-нибудь знает, что происходит?

1 — е ОБНОВЛЕНИЕ

То же самое произойдет, если мы будем иметь дело с флажками, что означает, что тип элемента в массиве радиоприемников или кнопок флажков не может быть определен без указания индекса.

Другими словами, этот фрагмент

 var i, form = document.forms[0], fields = ['donor', 'organ'];

for(i = 0; i < fields.length; i  ) {
    switch(form[fields[i]].type) {
        case 'radio':
            alert('(a) - I can beat up Chuck Norris');
            // anyway, no one hears this :)
            break;
        case 'checkbox':
            break;
        case 'text':
            alert('(a) - Chuck Norris is unbeatable');
            break;
    }
}
  

не будет вести себя так, как можно ожидать. Так что, я думаю, перебор элементов формы — это единственное оставшееся решение. Ну, это не так — проверьте 2-е обновление.

 for(i = 0; i < form.elements.length; i  ) {
    switch(form.elements[i].type) {
        case 'radio': 
            alert('(b) - Nobody can beat up Chuck Norris');
            // now, check if this element is in fields[] 
            // and do something  
            break;
        case 'checkbox':
            break;
        case 'text':
            alert('(b) - Chuck Norris is unbeatable');
            break;
    }
}
  

Вот скрипка.

2- е ОБНОВЛЕНИЕ

Тем временем я нашел довольно простой способ доступа к элементам формы и запроса к ним, проходя через fields объект (в моем случае), а не через все элементы.

 var form = document.forms[0], fields = ['donor', 'organ'];

for (var key in fields) {
    switch(form[key].type){
        case 'select-one':
            break;
        case 'select-multiple':
            break;
        case 'checkbox': // we are dealing with a single checbox button 
            break;
        case 'text': case 'textarea': case 'hidden': case 'password':
            break;
        default:
            if(form[key][0].type == radio' || form[key][0].type == radio' == 'checkbox') {
                // we're dealing with an array of radio or checkbox buttons, otherwise
            }else{
                console.log("Something went wrong!");
            }
            break;
    }
}
  

Секрет можно увидеть, если добавить эту строку:

 alert(document.forms[0].organ.toString());
  

и вы увидите RadioNodeList , что он создает структуру, похожую на массив.

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

Если вам действительно НЕОБХОДИМО получить к ним доступ без использования синтаксиса массива [0] , вы можете присвоить каждой переключателю уникальный идентификатор:

 <form>
    <input type="radio" id="radio_1" name="organ" value="10" />Heart
    <input type="radio" id="radio_2" name="organ" value="20" checked="checked" />Lungs
    <input type="radio" id="radio_2" name="organ" value="30" />Kidney
</form>

<script>
    alert("input type: "   document.forms[0].organ[0].type);

    alert(document.forms[0].organ.toString());

    alert("input type: "   document.getElementById("radio_1").type);
</script>