Submission of form with ajax values?

[elearnindia]

I am trying to create website with PHP,MySQL,Ajax.In my form,the values of sub-category select box are populated according to the value in the category select box by calling ajax function showsubCategory(str),below I am showing some of the code:

 

Ajax code:

<script type="text/javascript">
    var xmlHttp
    function showsubCategory(str)
{
   xmlHttp=GetXmlHttpObject()

  if (xmlHttp==null)
     {
	alert ("HTTP Request is not supported by browser")
	return
    } 
     var url="SubCategory_add.php"
     url=url+"?cat="+str
     url=url+"&rid="+Math.random()
     xmlHttp.onreadystatechange=stateChanged
     xmlHttp.open("GET",url,true)
     xmlHttp.send(null)
   }

  function stateChanged()
   { 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
           document.getElementById("Sub-  Category").innerHTML=xmlHttp.responseText
         } 
   } 

  function GetXmlHttpObject()
    {
var objXMLHttp=null	
if (window.XMLHttpRequest)
 {
	objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {	
	objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")	
 }	
 return objXMLHttp
     }

</script>

 

classifiedform.php code:

<form action="classifiedform_add.php" method="post"> 
     <tr>
         <td style="color:#0099CC;width:250px"><div align="left">Select Category</div>
         </td>
                      
          <td >
	<select name="select" id="select" style="width:150px"   onchange="showsubCategory(this.value);" >
                     <option value="" selected="selected">Select Category</option>
		<?php
		    require_once('config.php');

		    //Connect to mysql server
		   $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
		   if(!$link) 
                             {
			die('Failed to connect to server: ' . mysql_error());
		     }

		   //Select database
		  $db = mysql_select_db(DB_DATABASE);
		  if(!$db) 
                             {
			die("Unable to select database");
		     }


		// Form a query to populate the category combo-box
    			$query = "SELECT * FROM tbl_catagories;";

		// Successful query?
    			if($result = mysql_query($query))  
		  {
			// If there are results returned, create options
      				if($success = mysql_num_rows($result) > 0) 
			  {
			 // For each item in the results...
			while ($row = mysql_fetch_array($result))
			// Add a new option to the combo-box
			echo "<option value=\"$row[category_name]\">$row[category_name]</option>\n";

		          }
		       else
		          {	
                            	    echo "No results found.";
		   }

	       ?>
                        </select>
                      </td>
                    </tr>
	    <tr>
                      <td style="color:#0099CC;width:250px;">
                         <div align="left">
                               Select Sub-Category
                         </div>
                      </td>
                      <td>
                         <div id="Sub-Category">
                         <select name="SubCategoryName" id="SubCategoryName" style="width:150px">
                              <option value="" selected="selected">
                              Select Sub-Category</option>
                        </select>
		</div>
                      </td>
                    </tr>
</form>

 

classifiedform_add.php code:

<?php


//Function to sanitize values received from the form. Prevents SQL injection
function clean($str) 
{
  $str = @trim($str);
								    if(get_magic_quotes_gpc()) 
        {
     $str = stripslashes($str);
}
return mysql_real_escape_string($str);
}
//values received from form
       $category = clean($_POST['Categoryname']);
       $subcategory = clean($_POST['SubCategoryName']);

//MySQL code		 				
       ........................
?>

 

Problem is not with ajax functioning,it is populating

sub-category select box correctly by innerHTML

of Javascript.Problem is when I am submitting form from

classifiedform.php to classifiedform_add.php in

classifiedform_add.php,I am not getting the value of Sub-Category

in classifiedform_add.php to submit into MySQL database.

Ajax stateChanged() function requires some changes to solve this

problem.Kindly suggest.

[radar]

Well first thing that I see, is you are using a GET instead of the needed POST.

 

Here is how I handle my POSTS and changes:

 

function doUpdate(formID, url, query)
{

var myRand = parseInt(Math.random()*99999999);
var query = query;
var url = url;
var srcs = url+"?pg="+query+"&int="+myRand;
var pars = Form.serialize(formID);	

$('TransMsgDisplay').innerHTML='<img src="../templates/admin/img/indicator.gif" align="center">';
var myAjax = new Ajax.Request(
srcs,
{
	method: 'post',
	parameters: pars,
	onComplete: processUpdate
});
}



function processUpdate(originalRequest)
{
 if(originalRequest.responseText == 0) {
	document.location.href="index.php";
 } else {
 $('TransMsgDisplay').innerHTML=originalRequest.responseText;
 }
}