如何將文本框值傳遞給組合框？

Question

我目前正在使用HTML，CSS和PHP使用Web應用程序。 但是，我想知道如何將文本框值傳遞給梳狀框。 HTML代碼部分復制到下面。 同樣，從數據庫中獲取組合框值。

的HTML

<form method="post">
    <div class="form-group">
        <label for="text">Item Name</label>

        <select class="form-control show-tick" name="ItemName" id="ItemName" required>

          <option value="">Please select</option>

        </select><br>

        <div>
            <table>
                <tr>
                    <td style=" border: 7px solid transparent"><label for="text">Add Item Name : </label></td>

                    <td style=" border: 5px solid transparent"><input type="text" name="name" id="name"  class="form-control" > </td>

                    <td style=" border: 5px solid transparent"><button type="submit" class="btn btn-info">Add</button></td>
                </tr>
            </table>
        </div>

    </div>
</form>

Answer 1

希望能有所幫助！

<script>
function frmSubmit() {
    var txtValue = document.frm.name.value;
    if(txtValue !== '') {
        var option = document.createElement("option");
        option.text = txtValue;
        document.frm.ItemName.add(option);
    }
    return false;
}
</script>                     

<form name="frm" method="post">
    <div class="form-group">
        <label for="text">Item Name</label>
        <select class="form-control show-tick" name="ItemName" id="ItemName" required>
        <option value="">Please select</option>
        </select><br>
        <div>
        <table>
            <tr>
                <td style=" border: 7px solid transparent"><label for="text">Add Item Name : </label></td>

                <td style=" border: 5px solid transparent"><input type="text" name="name" id="name"  class="form-control" > </td>

                <td style=" border: 5px solid transparent"><button type="submit" class="btn btn-info" onClick="return frmSubmit()">Add</button></td>
            </tr>
        </table>
        </div>
    </div>
</form>

Answer 2

您不能僅使用HTML和PHP來執行此操作-而是一小部分javascript / jQuery，您可謂無所不能。

請注意，我為您添加了ajax代碼塊，您將在其中將數據發送到PHP端，並在收到數據后將其保存到數據庫中。

 $('button[type=submit]').click(function(){ let nn = $('#name').val(); $('#ItemName').append('<option value="' +nn+ '">' +nn+ '</option>'); $('#name').val(''); $.ajax({ type: 'post', url: 'name_of_your_php_file.php', data: 'new_option=' + nn }); }); 

 .b5{border: 5px solid transparent;} .b7{border: 7px solid transparent;} select{margin-bottom:30px;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <form method="post"> <div class="form-group"> <label for="text">Item Name</label> <select class="form-control show-tick" name="ItemName" id="ItemName" required> <option value="">Please select</option> </select> <div> <table> <tr> <td class="b7"><label for="text">Add Item Name : </label></td> <td class="b5"><input type="text" name="name" id="name" class="form-control"> </td> <td class="b5"><button type="submit" class="btn btn-info">Add</button></td> </tr> </table> </div> </div> </form> 

PHP側：

<?php
    $newopt = $_POST['new_option'];
    //now, just add the $newopt value into your database

參考文獻：

為什么選擇AJAX

AJAX與表格

什么是jQuery