[英]How to pass text-box value to a combo-box?
我目前正在使用HTML,CSS和PHP使用Web应用程序。 但是,我想知道如何将文本框值传递给梳状框。 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>
希望能有所帮助!
<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>
您不能仅使用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
$newopt = $_POST['new_option'];
//now, just add the $newopt value into your database
参考文献:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.