PHP Drop down list selected value not inserted in the database

Question

I really can't find a solution anywhere on the web because my problem is a bit unique.

I am made two radio buttons, Division and External. When it is clicked, the Division radio button displays drop down list and the External one displays an input text box.

This is the code I Html made.

<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>

This is the php code.

<?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(); 
}
?>

The external radio button and the input text box is working fine as both of the value successfully inserted in the database. But for the division, it inserts only the value Division.

What is it that I do wrong?

you gave the same name to this ` ` text box too. so please change the name and check again. — prakash tank, Mar 08 '17 at 08:48
just rename the `name="client_details"` and check again what are you getting? — prakash tank, Mar 08 '17 at 08:54
in php file print_r($_POST); die(); then you can check which section problem — Shafiqul Islam, Mar 08 '17 at 08:56
Can you maby layout the code? That will give us a better view. — D. J., Mar 08 '17 at 08:59

score 1 · Accepted Answer · answered Mar 08 '17 at 09:08

Try this :

I have put the condition for type in the start of the code and change the name of the dropdown.

your php code

<?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();                                 
}

?>

Your HTML code

<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>

i think this is good and if you want to change value in client side then also can — Shafiqul Islam, Mar 08 '17 at 09:13
Thanks a lot @prakeshtank and others for helping! It finally works after all this time! :) — MechaMetalHead, Mar 08 '17 at 12:19

Emil · Answer 2 · 2017-03-08T10:45:45.590

Version by prakash tank is correct and maybe even better. I post this solution so you know there is also other way to go around and in notes I explained to you what you did wrong.

 <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:
            <!-- client_details has to be changed to client_detailsDiv as after clicking "submit" data from Division and External were put in to the same variable "client_details" so even if External was empty PHP though that it's suppose to be empty and as long as external
            DO NOT MIX TWO TYPES OF FORM TYPES AS ONE VARIABLE = DON'T GIVE THEM THE SAME name - in other words you can't give same name for SELECT and TEXT and so on.-->
                <select name="client_detailsDiv" 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:
            <!--client_details has to be changed to  client_detailsExt for reason described above-->
            <input type="text" name="client_detailsExt" value=""/> 
            </div>
            <br><br>    
            <input type="submit" name="submit" value="Submit"/>
            </form>     
        </body>

        </html>


        <?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;
        above functions was wrong as I already explained it got $_POST['client_type'] for the External - PHP works the way that it gets variable from the first $_POST['same_name'] and then from second $_POST['same_name'] and then overwrites value of first $_POST['same_name'] and for this reason it displayed only value for External and none for Division as when user set External, Division was empty. So if you would switch form for External as first and put form for Division as second then you wouldn't get variable from External but from Division.
        $client_details = isset($_POST ['client_details']) ? $_POST['client_details'] :null;

        so what we need to do is to to put this code:
        */
        if(!empty($_POST['client_detailsDiv'])) {$client_details = $_POST['client_detailsDiv'] ? $_POST['client_detailsDiv'] :null;}
        else {$client_details = $_POST['client_detailsExt'] ? $_POST['client_detailsExt'] :null;}
        // at fist we make sure that client_detailsDiv is not empty, if it's not than we set client_detailsDiv as $client_details. But if it's empty we use else statement to 

        $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(); 
        }
        ?>

Thanks @emil for the explanation! – MechaMetalHead Mar 09 '17 at 00:12 — MechaMetalHead, Mar 09 '17 at 00:12

PHP Drop down list selected value not inserted in the database

2 Answers2

Linked