Form - Button

Question

solomon_13000 14 Junior Poster in Training

15 Years Ago

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>

javascript

2 Contributors
7 Replies
121 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

15 Years Ago

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

Airshow 416 WiFi Lounge Lizard

15 Years Ago

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

Reply to this topic

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.

solomon_13000 14 Junior Poster in Training · Answer 1 · 2009-08-11T05:34:44+00:00

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_13000 14 Junior Poster in Training · Answer 2 · 2009-08-11T10:32:21+00:00

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>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-08-11T17:57:33+00:00

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

solomon_13000 14 Junior Poster in Training · Answer 4 · 2009-08-11T23:30:46+00:00

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

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2009-08-11T23:52:12+00:00

Solomon,

Great.

Is that "solved" or just intermediate success?

Airshow