Javascript working but erratic and messy... :/

[smithster]

I have 3 forms all with a hidden input used to choose between 3 different actions.

Here's my javascript code...

if (document.myForm.action.value == 'add_category')
	{
	var url="add_cat.php?cat_name="+ cat_name;
	}
if (document.myForm.action.value == 'rename_category')
	{
	var url="rename_cat.php?cat_id="+ cat_id + "&cat_name="+ cat_name;
	}
if (document.myForm.action.value == 'remove_category')
	{
	var url="delete_cat.php?cat_id="+ cat_id;
	}

No error comes on screen so I don't know what the problem is. Wondering if someone can help please?!?

Thanks in advance

Smithster

** edit **

turns out it's because the forms have the same name which is causing the script to fail. So how can I get around that?

[smithster]

I have sort of got it working....... The javascript seems to be very erratic though. Sometimes it just won't bother executing it's commands!! For example, I've asked it to reload the page after it has completed it's job. And also to output the result so I can see what's happening. Sometimes, even though it does the database part, it doesn't bother to let me know or to reload the page!

Also, sometimes, it will let me know it's done it's job, and then it will reload the page, but then I will find it hasn't actually done anything in the database! I can't understand why a script can appear to have a mind of its own!!

The other thing I'm bothered about is the messy look of my script. Because I have 3 forms, one to add a category, one to remove a category, and one to rename a category, I have had to duplicate the javascript function 3 times, giving each one a unique name to be called by the relevant form.

Here's the full script, hoping someone can tell me if I have done anything wrong....also maybe help me to tidy it up a bit!

<script type="text/javascript">
function remove_category()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      //document.myForm.cat_id.value=xmlHttp.responseText;
	  alert(xmlHttp.responseText);
      }
    }
    
	var param = document.remove.cat_id.value;
  	var url="delete_cat2.php?cat_id="+ param;

		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
		alert(xmlHttp.responseText);
		window.location.reload();

  }
function add_category()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      //document.add.response.value=xmlHttp.responseText;
	  alert(xmlHttp.responseText);
      }
    }
    
	var param = document.add.cat_name.value;
  	var url="functions.php?action=add_category&cat_name="+ param;

		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
		alert(xmlHttp.responseText);
		window.location.reload();

  }
function rename_category()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      //document.add.response.value=xmlHttp.responseText;
	  alert(xmlHttp.responseText);
      }
    }
    
	var cat_name = document.rename.cat_name.value;
	var cat_id = document.rename.cat_id.value;
  	var url="functions.php?action=rename_category&cat_id="+ cat_id + "&cat_name="+ cat_name;

		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
		alert(xmlHttp.responseText);
		alert(url);
		window.location.reload();

  }
</script>

<?php

include('../dbconfig.php');

$add_cat = 'Add Category...<form name="add">
<input type="text" name="cat_name" />
<input type="submit" onclick="add_category();" value="Add Category" /><br />
</form>';

$rename_cat = 'Rename Category...<form name="rename">
<input type="hidden" name="cat_id" value="25" />
<input type="text" name="cat_name" />
<input type="submit" onclick="rename_category();" value="Rename Category" /><br />
</form>';

$result = mysql_query("SELECT * FROM category") or die (mysql_error());
if (mysql_num_rows($result))
	{
	$cats_present = 'yes';
	}
if ($cats_present == 'yes')
	{
	while ($row = mysql_fetch_array($result))
		{
		echo $row['cat_name'].'<br />';
		}
	$result2 = mysql_query("SELECT * FROM category") or die (mysql_error());
	echo '<form name="remove">
	<select name="cat_id">';
	while ($row2 = mysql_fetch_array($result2))
		{
		echo '<option value="'.$row2['cat_id'].'">'.$row2['cat_name'].'</option>';
		}

	echo '</select>
	<input type="submit" onclick="remove_category();" value="Delete Category" /><br />
	</form>';
	echo $rename_cat;
	echo $add_cat;
	}
else
	{
	echo $add_cat;
	}
?>

Thanks in advance

Smithster