一个ajax函数在同一表单上为多行运行
one ajax function runs on same form for multiple rows
我有一个ajax函数,它根据所选项目填充多个字段。但我希望有额外的行,人们可以在同一表格中选择更多的项目。并尝试在其余的行中运行相同的ajax函数,而不仅仅是一行。表单提交后,某些行可能会留空。
根据我的代码在多行中填充多个字段的最佳方式是什么?
这是我的表单代码,现在只有一行供用户选择和插入,但我希望有大约10行供用户使用:
<form name="form" method="post" action="placedOrder.php">
<table width="70%" border="5" align="center">
<tr>
<th scope="row">Item Name</th>
<th scope="row">Item SKU</th>
<th scope="row">Quantity</th>
<th scope="row">Side Mark</th>
<th scope="row">Unit Price</th>
<th scope="row">Total Price</th>
</tr>
<tr>
<th scope="row">
<?php
include('connect.php');
$result = mysqli_query("SELECT description FROM products")
or die(mysqli_error());
print '<select name="description" id="description" value="description">';
print '<option value="" disabled selected>Please Select A Product</option>';
while ($info = mysqli_fetch_array($result))
{
$p = $info["description"];
$p = htmlspecialchars($p);
printf('<option value="%s">%s</option>', $p, $p);
}
print '</select>';
?>
</th>
<th scope="row">
<input name="sku_1" id="sku_1" readonly />
</th>
<th scope="row">
<input name="qty_1" />
</th>
<th scope="row">
<input name="note_1" />
</th>
<th scope="row">
<input name="uPrice_1" id="uPrice_1" readonly />
</th>
<th scope="row">
<input name="tPrice_1" id="tPrice_1" readonly />
</th>
</tr>
</table>
<input type="submit"/>
</form>
因为这是我的ajax函数:
<script type="text/javascript" language="javascript">
$(function () {
$('#description').change(function () {
$.ajax({
type: 'POST',
url: 'orderAuto.php',
data: {
description: $('#description').val()
},
dataType: 'json',
success: function (data) //on recieve of reply
{
var skuId = data[0];
var unitPrice = data[1];
$('#sku_1').val(skuId);
$('#uPrice_1').val(unitPrice);
}
});
});
});
</script>
这是我的php代码:
<?php
include('connect.php');
$p = mysqli_real_escape_string($_POST['description']);
$result = mysqli_query("SELECT sku_id, unit_price FROM products WHERE description= '".$p."'");
$array = mysqli_fetch_array($result);
echo json_encode($array);
?>
将AJAX方法声明为接受选择器数组的命名函数:这将允许您重用该函数并添加更多使用它的事件处理程序。
类似于:
function myAJAX(selectorArray) {
$.ajax({
//bunch of stuff
data: { description: $(this).val() },
// more stuff
success: function(data){
var skuId = data[0],
unitPrice = data[1];
selectorArray[0].val(skuId);
selectorArray[1].val(unitPrice);
}
});
}
另一种方法是为事件处理程序使用类选择器,并在其中指定一个目标元素
$('mySelector').on('change', '#targetSelector', myAJAX(selectors));
这里的想法是使用一个父选择器和其中的一个附加选择器
<div id="box">
<p id="text">Here is some text.</p>
<p>This is also some text</p>
</div>
在这个示例HTML中,我们有一个div
作为父级,一些p
作为子级。因此,如果我们想使用我们的事件处理程序(假设我们不需要任何额外的参数),它看起来是这样的:
$('#box').on('change', '#text', myAJAX);
我们选择要异步更改的元素的父元素,并通过AJAX调用过滤到要更改的特定元素。有关更多信息,请参阅关于使用on
方法处理事件的jQuery文档。
相关文章:
- 运行时表单发布;t work-jQuery/AAJX/Post
- 在浏览器检查表单之前运行javascript onsubmit
- 如何在表单提交事件后运行JavaScript*
- 在从HTML表单提交时从javascript运行php
- 单击1个表单中的2个提交按钮中的1个时,如何运行脚本
- 在Fancybox中提交表单时运行函数
- 如何在运行总计计算器时返回表单输入并更新 JavaScript 变量
- 在运行时更改表单标签文本
- 在不重新运行jquery验证的情况下检查表单是否有效
- JavaScript/JQuery表单验证运行两次
- 如何在使用JavaScript submit()函数时运行HTML5表单验证
- JQuery val()在设置表单值时引发运行时错误
- 表单提交仅运行Javascript函数一秒钟
- ASP表单在服务器上运行,不允许内部HTML按钮onlick setInterval工作
- 如果未提交表单,则在卸载之前运行窗口功能
- 表单在页面加载时而不是单击时运行提交脚本
- 我希望只有在HTML5表单输入经过验证后才能运行javascript函数
- Flask wtf.quick_form运行一些 JavaScript 并设置表单变量
- Ajax 单击按钮在后台运行表单
- 如何防止在单击提交时运行表单中的onchange