从两个从属下拉列表获取表单数据到PHP

时间:2014-06-20 22:22:18

标签: javascript php jquery mysql

我的页面上有一个表单,其中包含2个从属下拉列表。当用户从第一个列表中选择值时,它会填充第二个列表,然后用户从第二个列表中选择值。

我想将表单数据提交到php页面以插入到mysql中的表中,但是当它提交时,所有数据都从第2个列表传递给EXCEPT值。第一个列表和其他输入字段的值传递正常。 我已经尝试过我所知道的一切,但我无法完成这项工作。任何想法如何实现这个?

这是index2.php的格式(编辑:简化表单元素):

<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>";
}
?>

我从第1个列表获取$ 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就可以了。

2 个答案:

答案 0 :(得分:0)

您可以尝试更换<{p>中的$_GET吗?

$pn_typeID = mysqli_real_escape_string($con, $_GET['pn_cat']);

$_POST

$pn_typeID = mysqli_real_escape_string($con, $_POST['pn_cat']);

编辑:根据提问者的反馈和想法进行解决方案

注意:此编辑基于您的建议,即使我测试了您的原始代码并获得了满意的结果(在我从代码中删除了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>

上述内容可以改善用户体验,具体取决于您希望代码的工作方式。但请注意,这完全是可选的。

答案 1 :(得分:0)

解决了!这只是一个愚蠢的错字,不能相信我已经失去了2天! 在loadpn.php而不是:     $row[part_id] 它应该是:     $row[pn_id] 由于某种原因下降工作,但pn_cat的外观值没有设置。

此外,这也适用于设置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>

它确实有助于用户体验。