Блог

Главная - Вопросы по программированию - Создать выпадающий список при нажатии кнопки и получить выбранное значение

Создать выпадающий список при нажатии кнопки и получить выбранное значение

#javascript #php #jquery #html

#javascript #php #jquery #HTML

Вопрос:

У меня есть один выпадающий список, одно текстовое поле и одна кнопка в PHP и HTML. Я могу получить значение выбранного значения выпадающего списка, а также значение текстового поля нажатием кнопки. Вот мой index.html :

 <html>
    <head>
        <title></title>   
    </head>
    <body>
        <form action="function.php" method="post">
            <!-- here start the dropdown list -->
            <div id="mainContainer">
                <select name="dowpdown">
                    <option value="String">String</option>
                    <option value="Number">Number</option>
                </select>
                Enter first number <input type="text" name="fnum"/><hr/>

                <input type="submit" name="show_dowpdown_value" value="show"/>
            </div>
        </form>

        <?php include("function.php"); ?>
    </body>  
</html>

Вот мой function.php код: 

 <?php
 // here starts the php
 if (isset($_POST['show_dowpdown_value'])) {

    echo $_POST['dowpdown']; // this will print the value if downbox out
    $x=$_POST['fnum'];
    echo $_POST['fnum'];
}
?>

Теперь я добавил еще одну кнопку, которая будет генерировать один выпадающий список и одно текстовое поле при каждом нажатии. Вот мой код :

 <table>
    <tr>
        <td><button type="button" onClick ="addRow(this)">Add</button></td>
    </tr>
</table>

<script type="text/javascript">
    function addRow(btn) {         
        var parentRow = btn.parentNode.parentNode;
        var table = parentRow.parentNode;
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "text";
        cell1.appendChild(element1);
        var cell3 = row.insertCell(1);
        //var element2 = document.createElement("input");
        var element2 = document.createElement("select");
        //element2.type = "select";
        var option1 = document.createElement("option");
        option1.innerHTML = "Option1";
        option1.value = "1";
        element2.add(option1, null);
        var option2 = document.createElement("option");
        option2.innerHTML = "Option2";
        option2.value = "2";
        element2.add(option2, null);
        cell3.appendChild(element2);
    }
</script>

Он отлично генерирует выпадающий список и текстовое поле. Но я не могу получить значения из сгенерированного выпадающего списка и текстового поля. Нужна помощь, чтобы получить значения из всех выпадающих списков и текстовых полей одним нажатием кнопки.

Комментарии:

1. Вам нужно добавить name свойство к HTML-элементам, которые вы создаете во время выполнения, и использовать это имя для чтения его данных в PHP.

2. Я изменил скрипт следующим образом — element1.name = «fnum»; element2.name = «dowpdown» Возвращает только значение последнего выпадающего списка и текстового поля.

3. Это ожидаемое поведение. Для получения всех значений name должно быть уникальным. Например, fnum1 , fnum2 и т.д.

4. Или преобразовать имена в массив и перебирать их в цикле

5. Поскольку невозможно угадать, сколько раз пользователь нажмет на кнопку, трудно установить уникальное имя для каждого. Как сделать имена массивом и перебирать их в цикле? Любой пример кода, пожалуйста.