[英]Simplest way to update an input field using an AJAX call through jQuery from an SQL database using PHP
I'm building an inventory system for the company I work for, and I have a problem that I was hoping could be solved with as little coding as possible. 我正在为我工作的公司建立一个库存系统,但我有一个问题,我希望可以用尽可能少的编码来解决。 I want to make it so when someone clicks on an
option
from a select
tag, an AJAX call using $.ajax()
from jQuery would update 我要这样做,以便当有人单击
select
标记中的option
,使用jQuery中的$.ajax()
进行AJAX调用会更新
<input id="cratesRemaining">
Can I get the input field to update on selection of the option I guess would be the easiest way to ask. 我能否获得输入字段以更新选择的选项,我想这是最简单的询问方法。
Here's some of the code: 这是一些代码:
<select id="busShell">
<option disabled selected="selected" class="default">
--- Choose Shell Index ---
</option>
</select>
The select list will be generated using the shell_index
column of each row in the SQL database. 选择列表将使用SQL数据库中每一行的
shell_index
列生成。
Example of the resulting code: 结果代码示例:
<option value="0">0488</option>
Would return the result "1.03" from the database column crate_stock
when column shell_index
is referenced. 将从数据库列返回结果“1.03”
crate_stock
当列shell_index
引用。
Here is the jQuery script I have setup to call the php file: 这是我已经设置好的jQuery脚本来调用php文件:
<script>
$.ajax({
url: '/php/busSubmit.php',
success: function(data) {
$('#cratesRemaining').val(data);
}
});
</script>
For some added information the database is named paper_inventory
and the table is bus_shells
. 对于某些附加信息,数据库名为
paper_inventory
,而表名为bus_shells
。 All shell indexes are 4-digit numbers, and it's only those two columns in that table. 所有shell索引都是4位数字,并且仅是该表中的这两列。 I have another table with 7 fields for paper selection, but I want to get the simple one working first.
我有另一个表,其中有7个字段可供选择纸张,但我想首先使用一个简单的表。
As mentioned by Jeremy in comment. 正如Jeremy在评论中提到的那样。
$('#busShell').on('change', function(){
$.ajax({
url: '/php/busSubmit.php',
dataType:'datatype you expect'
success: function(data) {
$('#cratesRemaining').val(data);
})
});
In the HTML just edit so the value in the option-tags is the same value as the value displayed. 在HTML中,只需进行编辑,以便选项标签中的值与显示的值相同。 Like
<option value="0488">0488</option>
就像
<option value="0488">0488</option>
JS/jQuery JS / jQuery的
$('#busShell').on('change', function() {
$.post('foo.php', { shellIndex: $(this).val() }, function(data) {
$('#cratesRemaining').val(data.crates);
});
});
You now get $_POST['shellIndex']
in your PHP script, so query your database with that and then return a json string with crates = remaining crates. 现在,您在PHP脚本中获得
$_POST['shellIndex']
,因此使用该脚本查询数据库,然后返回带有板条箱=剩余板条箱的json字符串。 Then it should be done! 然后应该做! Look at
json_encode()
and don't forget to send the right headers header('Content-type: application/json');
查看
json_encode()
,不要忘记发送正确的标header('Content-type: application/json');
. 。
There were some syntax errors in the code you provided. 您提供的代码中存在一些语法错误。 I fixed them though.
我虽然修复了。 as such:
因此:
$("#busShell").on("change", function(){
$.ajax({
url: "/php/busSubmit.php",
dataType:"datatype you expect",
success: function(data) {
$("#cratesRemaining").val(data)}
});
});`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.