javascript - PHP 下拉列表所选值未插入数据库

标签 javascript php html mysqli

我真的无法在网络上的任何地方找到解决方案,因为我的问题有点独特。

我有两个单选按钮:部门和外部。单击该按钮后,“部门”单选按钮将显示下拉列表,“外部”单选按钮将显示一个输入文本框。

这是我制作的 Html 代码。

<html>
<head>
    <title> Submit a Contract </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">



<script type="text/javascript">
function ShowHideDiv() {
    var client1 = document.getElementById("client1");
    var client2 = document.getElementById("client2");
    var division = document.getElementById("division");
    var external = document.getElementById("external");

    division.style.display = client1.checked ? "block" : "none";
    external.style.display = client2.checked ? "block" : "none";
}

function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='<input type="text" name="client_details" value="" />';
 else document.getElementById('div1').innerHTML='';
}
</script>
</head>

<body>
<form method="post" action="" enctype="multipart/form-data">

<label for = "client1">
        <input type="radio" name="client_type" id = "client1" value="Division" onclick="ShowHideDiv()"/> Division
    </label>
    <label for ="client2">
        <input type="radio" name="client_type" id = "client2" value="External" onclick="ShowHideDiv()"/> External
    </label>    
    <br><br>
<div id="division" style="display:none">
    Division:
        <select name="client_details" onchange="showfield(this.options[this.selectedIndex].value)">
        <option value="">Choose Division...</option>
        <option value="Distribution">Distribution</option>
        <option value="Transmission">Transmission</option>
        <option value="Generation">Generation</option>
        <option value="Procument">Procument</option>
        <option value="Other">Others</option>
        </select>   
        <br><br>
        <div id="div1"></div>
    </div>

    &nbsp

    <div id="external" style="display:none">
    External:
    <input type="text" name="client_details" value=""/> 
    </div>
    <br><br>    
    <input type="submit" name="submit" value="Submit"/>
    </form>     
</body>

</html>

这是 php 代码。

<?php
require("config.php");

if(isset($_POST['submit']))
{
$client_type = isset($_POST ['client_type']) ? $_POST['client_type'] :null;
$client_details = isset($_POST ['client_details']) ? $_POST['client_details'] :null;

$sql = "SELECT * FROM contracts";
$query = "INSERT INTO contracts
(
`client_type`,
`client_details`) VALUES (
                                '$client_type',
                                '$client_details')" ;

if ($con->query($query) === TRUE) 
{
echo "<br><br> New record created successfully";

echo $query;


} 
else {
echo "Error: " . $query . "<br>" . $con->error;
}

$con->close(); 
}
?>

外部单选按钮和输入文本框工作正常,因为这两个值都已成功插入数据库。 External 但对于division,它仅插入值Division。 Division

我做错了什么?

最佳答案

试试这个:

我已将类型条件放在代码开头,并更改了下拉列表的名称。

你的 PHP 代码

<?php
require("config.php");
if(isset($_POST['submit']))
{
echo $client_type = isset($_POST ['client_type']) ? $_POST['client_type'] :null;
if($client_type == 'Division'){
$client_details = isset($_POST ['client_details1']) ? $_POST['client_details1'] :null;

}
else{
$client_details = isset($_POST ['client_details']) ? $_POST['client_details'] :null;

}

echo $query = "INSERT INTO contracts
(
`client_type`,
`client_details`) VALUES (
                                '$client_type',
                                '$client_details')" ;
if ($con->query($query) === TRUE) 
{
echo "<br><br> New record created successfully";

echo $query;


} 
else {
echo "Error: " . $query . "<br>" . $con->error;
}

$con->close();                                 
}

?>

您的 HTML 代码

<html>
<head>
    <title> Submit a Contract </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">



<script type="text/javascript">
function ShowHideDiv() {
    var client1 = document.getElementById("client1");
    var client2 = document.getElementById("client2");
    var division = document.getElementById("division");
    var external = document.getElementById("external");

    division.style.display = client1.checked ? "block" : "none";
    external.style.display = client2.checked ? "block" : "none";
}

function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='<input type="text" name="client_details" value="" />';
 else document.getElementById('div1').innerHTML='';
}
</script>
</head>

<body>
<form method="post" action="" enctype="multipart/form-data">

<label for = "client1">
        <input type="radio" name="client_type" id = "client1" value="Division" onclick="ShowHideDiv()"/> Division
    </label>
    <label for ="client2">
        <input type="radio" name="client_type" id = "client2" value="External" onclick="ShowHideDiv()"/> External
    </label>    
    <br><br>
<div id="division" style="display:none">
    Division:
        <select name="client_details1" onchange="showfield(this.options[this.selectedIndex].value)">
        <option value="">Choose Division...</option>
        <option value="Distribution">Distribution</option>
        <option value="Transmission">Transmission</option>
        <option value="Generation">Generation</option>
        <option value="Procument">Procument</option>
        <option value="Other">Others</option>
        </select>   
        <br><br>
        <div id="div1"></div>
    </div>

    &nbsp

    <div id="external" style="display:none">
    External:
    <input type="text" name="client_details" value=""/> 
    </div>
    <br><br>    
    <input type="submit" name="submit" value="Submit"/>
    </form>     
</body>

</html>

关于javascript - PHP 下拉列表所选值未插入数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42666685/

相关文章:

html - 用于生成跨浏览器工作的复选标记 li 的正确 CSS

Javascript 加载图像源 jpg 或 png

javascript - 使数据表列在单击按钮时调整大小

javascript - 表单标签过早关闭

php - 没有错误,但我在数据库中看不到我的数据

javascript - 如何使用 Post 发送数据库将动态添加的表行表单值传递给 Javascript

javascript - 如何更改每个表单组中的按钮

javascript - 多个内联插入到表中

JavaScript 选择

php - 如何给用户添加角色?