I have been trying to get this form to work but it just dont seem to work. The buttons does nothing but keeps pointing to the same form. This is for the mozilla browser. Did I miss something?

<html>
<head>
<title>Admin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../_assets/skin/cms.css" rel="stylesheet" type="text/css" />

</head>

<SCRIPT language="JavaScript">
function OnSubmitForm()
{
if(document.pressed == 'add')
{
document.searchTreatment.action ="/addTreatment.jsp"
}
else if(document.pressed == 'search')
{
document.searchTreatment.action ="/listTreatment.jsp"
}

return true;
}
}
</SCRIPT>


<body>
<jsp:include page="../_includes/header.jsp" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="345">
<table width="300" height="540" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="163"><img src="../_assets/images/client_images/admin.jpg" width="225" height="225" /></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
<td width="935" colspan="1" valign="top"><br />

<table border="0" cellspacing="0" cellpadding="0" width="682">
<tr>
<td width="682" class="pageName">Admin</td>
</tr>

<tr>
<td class="bodyText">

<form method="GET" name="searchTreatment" id="searchTreatment" onSubmit="return OnSubmitForm();">
<table width="395" height="142" border="0">
<tr>

<td height="20" class="tableHeader"> 
<div align="left">Search Treatment</div></td>
</tr>
<tr>
<td width="388" height="72"> 
<table width="374" border="0">
<tr> 
<td width="192">Treatment Id</td>
<td width="293"><label> 
<input type="text" name="masterTreatmentId" id="masterTreatmentId" class="textField" />
</label></td>
</tr>
<tr> 
<td>Treatment Name</td>
<td><label> 
<input type="text" name="treatmentName" id="treatmentName" class="textField" />
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><label> 
<input type="submit" name="searchTreatment" id="searchTreatment" value="Search Treatment" onClick="document.pressed='search'" />
<input type="reset" name="Reset" value="Reset" />
<input type="submit" name="addTreatment" id="addTreatment" value="Add Treatment" onClick="document.pressed='add'" />
</label></td>
</tr>
</table>
</form>

Solomon,

I think the problem is that the javascript is crashing before it's done anything. There's a double } at the end of the function where there should be just one.

That should fix it, but of you're interested in a technique that avoids setting a global, then try this

Replace function OnSubmitForm() with :

onload = function(){
	var f = document.forms["f1"];
	var submit1 = document.getElementById("searchTreatment");
	var submit2 = document.getElementById("addTreatment");
	if(submit1) {
		submit1.onclick = function(){
			f.action = "/listTreatment.jsp";
			return true;
		}
	}
	if(submit2) {
		submit2.onclick = function(){
			f.action = "/addTreatment.jsp";
			return true;
		}
	}
}

Then :

  • Change the form tag's attributes to id="f1" name="f1" (id and name are currently the same as one of the submit buttons).
  • Delete the onsubmit handler from the form tag.
  • Delete the onclick handlers from the two submit button tags.

This would be a more up to date way of achieving the same end.

Airshow

I tried but still it does not work on mozilla.

<html>
    <head>
        <title>Admin</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="../_assets/skin/cms.css" rel="stylesheet" type="text/css" />

    </head>
    
    <SCRIPT language="JavaScript">
    onload = function(){
	var f = document.forms["f1"];
	var submit1 = document.getElementById("searchTreatment1");
	var submit2 = document.getElementById("addTreatment1");
	if(submit1) {
		submit1.onclick = function(){
			f.action = "/listTreatment.jsp";
			return true;
		}
	}
	if(submit2) {
		submit2.onclick = function(){
			f.action = "/addTreatment.jsp";
			return true;
		}
	}
    }

    </SCRIPT>


    <body>
        <jsp:include page="../_includes/header.jsp" />
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="345">
                    <table width="300" height="540" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="163"><img src="../_assets/images/client_images/admin.jpg" width="225" height="225" /></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                </table></td>
                <td width="935" colspan="1" valign="top"><br />

	<table border="0" cellspacing="0" cellpadding="0" width="682">
        <tr>
          <td width="682" class="pageName">Admin</td>
		</tr>

		<tr>
          <td class="bodyText">
		  
		  	<form method="GET" name="f1" id="f1">
              <table width="395" height="142" border="0">
                <tr>
    	
                  <td height="20" class="tableHeader"> 
                    <div align="left">Search Treatment</div></td>
    </tr>
    <tr>
                  <td width="388" height="72"> 
                    <table width="374" border="0">
          <tr> 
            <td width="192">Treatment Id</td>
            <td width="293"><label> 
              <input type="text" name="masterTreatmentId" id="masterTreatmentId" class="textField" />
              </label></td>
          </tr>
          <tr> 
            <td>Treatment Name</td>
            <td><label> 
              <input type="text" name="treatmentName" id="treatmentName" class="textField" />
              </label></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td align="center"><label> 
        <input type="submit" name="searchTreatment1" id="searchTreatment1" value="Search Treatment" />
        <input type="reset" name="Reset" value="Reset" />
        <input type="submit" name="addTreatment1" id="addTreatment1" value="Add Treatment" />
        </label></td>
    </tr>
  </table>
  </form>

Solomon,

It's a strange one. FF appears not to like the submit buttons to be in a <label> element.

You can safely delete all your <label>...</label> tags as they are meant to go round fields' labels not fields/buttons.

It should work in FF with just that simple mod.

Airshow

Still it does not work.

<html>
    <head>
        <title>Admin</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="../_assets/skin/cms.css" rel="stylesheet" type="text/css" />

    </head>
    
    <SCRIPT language="JavaScript">
    onload = function(){
	var f = document.forms["f1"];
	var submit1 = document.getElementById("searchTreatment1");
	var submit2 = document.getElementById("addTreatment1");
	if(submit1) {
		submit1.onclick = function(){
			alert("a");
            f.action = "listTreatment.jsp";
			return true;
		}
	}
	if(submit2) {
		submit2.onclick = function(){
			alert("b");
            f.action = "addTreatment.jsp";
			return true;
		}
	}
    }

    </SCRIPT>


    <body>
        <jsp:include page="../_includes/header.jsp" />
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="345">
                    <table width="300" height="540" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="163"><img src="../_assets/images/client_images/admin.jpg" width="225" height="225" /></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                </table></td>
                <td width="935" colspan="1" valign="top"><br />

	<table border="0" cellspacing="0" cellpadding="0" width="682">
        <tr>
          <td width="682" class="pageName">Admin</td>
		</tr>

		<tr>
          <td class="bodyText">
		  
		  	<form method="GET" name="f1" id="f1">
              <table width="395" height="142" border="0">
                <tr>
    	
                  <td height="20" class="tableHeader"> 
                    <div align="left">Search Treatment</div></td>
    </tr>
    <tr>
                  <td width="388" height="72"> 
                    <table width="374" border="0">
          <tr> 
            <td width="192">Treatment Id</td>
            <td width="293"><label> 
              <input type="text" name="masterTreatmentId" id="masterTreatmentId" class="textField" />
              </label></td>
          </tr>
          <tr> 
            <td>Treatment Name</td>
            <td><label> 
              <input type="text" name="treatmentName" id="treatmentName" class="textField" />
              </label></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td align="center"> 
        <input type="submit" name="searchTreatment1" id="searchTreatment1" value="Search Treatment" />
        <input type="reset" name="Reset" value="Reset" />
        <input type="submit" name="addTreatment1" id="addTreatment1" value="Add Treatment" />
        </td>
    </tr>
  </table>
  </form>

Solomon,

That's odd. It works here in FF 3.0.13.

I tested by replacing your relative urls with publicly served full http://......... and everything is hunky-dorey.

The only other change I made to your html posted above was to add missing <!doctype .. > and closing </body></html> tags.

There are also two sets of missing </td></tr></table> but they don't affect FF's ability to display the page or to respond to the form submission.

You could try adding action="" to the form tag, but I can't see it should matter. If it has no effect, try action="valid url" and suppress the dynamic action setting, to see if simple vanilla-flavoured form submission works.

Airshow

Now it works. I removed the label tag. Also I parsed the .jsp file as a parameter to javascript for routing purpose :)

Solomon,

Great.

Is that "solved" or just intermediate success?

Airshow

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.