Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

OnChange help... 1

Status
Not open for further replies.
Tasuki

Tasuki

MIS
Jul 26, 2002
169
0
0
US
Hi, I searched and found the usage of onchange, but it doesn't seem to work for me.

I place this in my select control:

<select name='LocationID' onchange='this.form.submit()' >

But in IE, I get "Error on Page." and in FireFox (Javascript Console), I get "this.form.submit is not a function". Is there something that I am doing wrong with this? All I want to do is to submit the values of the form when they select a value in the Select box.

Thanks,

-T
 
Sort by date Sort by votes
Here's the form code:

Code: 
echo "
	<div id='Content'>
		<h1>Marine Debris Net Analysis DB - Query Records</h1>
		<p>You may query from the records.  Select from the links the right to view, update or delete any of the existing records in the database.</p><br />
		
		<p><form action='$_SERVER[PHP_SELF]' name='form' method='post'>
		<b><u>QUERY BETWEEN DATE</u></b><br /><br />
		<table><tr>
		<td>FROM: </td><td><select name='frmonth' >$slctbx4</select><select name='fryear' >$slctbx3</select></td>
		<td>TO: </td><td><select name ='tomonth'>$slctbx2</select><select name='toyear' >$slctbx</select></td>
		</tr></table><br />
		<b><u>QUERY BY OTHER VALUES</u></b><br /><br />
		<table><tr>
		<td><center><b>LOCATION</b></center></td><td><center><b>FOUND</b>
</center></td><td><center><b>CONSTRUCTION</b></center></td><td><center>
<b>COLOR</b></center></td><td><center><b>NET TYPE</b></center></td><td><center><b>TRIM COLOR</b></center></td>
		</tr><tr>
		<td><select name='LocationID' onchange='this.form.submit()' ><OPTION value='>$location_dd</select></td>
		<td><select name='FoundID' ><OPTION value='>$found_dd</select></td>
		<td><select name='ConstructionID' ><OPTION value='>$construction_dd</td>
		<td><select name='ColorID' ><OPTION value='>$color_dd</td>
		<td><select name='NetTypeID'  ><OPTION value='>$nettype_dd</select></td>
		<td><select name='TrimColorID'  ><OPTION value='>$trimcolor_dd</td>
		</tr></table><br />
		
		
		<input name='submit' type='submit' value='Submit Query' class='buttons' />
		</form><br /><br />";
		echo "<h1>Results from Query:</h1>";
		echo $mysqldb->getResultAsTable($actions);
		echo "</p>
	</div>";

Further, here is the error from IE: "Object doesn't support this property or method".

Still do not understand why it does not work. Will keep trying.

Thanks for looking.

-T
 
Upvote 0 Downvote
Tasuki, you used the name "form" for your form. It is bad practice to name your html elements the same name as the element because it causes problems like you are seeing now. Try naming it something like "myForm". If that doesn't solve the this.form problem, then further change this.form to document.forms["myForm"]

-kaht

Do the chickens have large talons?
 
Upvote 0 Downvote
Thanks kaht. It was originally named something else, but I changed it to something else before posting, and in this case "form"... it was previously "login" which I had copy/pasted from my login form and was too lazy to change it. :-D

My query page works great clicking submit, just really want to automate it so that when they select something, it will resubmit and update every field according to the new selection. And why the javascript does not work... is driving me crazy at this point.

Anyway, I tried using this.form, document.login, and document.form['login'] and yielded the same errors. Again thanks for looking.

-T
 
Upvote 0 Downvote
Pull up the page, right click on the body of the page and select view source. Paste that code here.

-kaht

Do the chickens have large talons?
 
Upvote 0 Downvote
It's going to be long...

Code: 
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' '[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>[/URL]

<html xmlns='[URL unfurl="true"]http://www.w3.org/1999/xhtml'>[/URL]

<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1' />
<title>Marine Debris Net Analysis Database</title>
<style type='text/css' media='all'>@import 'style/layout.css';</style>
</head>

<body>
	<div id='Header'>
		<img src='img/web/marine.jpg' style='margin-top: -78px; margin-left: -10px; position:absolute;'>

		<img src='img/web/cut.jpg' style='margin-top: -17px; margin-left: -20px; position:absolute;'>
		<img src='img/web/pull.jpg' style='margin-top: -17px; margin-left: 130px; position: absolute;'>
		<img src='img/web/debris.jpg' style='margin-top: -17px; margin-left: 280px; position: absolute;'>
		<img src='img/web/shark.jpg' style='margin-top: -17px; margin-left: 430px; position: absolute;'>
		<img src='img/web/noaa2.jpg' style='margin-top:325px; margin-left: 0px; position:absolute;'>
		<a href='main.php' title='Marine Debris DB Home' style='position: absolute; margin-left: 600px'>BACK TO MAIN</a>
	</div>
	<div id='Menu'>

		<a>USER MENU</a><br />
		<div class='buttonscontainer'><div class='buttons'>
	      	<a href='dataadd.php'>Add New Record</a>
	      	<a href='dataquery.php'>Query Records</a>
	      	<a href='queryall.php'>See All Records</a>
	    	</div></div><br />
		<a>ADMIN MENU</a><br />

		<div class='buttonscontainer'><div class='buttons'>
	      	<a href='useradd.php'>Add New User</a>
	      	<a href='userlist.php'>See All Users</a>
	      	</div></div><br />
		<a>LOGOUT MENU</a><br />
		<div class='buttonscontainer'><div class='buttons'>
	      	<a href='logout.php'>Log Out</a>

	      	</div></div>
	</div>
	<div id='Content'>
		<h1>Marine Debris Net Analysis DB - Query Records</h1>
		<p>You may query from the records.  Select from the links the right to view, update or delete any of the existing records in the database.</p><br />
		
		<p><form action='/marine/dataquery.php' name='login' method='post' id='login'>
		<b><u>QUERY BETWEEN DATE</u></b><br /><br />

		<table><tr>
		<td>FROM: </td><td><select name='frmonth' ><option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>

<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name='fryear' ><option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>

<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select></td>
		<td>TO: </td><td><select name ='tomonth'><option value="1">01</option>
<option value="2">02</option>
<option value="3" SELECTED>03</option>

<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>

</select><select name='toyear' ><option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005" SELECTED>2005</option>
</select></td>

		</tr></table><br />
		<b><u>QUERY BY OTHER VALUES</u></b><br /><br />
		<table><tr>
		<td><center><b>LOCATION</b></center></td><td><center><b>FOUND</b></center></td><td><center><b>CONSTRUCTION</b></center></td><td><center><b>COLOR</b></center></td><td><center><b>NET TYPE</b></center></td><td><center><b>TRIM COLOR</b></center></td>
		</tr><tr>

		<td><select name='LocationID' id='select' onchange='document.forms['login'].submit();' ><OPTION value=''><option value='1'>Kure Atoll</option>
<option value='2'>Midway Atoll</option>
<option value='3'>Pearl & Hermes Atoll</option>
<option value='4'>Lisanki Island</option>
</select></td>
		<td><select name='FoundID' ><OPTION value=''><option value="1">Reef</option>
<option value="2">Beach</option>
<option value="3">HerZ</option>

</select></td>
		<td><select name='ConstructionID' ><OPTION value=''><option value="0"></option>
<option value="1">Twisted/Knotted</option>
<option value="2">Braided/Knotted</option>
<option value="4">Braided/Knottless</option>
</td>
		<td><select name='ColorID' ><OPTION value=''><option value="0"></option>
<option value="1">Green</option>
<option value="2">Black</option>
<option value="4">Orange</option>

<option value="5">Yellow</option>
</td>
		<td><select name='NetTypeID'  ><OPTION value=''><option value="0"></option>
<option value="1">Cargo Net</option>
<option value="2">Trawl/Seine</option>
<option value="3">Multifilament Gillnet</option>
<option value="5">Longline</option>
</select></td>
		<td><select name='TrimColorID'  ><OPTION value=''><option value="0">No Trim Color</option>

<option value="2">Black</option>
<option value="3">Blue</option>
<option value="4">Orange</option>
<option value="7">White</option>
</td>
		</tr></table><br />
		
		
		<input name='submit' type='submit' value='Submit Query' class='buttons' />
		</form><br /><br /><h1>Results from Query:</h1><table cellpadding='5%' border='0'>
<tr bgcolor='#003366'>

<th>
				<a href="/marine/dataquery.php?sort=Samp">Samp</a>
				</th><th>
				<a href="/marine/dataquery.php?sort=Sub">Sub</a>
				</th><th>
				<a href="/marine/dataquery.php?sort=Date">Date</a>
				</th><th>
				<a href="/marine/dataquery.php?sort=Location">Location</a>

				</th><th>
				<a href="/marine/dataquery.php?sort=Found">Found</a>
				</th><th>
				<a href="/marine/dataquery.php?sort=ConstrDesc">ConstrDesc</a>
				</th><th>
				<a href="/marine/dataquery.php?sort=ColorDesc">ColorDesc</a>
				</th><th>

				<a href="/marine/dataquery.php?sort=NetTypeDesc">NetTypeDesc</a>
				</th><th>
				<a href="/marine/dataquery.php?sort=TrimColorDesc">TrimColorDesc</a>
				</th><th><font size=2px color='white'>Actions</font></th></tr>
<tr bgcolor=#cccccc>
<td><font size=2px>24.6</font></td>
<td><font size=2px>A</font></td>
<td><font size=2px>1999-11-30</font></td>

<td><font size=2px>Kure Atoll</font></td>
<td><font size=2px>Reef</font></td>
<td><font size=2px>Twisted/Knotted</font></td>
<td><font size=2px>Green</font></td>
<td><font size=2px>Cargo Net</font></td>
<td><font size=2px>Orange</font></td>
<td nowrap>&nbsp;<a href="dataview.php?NetDescID=7">View </a> |
	    <a href="dataupdate.php?NetDescID=7">Update </a> |
	    <a href="datadelete.php?NetDescID=7">Delete </a></td>

</tr>
<tr bgcolor=#AAAAAA>
<td><font size=2px>24.6</font></td>
<td><font size=2px>B</font></td>
<td><font size=2px>1999-11-30</font></td>
<td><font size=2px>Kure Atoll</font></td>
<td><font size=2px>Reef</font></td>
<td><font size=2px>Twisted/Knotted</font></td>
<td><font size=2px>Black</font></td>
<td><font size=2px>Cargo Net</font></td>

<td><font size=2px>White</font></td>
<td nowrap>&nbsp;<a href="dataview.php?NetDescID=8">View </a> |
	    <a href="dataupdate.php?NetDescID=8">Update </a> |
	    <a href="datadelete.php?NetDescID=8">Delete </a></td>
</tr>
<tr bgcolor=#cccccc>
<td><font size=2px>54.3</font></td>
<td><font size=2px>A</font></td>
<td><font size=2px>1999-11-30</font></td>

<td><font size=2px>Lisanki Island</font></td>
<td><font size=2px>Beach</font></td>
<td><font size=2px>Braided/Knottless</font></td>
<td><font size=2px>Yellow</font></td>
<td><font size=2px>Trawl/Seine</font></td>
<td><font size=2px>Blue</font></td>
<td nowrap>&nbsp;<a href="dataview.php?NetDescID=11">View </a> |
	    <a href="dataupdate.php?NetDescID=11">Update </a> |
	    <a href="datadelete.php?NetDescID=11">Delete </a></td>

</tr>
<tr bgcolor=#AAAAAA>
<td><font size=2px>90.0</font></td>
<td><font size=2px>A</font></td>
<td><font size=2px>2004-02-03</font></td>
<td><font size=2px>Kure Atoll</font></td>
<td><font size=2px>Reef</font></td>
<td><font size=2px>Twisted/Knotted</font></td>
<td><font size=2px>Green</font></td>
<td><font size=2px>Longline</font></td>

<td><font size=2px>No Trim Color</font></td>
<td nowrap>&nbsp;<a href="dataview.php?NetDescID=3">View </a> |
	    <a href="dataupdate.php?NetDescID=3">Update </a> |
	    <a href="datadelete.php?NetDescID=3">Delete </a></td>
</tr>
<tr bgcolor=#cccccc>
<td><font size=2px>92.3</font></td>
<td><font size=2px>A</font></td>
<td><font size=2px>1999-11-30</font></td>

<td><font size=2px>Pearl &amp; Hermes Atoll</font></td>
<td><font size=2px>HerZ</font></td>
<td><font size=2px>Braided/Knotted</font></td>
<td><font size=2px>Orange</font></td>
<td><font size=2px>Multifilament Gillnet</font></td>
<td><font size=2px>Black</font></td>
<td nowrap>&nbsp;<a href="dataview.php?NetDescID=10">View </a> |
	    <a href="dataupdate.php?NetDescID=10">Update </a> |
	    <a href="datadelete.php?NetDescID=10">Delete </a></td>

</tr>
</table></p>
	</div>
</body>
</html>

Thanks for your time.

-T
 
Upvote 0 Downvote
Well... there's 2 problems with your code.

1. You have a nested quotation that is breaking the string in the wrong place.

onchange='document.forms['login'].submit();'

should be:

onchange='document.forms["login"].submit();'

2. This falls back on what I said about not naming an HTML element the same name as the element itself. You have given the name "submit" to your submit button. So when referencing document.forms["login"].submit() it's trying to reference the button named submit. Change the name of your button to something like this:

<input name='submitbutton' type='submit' value='Submit Query' class='buttons' />


Again, never name the elements the same name as the element type, it can cause odd behavior on your page. Make every name and id unique.


-kaht

Do the chickens have large talons?
 
Upvote 0 Downvote
Thanks kaht.

It was the name of the button that was the problem. I've changed it and it finally submits on selection. I will be careful next time with naming and make sure they are unique. Thanks for the advice, and help.

I've run into another problem where it seems my PHP code doesn't recognize that new data has been submitted and all it does is refreshes, but that's another problem altogether.

Thanks again!

-T
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Making elements visible during an onChange() event
Replies
3
Views
63
vacunita
vacunita
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
94
tyutghf
tyutghf
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
58
Smurfmania
Smurfmania
obtur
  • Locked
  • Question
function below calculates day of the week for any given date. not returning correctly, plz help
Replies
2
Views
52
obtur
obtur
waubain
  • Locked
  • Question
Syntax help to create values list for table column
Replies
1
Views
63
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top