Ajax won't post to PHP MYSQL

Question

I have a page that has 2 cascading Select using Ajax. The Ajax correctly populates the second Select, however when I go to post the data to MySQL using PHP i get an error that the field populated by AJAX is "Unidentified." The exact error is

Notice: Undefined index: probcode in ..\input.php on line 21

It does post if the Ajax call is not made and the default select is still there. It only errors after AJAX has replaced the DIV.

I would like to add that it is like the from element disappears from PHP even though AJAX adds it to the form. Is there another PHP function I should use to post AJAX data to MySQL?

I do not know Jquery and am looking for a way to get this to work with just JavaScript at the moment (because of time and my lack of Jquery knowledge), however if there is an easy way to add Jquery to the existing code I would definitely be interested. Also i know the data is not secure going into MySQL at the moment, That will be addressed immediately after this. I am just working on a wire-frame of a specific function at the moment.

First the two selects.

            <tr>
                <td>Problem Type</td>
                <td><?php
                    mysql_connect("localhost", "root", "") or die("Connection Failed");
                    mysql_select_db("test")or die("Connection Failed");
                    $query = "SELECT * FROM wfprobtype ORDER BY probtype ASC";
                    $result = mysql_query($query);
                    ?>
                    <select name="probtype" id="probtype" onchange="changeContent(this.value)">
                    <?php
                    while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
                    ?>
                    <option value="<?php echo $line['ID'];?>" > <?php echo $line['probtype'];?> </option>
                    <?php
                    } 
                    mysql_close()
                    ?>
                    </select>
                </td>
                <td>Problem: </td>
                <td>
                    <div id="val2div">
                        <select name="probcode" id="probcode">
                            <option value="default"></option>
                        </select>
                    </div>
                </td>
            </tr>

This is what the Ajax calls to replace "val2div" val2.php

<?php
$val2=intval($_GET['val2']);
mysql_connect("localhost", "root", "") or die("Connection Failed");
mysql_select_db("test")or die("Connection Failed");
$query = "SELECT * FROM wfprobcode WHERE typeID='$val2' ORDER BY Probcode ASC";
$result = mysql_query($query);
?>
<select name="probcode" id="probcode"  onchange="">
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['Probcode'];?>"> <?php echo $line['Probcode'];?> </option>
<?php
}
mysql_close()
?>

Ajax Script Dny.js

function changeContent(val)
{
if (val=="")
  // if blank, we'll set our innerHTML to be blank.
  {
  document.getElementById("val2div").innerHTML="";
  return;
  }
if (window.XMLHttpRequest) // new browser
  {  
      xmlhttp=new XMLHttpRequest(); // new browser
      alert("newb");
  }
else // Old Browser
  {  
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

  }
  // on state change
  xmlhttp.onreadystatechange=function()
  {
  // if we get a good response from the webpage, display the output
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
      document.getElementById("val2div").innerHTML=xmlhttp.responseText;
  }
  }
 // GET file. 
xmlhttp.open("GET","val2.php?val2="+val, true);
xmlhttp.send();
 alert(val)
}

post to MySQL input.PHP

    <?php
    $con = mysql_connect("localhost","root","");
    if (!$con)
      {
      die('Could not connect: ' . mysql_error());
      }

    mysql_select_db("test", $con);

    $sql="INSERT INTO `test`.`test` (
    `ID`,
    `Dattime`, 
    `probtype`,
    `probcode`
    )
    VALUES(
    NULL,NOW(),'$_POST[probtype]','$_POST[probcode]')";

    if (!mysql_query($sql,$con))
      {
      die('Error: ' . mysql_error());
      }

mysql_close($con); ?> 

I am hoping I am just missing simple something at the moment. This is my first time working with Ajax. I really appreciate any and all help at the moment.

EDIT: - One final edit before I attempt to rewrite the whole thing. Is there a way that using Jquery I could fix this? If not does anyone have a down and dirty way to make it just full postback without the AJAX?

I really appreciate those that have contributed so far an anyone who has any ideas at all.

Thanks in Advance!

-D

Answer 1

After reviewing the code endlessly I have found that the everything works fine when using IE with the code above! The issues are directly with Firefox interpreting the AJAX return.

Answer 2

in val2.php you miss closinge element for select

 </select>

and I guess in input.PHP, it should better be '{$_POST['probtype']}' than '$_POST[probtype]'

$sql="INSERT INTO `test`.`test` (
`ID`,
`Dattime`, 
`probtype`,
`probcode`
)
VALUES(
NULL,NOW(),'{$_POST['probtype']}','{$_POST['probcode']}')";