Получение неопределенной ошибки при отправке формы

Question

Я, по сути, пытаюсь получить форму.Затем, когда вы отправляете, он просто печатает value то, что вы выбрали из выпадающего списка.Однако все, что я получаю, это undefined undefined

<form action="items" method="get">
Fruits
<select name="fruits">
    <option value="apple">Apple</option>
    <option value="mango">Mango</option>
    <option value="all-fruits">All Fruits</option>
</select>

<br/>

Vegs:
<select name="vegs">
    <option value="carrots">Carrots</option>
    <option value="peas">Peas</option>
    <option value="Lettuce">Lettuce</option>
</select>
<br>
<input type="button" value="Submit" onClick="show_selection()"><br>
Your Selection: <span id="result"></span>

<script>
    function show_selection() {
        document.getElementById("result").innerHTML = document.getElementsByName('fruits').value + " " + 
        document.getElementsByName('vegs').value;
    }
</script>

Если вы выберете All Fruits в разделе fruits и Peas в разделе vegs, он должен напечатать all-fruits peas

Answer 1

Ваша проблема в том, что document.getElementsByName возвращает коллекцию список узлов .Это означает, что вы потенциально можете иметь несколько элементов в этой коллекции, которые извлекаются из вашего HTML, потому что все они имеют одинаковый name.Таким образом, если вы хотите получить только один элемент из этой коллекции, вам нужно использовать индекс 0 для нацеливания на этот элемент.

См. Рабочий пример ниже:

<form action="items" method="get">
Fruits
<select name="fruits">
    <option value="apple">Apple</option>
    <option value="mango">Mango</option>
    <option value="all-fruits">All Fruits</option>
</select>

<br/>

Vegs:
<select name="vegs">
    <option value="carrots">Carrots</option>
    <option value="peas">Peas</option>
    <option value="Lettuce">Lettuce</option>
</select>
<br>
<input type="button" value="Submit" onClick="show_selection()"><br>
Your Selection: <span id="result"></span>

<script>
    function show_selection() {
        let selectedFruit = document.getElementsByName('fruits')[0].value;
        let selectedVeg = document.getElementsByName('vegs')[0].value;
        
        if(selectedVeg == "peas") {
          selectedVeg = "Peas!!!";
        }
        
        document.getElementById("result").innerHTML = selectedFruit + " " +selectedVeg;
        
    }
</script>

РЕДАКТИРОВАТЬ: Если вы посмотрите на фрагмент выше, вы увидите, что я сохранил оба выбранных параметра в их собственных переменных.Затем вы можете использовать оператор if, чтобы проверить, равна ли переменная определенной строке (например: peas), а затем соответствующим образом изменить переменную, чтобы она обновляла выводимый текст.

Другое решениеэто должно дать вашему select элементу id.Поскольку id s должны быть уникальными для каждого элемента, вы можете использовать document.getElementById для получения одного элемента вместо набора элементов:

<form action="items" method="get">
Fruits
<select id="fruits">
    <option value="apple">Apple</option>
    <option value="mango">Mango</option>
    <option value="all-fruits">All Fruits</option>
</select>

<br/>

Vegs:
<select id="vegs">
    <option value="carrots">Carrots</option>
    <option value="peas">Peas</option>
    <option value="Lettuce">Lettuce</option>
</select>
<br>
<input type="button" value="Submit" onClick="show_selection()"><br>
Your Selection: <span id="result"></span>

<script>
    function show_selection() {
        document.getElementById("result").innerHTML = document.getElementById('fruits').value + " " + 
        document.getElementById('vegs').value;
    }
</script>

Answer 2

При получении элементов по имени возвращает массив узлов.Так что вам просто нужно изменить document.getElementsByName('fruits') на document.getElementsByName('fruits')[0] и document.getElementsByName('vegs') на document.getElementsByName('vegs')[0].

Так ваш код будет выглядеть так:

<script>
    function show_selection() {
        document.getElementById("result").innerHTML = document.getElementsByName('fruits')[0].value + " " + 
        document.getElementsByName('vegs')[0].value;
    }
</script>