Member Avatar for laknew

Hi

I'm trying to collect some information from the user regarding a complaint. In my form I have 3 select menus and a text box. I'm populating the 2nd menu depending on the 1st menu's choice.(The data is stored in a mysql database). When the user clicks submit the choice from the 2nd and 3rd select menus as well as the text should get stored in my database. However, I'm having a problem retrieving the value/ choice of the 2nd select menu when inserting the data into my database. This basically appears as a zero(0) in my database. I give below the code from 3 files which are related. Hope someone can help me out!


The file which gets the info from the user

<script type="text/javascript">
//Browser support code
<!--
//Get the HTTP Object

function getDept(str)
{

if(str=="")
	{
	document.getElementById("deptdiv").innerHTML="";
	return;
	}
	
if(window.XMLHttpRequest)
	{
	//code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
	}
	else
		{
		//code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("deptdiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","newcomp.php?group="+str,true);
xmlhttp.send();
}




//-->
</script>
</head>

<body>
      <h3>Report Your Complaint Here</h3>
      <form method="post" name="form1" action="savecomp.php">
      
  
      <table>
      <tr><td>Complaint related to</td><td> <select name="group" onchange="getDept(this.value)">
                <option value="">Please Select</option>
                <option value="1">Academic Department</option>
                <option value="2">Professional Service Department</option></select></td></tr><br />

      
      
      <tr><td>Please Select the Relevant Department</td><td><div id="deptdiv"><select name="dept">
      		<option>Select Department</option></select></div></td></tr><br />
      		
      
      		
      <tr><td>Severity</td><td><select name="severity">
      		<option value="">Please Select</option>
      		<option value="1">Low</option>
      		<option value="2">Medium</option>
      		<option value="3">High</option></select></td></tr>
      		
      </table><br />
    Please type in your complaint below<br />
    <textarea name="complaint" rows="10" cols="50"></textarea><br />
    
    
    <input type="submit" value="Submit"/>
    
   </form>
   
    
    </div>
   </div>
     
  <div id="footer"> Varne Somasundaram <br /></div>
</div>
</body>
</html>

The file that processes the ajax request to populate the 2nd select menu

<?php

$group=$_GET["group"];

$link = mysql_connect('localhost', 'root', '-----');

if(!$link)
	{
		die('Could not connect: ' . mysql_error());
	}

mysql_select_db("complaint_sys", $link);

$sql="SELECT dept_name FROM department WHERE group_id = '".$group."'";

$result = mysql_query($sql);



echo "<table>";
echo "<tr><td>";
echo "<select name=\"dept\" onchange=\"saveDept(this.value)\">";
echo "<option>Please Select</option>";

while($row = mysql_fetch_array($result))
	{
	echo "<option value=" . $row['dept_id'] . ">".$row['dept_name'] . "</option>";
	}
	echo "</select>";
	echo "</td></tr>";
	echo "</table>";
?>

The file that does the inseting of form data into the database

<h3>Thank You</h3>
      <?php

      
      mysql_connect("localhost", "root", "-----") or die ('Error: '.mysql_error());
      mysql_select_db("complaint_sys");
      
    

      $query="INSERT INTO complaint(date, created_by, description, severity_id, assigned_to, dept_id, status_id)VALUES (Now(), '1','$_POST[complaint]' , '$_POST[severity]', '1', '$_POST[dept]', '1')";
      mysql_query($query) or die('Error updating database');

      echo "Database Updated With complaint";

      ?>
    </div>
  </div>
  
</div>
</body>
</html>
  • 3 Contributors
  • 9 Replies
  • 116 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for laknew

Sorry, I think I didn't make my query clear enough.

Basically, in my web page, I have a form for users to submit complaints to the database. So first there is a combo box where users should select the main area the complaint is related to E.g the Academic section or the Professional services. Once they select one of these the 2nd combo box will be populated based on their choice(department names). And the values are taken from the database. I'm using ajax to do this part and have no problem with it. The user needs to make his choice here and write up his complaint and submit the form.

When the user submits my database is getting updated, however, it's not picking up the value the user chose from the 2nd combo box. Instead it is just showing 0 in my phpMyAdmin.

Hope I'm clear here.

Member Avatar for Taywin

How do you add your 2nd combo box into your form? If you do not add it as real select/option tag (modify DOM), it may not pick up the value.

Member Avatar for laknew

I'm doing it by calling a JS function which takes the choice from the 1st combo and makes an AJAX call to another PHP page. That page will retrieve the relevant values from the database and return to the JS function which will then populate the 2nd combo.

My problem is that when my form is submitted the value chosen from the 2nd combo is not being picked up by $POST.

Would you know how I can get this to work?

Member Avatar for Taywin

That page will retrieve the relevant values from the database and return to the JS function which will then populate the 2nd combo.

That's what exactly what I want you to answer :) Does the 2nd select tag already exist in the form or is it created on the fly? Also, when you populate options, do you write it out to innerHTML or do you create real option elements and append to to the select tag?

Edited by Taywin because: n/a
Member Avatar for laknew

Yeah it's created after the user chooses something from the 1st. And yes i'm populating it by writing it out to innerHTML.

Member Avatar for Taywin

That would be a problem if you use innerHTML. It means that your display is correct, but your DOM may not be correct. You need to change the way you populate your options by using document.createElement() to create each option, and then append them to the select element using appendChild(element).

Member Avatar for laknew

Hi, now I realize what exactly is wrong with what I have done, however i've been searching the web for some idea about how to get abt this but wasn't successful. Appreciate if you could direct me towards some examples. Thanks

Member Avatar for Taywin

You just need to create new element each option element and append to your select tag instead where you create your innerHTML.

// to create a tag
// assume that a variable 'myForm' is the form you are going to append
// the select tag inside
var selElement = document.createElement("select")
selElement.name = "whatever"
myForm.appendChild(selElement)

// sample of adding 4 option elements to the select tag
for (var i=0; i<4; i++) {
  // create an option element
  // become -> <option></option>
  var opt = document.createElement("option")

  // assign a value to the option
  // become -> <option value='myValue1'></option>
  opt.value = "myValue"+i

  // create the display of an option
  var txt = document.createTextNode("option show "+i)

  // append the text to option
  // become -> <option value='myValue1'>option show 1</option>
  opt.appendChild(txt)

  // add the option to the select tag
  selElement.appendChild(opt)
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.