Как получить отправленную опцию на странице html, где динамически создаются несколько форм (и полей выбора)

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня возникли проблемы с получением отправленной опции на странице html, где я динамически создаю несколько форм, соответствующие <select> и <option> значения внутри нее.

Это мой html

 <div class="inputs_container">
</div>

мой js:

  var data = {
        "name": "forest",
        "inputs": [
            {
                "name": "input_1", "formats": ["JPG"]
            },
            {
                "name": "input_2", "formats": ["TXT","ODT"]
            }
        ]
}
var data_files = {
    "resources": [
        {"name": "file_1.jpg", "format": "JPG"},
        {"name": "file_2.jpg", "format": "JPG"},
        {"name": "text_1.txt", "format": "TXT"},
        {"name": "text_2.txt", "format": "TXT"},
        {"name": "odt_1.odt", "format": "ODT"},
        {"name": "odt_2.odt", "format": "ODT"}
    ]
}

document.addEventListener('DOMContentLoaded', function() {
    $.each(data.inputs, function(i, input) {
        let format_in = input.formats;
        var form_id = input.name;
        var select_id = form_id   "_id";
        var select_name = form_id   "_name";
        
        let $h5 = $(`<h5>Select ${input.formats} file</h5>`).appendTo('.inputs_container');
        $('<form>', {
            "id": form_id,
            "html": '<div class="input_field s12 l6"> <select id="'   select_id   '" name= "'   select_name  '">  </select> </div> <div class="col s12 l6"><button class="btn blue" type="submit"> submit</button> </div>'
    }).appendTo(`.inputs_container`);

        var select = document.getElementById(select_id);
        var file_list_URI =  serverURI   "/resources?formats="   format_in   "";
        $.getJSON(file_list_URI, function(file){
            $.each(file.resources, function(j, fieldopt){
                select.add(new Option(fieldopt.name, fieldopt.name));
            }); // each
            M.FormSelect.init(document.querySelectorAll('select'));
            var input_form = document.getElementById(form_id);
            input_form.onsubmit = function(e) {
                e.preventDefault();
                var input_file = input_form.select_name.value;
                console.log(" FORM SUBMIT "   input_file);
            }
         });
    });
});

Код отображает два поля выбора (с правильными параметрами), одно для JPG и одно для TXT, ODT форматов файлов. Но когда я нажимаю любую из двух кнопок отправки, я получаю

 Uncaught TypeError: input_form.select_name is undefined

Может ли кто-нибудь помочь мне исправить эту ошибку?

Заранее благодарю

1. Вы пробовали запускать ее через отладчик?

2. @ControlAltDel: какой отладчик? извините, новичок здесь

3. Попробуйте: var input_file = input_form.querySelector("[name=" select_name "]").value;

4. @user123892 Обычно, если вы нажмете F12 в своем браузере, вы можете открыть dubugger. Установите точку останова и запустите страницу снова

5. @LouysPatriceBessette: спасибо, это работает!! если вы опубликуете свое решение в ответе, я могу его принять..

Ответ №1:

Ошибка, с которой вы столкнулись, возникает в этой строке:

 var input_file = input_form.select_name.value;

Сообщение об ошибке Uncaught TypeError: input_form.select_name is undefined означает select_name , что не определено.

select_name здесь не та переменная, которую вы объявили парой строк выше. Это свойство input_form элемента, найденного document.getElementById(form_id); .

Выбранный элемент, на который вы хотите настроить таргетинг, является дочерним элементом этого элемента формы… Поэтому вы должны настроить на нее таргетинг, и .querySelector() — правильный метод для этого.

Поэтому измените его на:

 var input_file = input_form.querySelector("[name=" select_name "]").value;