0

These are the options in the Select Box. After selecting one of the options, a text box appears.

<select name="category" required id="category" style="width:75%;" onchange = "ShowHideDiv();">
   <option value="" disabled selected hidden>Category</option>
   <option value="Student">Student</option>
   <option value="Teacher">Teacher</option>
   <option value="Scientist">Scientist</option>
   <option value="Lab Manager">Lab Manager</option>
</select>

These are the text boxes that appears depending on selection of the Select Box:

<div id="roll" style="display: none">
    <input name="roll" type="text" id="roll"/>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Roll No</label>
</div>
<div id="teacher" style="display: none">
    <input name="des" type="text" id="teacher"/>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Teacher's Designation</label>
</div>
<div id="scientist" style="display: none">
    <input name="des" type="text" id="scientist"/>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Scientist's Designation</label>
</div>
<div id="manager" style="display: none">
    <input name="des" type="text" id="manager"/>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Lab Manager's Designation</label>
</div>

This is the Script for making the text boxes appear upon selection of an option in the select box:

<script type="text/javascript">
function ShowHideDiv()
{
    var category = document.getElementById("category");
    var roll = document.getElementById("roll");
    var teacher = document.getElementById("teacher");
    var scientist = document.getElementById("scientist");
    var manager = document.getElementById("manager");
    roll.style.display = category.value == "Student" ? "block" : "none";
    teacher.style.display = category.value == "Teacher"? "block" : "none";
    scientist.style.display = category.value == "Scientist" ? "block" : "none";
    manager.style.display = category.value == "Lab Manager"? "block" : "none";
}

Below is the code to save the data in the dabase:

<?php
include "connect.php";
if(isset($_POST["submit"]))
{
    $name=$_POST["name"];
    $gender=$_POST["gender"];
    $category=$_POST["category"];
    $roll=$_POST["roll"];
    $desig=$_POST["des"];
    $college=$_POST["college"];
    $department=$_POST["department"];
    $email=$_POST["email"];
    $phno=$_POST["phno"];
    $dob=$_POST["dob"];
    $lab=$_POST["lab"];

    $sql="insert into usercreation values('$name','$gender','$category','$roll','$desig','$college','$department','$email','$phno','$dob','$lab')";
    if(mysql_query($sql,$link))
    {
        header("location:usercreation.php?ok=1");

    }
    else
    {
        echo mysql_error(); 
    }
}
?>

I am facing the problem with saving the data of the teacher Text box and scientist Text box. The data for roll and manager is saved into the database and all the rest of the fields.

  • Refer to https://stackoverflow.com/questions/8318428/submit-form-fields-inside-displaynone-element. Essentially, most browsers don't send data to the server when the display:none property is set on the object. Also, beware of inline SQL like what you appear to be using - it is vulnerable to SQL injection attacks. – h0r53 Jun 06 '18 at 13:36
  • This is a theory, but since Manager is the last input box and you're only hiding it, is it possible that its blank value is overwriting the values for the other two? (as they all have the same "des" name) – Pablo Barría Urenda Jun 06 '18 at 13:40
  • @PabloBarríaUrenda is actually correct as well. The first two comments are the primary issue with the code. Even still, display:none properties will be excluded from post data by most browsers. – h0r53 Jun 06 '18 at 13:41
  • You are right @PabloBarríaUrenda. It seems that the name 'des' seems to be the problem. Tried editing it and it worked. Thanks a lot mate. Appreciate the help. – Bhardwaj Thengal Jun 06 '18 at 13:44

1 Answers1

0

The problem has been solved. Thanks to @Pablo Barria Urenda & @CaitLAN Jenner.

<div id="roll" style="display: none">
<input name="roll" type="text" id="roll"/>
<span class="highlight"></span>
<span class="bar"></span>
<label>Roll No</label>
</div>
<div id="teacher" style="display: none">
<input name="des1" type="text" id="teacher"/>
<span class="highlight"></span>
<span class="bar"></span>
<label>Teacher's Designation</label>
</div>
<div id="scientist" style="display: none">
<input name="des2" type="text" id="scientist"/>
<span class="highlight"></span>
<span class="bar"></span>
<label>Scientist's Designation</label>
</div>
<div id="manager" style="display: none">
<input name="des3" type="text" id="manager"/>
<span class="highlight"></span>
<span class="bar"></span>
<label>Lab Manager's Designation</label>
</div>

The solution that was suggested by him was to change the name of the text boxes.

Below is the save code (changed)

<?php
include "connect.php";
if(isset($_POST["submit"]))
{
    $name=$_POST["name"];
    $gender=$_POST["gender"];
    $category=$_POST["category"];
    $roll=$_POST["roll"];
    $des1=$_POST["des1"];
    $des2=$_POST["des2"];
    $des3=$_POST["des3"];
    $college=$_POST["college"];
    $department=$_POST["department"];
    $email=$_POST["email"];
    $phno=$_POST["phno"];
    $dob=$_POST["dob"];
    $lab=$_POST["lab"];

    $sql="insert into usercreation values('$name','$gender','$category','$roll','$des1','$des2','$des3','$college','$department','$email','$phno','$dob','$lab')";
    if(mysql_query($sql,$link))
    {
        header("location:usercreation.php?ok=1");

    }
    else
    {
        echo mysql_error(); 
    }
}
?>
  • I'm happy that your issue was resolved. However, you should still consider countermeasures for SQL injection. A special crafted payload could alter your SQL statement before it is interpreted. – h0r53 Jun 06 '18 at 15:47
  • I will add them in the later stages. Thanks for the heads up @CaitLANJenner . – Bhardwaj Thengal Jun 07 '18 at 05:46