[英]Input text value based on select option value loaded dynamically from sql db
我有一个具有选择字段的表单,该字段从db结果查询动态加载选项。 代码如下所示。 看到之后输入的描述文字吗? 我需要代码返回在productID下选择的商品的描述。 我该怎么办? 非常感谢您的所有答复。
<div class="row-fluid">
<div class="span3">
<label>SKU</label>
<?php echo '<select name="ITEM" id="user" class="textfield1">';
while($res= mysql_fetch_assoc($sql))
{
echo '<option value="'.$res['productID'].'">';
echo $res['SKU'] ;
echo'</option>';
}
echo'</select>';
?>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label>Description</label>
<input type="text" name="description" value=""/>
</div>
</div>
您可以通过以下两种方式执行此操作:
第一种方法是重定向具有$_GET
参数的页面,该参数将包含产品ID:
<div class="row-fluid">
<div class="span3">
<label>SKU</label>
<?php echo '<select name="ITEM" id="user" class="textfield1"
onchange="document.location=\'my-page.php?pid=\' + this.value">';
while($res= mysql_fetch_assoc($sql))
{
echo '<option value="'.$res['productID'].'"';
// LATER EDIT
if(isset($_GET['pid']) && $_GET['pid'] == $res['productID'])
echo 'selected="selected"';
// END LATER EDIT
echo '>';
echo $res['SKU'] ;
echo'</option>';
}
echo'</select>';
?>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label>Description</label>
<?php
if(isset($_GET['pid']) && is_numeric($_GET['pid'])) {
$sql = mysql_query("SELECT description
FROM products
WHERE product_id='" . mysql_real_escape_string($_GET['pid']) . "'");
$row = mysql_fetch_assoc($sql);
}
?>
<input type="text" name="description" value="<?=$row['description']?>"/>
</div>
</div>
第二种方法是进行ajax调用并动态填充描述输入,而无需刷新页面
// this is the JS code
$(document).ready(function(){
$('#user').change(function(){
$.POST("my-ajax-call-page.php",
{pid: $("#user").val()},
function(data){
$('input[name="description"]').val(data.description);
}, "json");
});
});
并且您的my-ajax-call-page.php
应该是这样的:
<?php
include("mysql-connection.php");
$sql = mysql_query("SELECT description
FROM products
WHERE product_id='" . mysql_real_escape_string($_POST['pid']) . "'");
$row = mysql_fetch_assoc($sql);
echo json_encode("description" => $row['description']);
?>
您会在jQuery库网站上找到许多使用jQuery库的示例和文档。
<div class="row-fluid">
<div class="span3">
<label>SKU</label>
<?php echo '<select name="ITEM" id="user" class="textfield1" onchange="showDesc()">';
$desHTML = "";
echo "<option value='0'>Please select</option>"
while($res= mysql_fetch_assoc($sql))
{
echo '<option value="'.$res['productID'].'">';
echo $res["SKU"] ;
echo'</option>';
$desHTML .="<div class'descBox' id='".$res['productID']."' style='display:none'>".$res['description']."</div>";
}
echo'</select>';
?>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label>Description</label>
<?php echo $desHTML; ?>
</div>
</div>
现在创建一个js函数并调用选择框的onchange。 Js函数提示:
$(“。descBox”)。hide(); $(“#” + selectedItemValue).show();
让我知道您是否需要任何有关JS函数的帮助。
您尚未向我们显示您的SQL查询,但我假设您有一个名为description的列,并且您也在查询中选择了该列。
因此,您可以使用jQuery插入要输入的所选项目的描述
<div class="row-fluid">
<div class="span3">
<label>SKU</label>
<?php echo '<select name="ITEM" id="user" class="textfield1">';
$js_array = array(); // This variable will contain your Javascript array with descriptions
while($res= mysql_fetch_assoc($sql))
{
echo '<option value="'.$res['productID'].'">';
echo $res['SKU'] ;
echo'</option>';
// Fill your array with descriptions; ID of item will be the index of array
$js_array[$res['productID']] = $res['description'];
}
echo'</select>';
?>
<script>
var description;
<?php
foreach($js_array as $description => $id)
{
echo("description['".$id."'] = '".$description."';\n");
}
?>
$(document).ready(function(){
$('#user').change(function(){
$("#description").val(description[$('#user').val()]);
})
});
</script>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label>Description</label>
<input type="text" name="description" id="description" value=""/>
</div>
</div>
确保不要忘记将id
属性添加到您的input type="text"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.