我试图制作一个表单,该表单具有两个元素,一个选择项和一个输入价格,选择选项存储在数据库中,因此我检索并显示它。
当单击添加按钮时,用户可以添加具有相同元素的新行,更改选择选项后,我正在使用ajax从数据库获取价格并将其显示在文本输入中。
第一行一切正常,但是当用户添加新行时,我无法获取价格并收到以下消息
“指定的值” NaN“不是有效数字。该值必须匹配 改为以下正则表达式: -?(\ d + | \ d +。\ d + |。\ d +)([eE] [-+]?\ d +)?“
如何解决此问题,或者还有另一种使用行ID更改输入值的方法
<table id="tab_logic">
<tr id='row0'>
<td>1</td>
<td>
<select class="form-control item" name="item[]" required>
<?php
$items = "SELECT itemCode, itemName FROM items";
$itemslist = $conn->query($items);
while($row = $itemslist->fetch_assoc()) {
echo "<option value='" . $row["itemCode"] . "'>" . $row["itemName"]. "</option>" ;
}
?>
</select>
</td>
<td>
<input type="text" name='price[]' class="form-control price" required/>
</td>
</tr>
<tr id='row1'></tr>
</table>
<button id="add_row" class="btn btn-default">Add Row</button>
<script>
function get_price(sel, item)
{
$.ajax({
type: "POST",
url : "getData.php",
data: {itemCode: sel },
success: function(data) {
$(item).find("input").val(data.price)
},
});
}
$(document).ready(function(){
//add new row when add buttomn clicked
var i = 1;
$("#add_row").click(function(){
var a = i-1;
$('#row' + i).html( $('#row' + a).html() )
.find('td:first-child')
.html(i+1);
$('#tab_logic').append('<tr id="row' + (i+1) + '"></tr>');
i++;
});
//when selected item change get parent and call function
$('#tab_logic select').on('change', function() {
var item = $(this).parent().parent();
get_price(this.value, item);
});
});
</script>
答案 0 :(得分:0)
我终于解决了它,问题是get_price在第一次更改时只被调用了一次,所以我通过调用onclick函数使用这种方式解决了它
<select class="form-control item" name="item[]" onclick="get_price(this.value,$(this).parent().parent());" id='1' required>