从两个依赖的下拉列表中获取表单数据到php
Getting form data from both dependent drop down lists to php
我的页面上有一个表单,其中包括2个依赖的下拉列表。当用户从第一个列表中选择值时,它将填充第二个列表,然后用户从第二个列表中选择值。
我想提交表单数据到php页面插入到表在mysql中,但当它提交,所有的数据是通过除了值从第二列表。第一个列表和其他输入字段的值传递OK。我已经试过了所有我知道的方法,但还是不行。有什么想法如何实现这一点吗?
这是来自index2.php的表单(编辑:简化了form元素):
<form name="part_add" method="post" action="../includes/insertpart.php" id="part_add">
<label for="parts">Choose part</label>
<select name="part_cat" id="part_cat">
<?php while($row = mysqli_fetch_array($query_parts)):?>
<option value="<?php echo $row['part_id'];?>">
<?php echo $row['part_name'];?>
</option>
<?php endwhile;?>
</select>
<br/>
<label>P/N</label>
<select name="pn_cat" id="pn_cat"></select>
<br/>
<input type="text" id="manufactured" name="manufactured" value="" placeholder="Manufactured" />
<input id="submit_data" type="submit" name="submit_data" value="Submit" />
</form>
javascript:
$(document).ready(function() {
$("#part_cat").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading part number" /></div>');
$.get('../includes/loadpn.php?part_cat=' + $(this).val(), function(data) {
$("#pn_cat").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
这是php加载第二个列表:
<?php
include('db_connect.php');
// connects to db
$con=mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);
$part_cat = $_GET['part_cat'];
$query = mysqli_query($con, "SELECT * FROM pn WHERE pn_categoryID = {$part_cat}");
while($row = mysqli_fetch_array($query)) {
echo "<option value='$row[part_id]'>$row[pn_name]</option>";
}
?>
我得到$part_cat从第一个列表insertpart.php,但$pn_cat.
编辑:这是insertpart.php(简化,它只是回显结果)
<?php
//Start session
session_start();
//Include database connection details
require_once('../includes/db_details.php');
//DB connect
$con=mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// escape variables for security
// find part name based on ID
$part_typeID = mysqli_real_escape_string($con, $_POST['part_cat']);
$part_name_result = mysqli_query($con, "SELECT part_name FROM parts WHERE part_id = $part_typeID");
$part_row = mysqli_fetch_array($part_name_result, MYSQL_NUM);
$part_type = $part_row[0];
echo"part_type='$part_type'";
//find pn value based on id
$pn_typeID = mysqli_real_escape_string($con, $_GET['pn_cat']);
$pn_name_result = mysqli_query($con, "SELECT pn_name FROM pn WHERE pn_id = $pn_typeID");
$pn_row = mysqli_fetch_array($pn_name_result, MYSQL_NUM);
$pn = $pn_row[0];
echo"pn='$pn'";
mysqli_close($con);
?>
它仍在进行中,所以代码是丑陋的,我知道我混合POST和GET正在纠正。如果我在此页上返回$pn_cat,则没有输出,$part_type是OK的。
你能试着在
中替换$_GET
吗?$pn_typeID = mysqli_real_escape_string($con, $_GET['pn_cat']);
与$_POST
?
$pn_typeID = mysqli_real_escape_string($con, $_POST['pn_cat']);
EDIT:基于提问者的反馈和解决方法的想法
注意:这个编辑是基于你的建议,即使我测试了你的原始代码并收到了满意的结果(在我从代码中删除PHP和MySQL并用合适的替代方案替换它们之后)。
解决方法
下面是隐藏字段的HTML:
<input type="hidden" id="test" name="test" value="" placeholder="test" />
下面是一个简单的Javascript函数:
function setHiddenTextFieldValue(initiator, target){
$(initiator).change(function() {
$(target).val($(this).val());
});
}
您可以在原始代码的function(data) {
中调用上述函数,例如:
setHiddenTextFieldValue('#pn_cat', '#test'); // note the hashes (#)
我还建议您在<option>
循环开始之前,将以下HTML硬编码到HTML和PHP文件中:
<option value="" disabled selected="selected">Select</option>
上面这行可以改善用户体验,这取决于你希望你的代码如何工作。但是请注意,这是完全可选的。
解决了!这只是一个愚蠢的打字错误,真不敢相信我为此浪费了两天时间!在loadpn.php中,而不是:$row[part_id]
它应该是:$row[pn_id]
由于某些原因,下拉菜单工作了,但是没有设置pn_cat的offcourse值。
这也适用于设置2个字段值(现在我不需要,但如果有人想知道):
$(document).ready(function() { $("#part_cat").change(function() { $('#pn_hidden').val($(this).val()); }); $("#pn_cat").change(function() { $('#pn_hidden2').val($(this).val()); }); });
也把js改成post:
$(document).ready(function() { $("#part_cat").change(function() { $.post('../includes/loadpn.php', 'part_cat=' + $(this).val(), function(data) { $("#pn_cat").html(data); }); }); });
谢谢:
<option value="" disabled selected="selected">Select</option>
- 如何从pdftron webviewer获取表单数据
- 在不同的文件中使用Javascript获取表单数据
- 试图获取表单时出现Jquery错误
- (extjs)获取表单中单选按钮的选定值.不返回该值
- jQuery发布并获取表单数据
- 可以't使用jquery获取表单中select字段的值
- 使用JavaScript或Prototype获取表单中的所有控件并启用它们
- 单击表单的“提交”按钮时,获取表单中的所有INPUT和ACTION标记
- 如何从Angular Payments获取表单数据
- 无法获取表单's面板的x和y坐标,并在加载时从cookie中设置它们
- 有没有一种方法可以在jQuery.serialize()之前获取表单数据,或者与jQuery.sserialize(()
- 通过单击提交按钮获取表单名称
- 使用 Ajax 获取表单数据
- 铬扩展 :如何获取表单并填写并提交
- 如何从 django 模板语言获取表单数据
- 根据选择选项元素将表单重定向到不同的URL,并在电子邮件中获取表单详细信息
- 通过javascript提示获取表单的信息
- 从包含ng的字段中获取表单数据,而无需使用ng模型
- 使用Javascript获取表单值
- 获取表单帖子外部的单选按钮值