HTML How do I fix the submit button?

M

Michael

New member
I think this modified version of your code will do what you want it to:

<form action="javascript:null" name="faq">
<table width="500" align="center" cellpadding="2" cellspacing="0" border="0">
<tr>
<td align="right">
<table cellpadding="2" cellspacing="0" border="0"><tr>
<td>
<select style="width:205px" name="dest" id="dest">
<option value="faq1.html">Show All FAQ's</option>
<option value="faq2.html">Association Setup</option>
<option value="faq3.html">Managing Document Uploads</option>
<option value="faq4.html">Managing Your Links</option>
<option value="faq5.html">Manage Your Pictures</option>
<option value="faq6.html">Maps</option>
<option value="faq7.html">Reports</option>
</select>
</td>
<td><input name="dest" type="submit" value="Go" onclick= "document.getElementById( 'myframe' ).src = document.getElementById( 'dest' ).value;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<iframe width="700" id="myframe" name="myframe" class="autoHeight" scrolling="auto" frameborder="0" src="faq1.html">
</iframe>

The select tag has no onsubmit attribute. Instead I've used the onclick attribute on the submit input tag.

For more on the select and input tags see: http://www.html-tags-guide.com/html-select-tag.html and http://www.html-tags-guide.com/html-input-tag.html
 
Hi, I'm trying to get this code right here to work. I have a FAQ page for a site I'm working on, and I am trying to make a drop down box that changes the iframe page when you hit the submit (go) button. I have the iframes set with autoheight using jquery.js autoHeight plugin. Now everything works when I change it the option, but I don't want. I want that changed to when you hit the submit button. I'm stumped and been searching the web for quite some time, and can't seem to find my answer.

<form method="get">
<table width="500" align="center" cellpadding="2" cellspacing="0" border="0">
<tr>
<td align="right">
<table cellpadding="2" cellspacing="0" border="0"><tr>
<td>
<select style="width:205px" name="dest" on="window.open(this.options[this.selectedIndex].value,'myframe')">
<option value="faq1.html">Show All FAQ's</option>
<option value="faq2.html">Association Setup</option>
<option value="faq3.html">Managing Document Uploads</option>
<option value="faq4.html">Managing Your Links</option>
<option value="faq5.html">Manage Your Pictures</option>
<option value="faq6.html">Maps</option>
<option value="faq7.html">Reports</option>
</select>
</td>
<td><input name="dest" type="submit" value="Go" /></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<iframe width="700" id="myframe" name="myframe" class="autoHeight" scrolling="auto" frameborder="0" src="faq1.html">
</iframe>
I'm sorry, there was a typo. Its actually "onsubmit=" not "on=" by the <select> tag
Thanks for the answer. Unfortunately, when I click the go button, it brings me to a blank page that says "null". When I press the back button, however, it went the page it's supposed to.
 
I think this modified version of your code will do what you want it to:

<form action="javascript:null" name="faq">
<table width="500" align="center" cellpadding="2" cellspacing="0" border="0">
<tr>
<td align="right">
<table cellpadding="2" cellspacing="0" border="0"><tr>
<td>
<select style="width:205px" name="dest" id="dest">
<option value="faq1.html">Show All FAQ's</option>
<option value="faq2.html">Association Setup</option>
<option value="faq3.html">Managing Document Uploads</option>
<option value="faq4.html">Managing Your Links</option>
<option value="faq5.html">Manage Your Pictures</option>
<option value="faq6.html">Maps</option>
<option value="faq7.html">Reports</option>
</select>
</td>
<td><input name="dest" type="submit" value="Go" onclick= "document.getElementById( 'myframe' ).src = document.getElementById( 'dest' ).value;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<iframe width="700" id="myframe" name="myframe" class="autoHeight" scrolling="auto" frameborder="0" src="faq1.html">
</iframe>

The select tag has no onsubmit attribute. Instead I've used the onclick attribute on the submit input tag.

For more on the select and input tags see: http://www.html-tags-guide.com/html-select-tag.html and http://www.html-tags-guide.com/html-input-tag.html
 
I think this modified version of your code will do what you want it to:

<form action="javascript:null" name="faq">
<table width="500" align="center" cellpadding="2" cellspacing="0" border="0">
<tr>
<td align="right">
<table cellpadding="2" cellspacing="0" border="0"><tr>
<td>
<select style="width:205px" name="dest" id="dest">
<option value="faq1.html">Show All FAQ's</option>
<option value="faq2.html">Association Setup</option>
<option value="faq3.html">Managing Document Uploads</option>
<option value="faq4.html">Managing Your Links</option>
<option value="faq5.html">Manage Your Pictures</option>
<option value="faq6.html">Maps</option>
<option value="faq7.html">Reports</option>
</select>
</td>
<td><input name="dest" type="submit" value="Go" onclick= "document.getElementById( 'myframe' ).src = document.getElementById( 'dest' ).value;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<iframe width="700" id="myframe" name="myframe" class="autoHeight" scrolling="auto" frameborder="0" src="faq1.html">
</iframe>

The select tag has no onsubmit attribute. Instead I've used the onclick attribute on the submit input tag.

For more on the select and input tags see: http://www.html-tags-guide.com/html-select-tag.html and http://www.html-tags-guide.com/html-input-tag.html
 
Back
Top