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

参考文献：

Why AJAX

AJAX vs FORMs

What is jQuery

如何将文本框值传递给组合框？

HTML

2 个答案:

PHP侧：