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!

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

2 Submit buttons, "Enter" always uses first

Status
Not open for further replies.

marzke

Programmer
Jul 1, 2003
8
0
0
US
I checked this forum for possible solutions, but none seem to work.

I have a text field and two submit buttons. The left button is "Cancel" and the right is "Submit". The default behavior is that the left button is selected when "Enter" is pressed. I'm trying to figure out a way to get the right button to be submitted.

Here's my test HTML:

<html><head><title>Test 7</title></head><body>
<script>
function test_onclick(obj) {
// when uncommented, and enter pressed - returns &quot;buttonsub&quot;, but URL doesn't have parameter
// document.write('button clicked: ' + obj.name );
}
function enter()
{ if(window.event && window.event.keyCode == 13)
{
document.form1.buttonsub.click();
// return false; -- doesn't make any difference
// document.form1.submit(); // doesn't make any difference
}
return true; }
</script>
<form name=&quot;form1&quot; action=&quot;focus_test_2.html&quot; method=&quot;get&quot;>
Text 1: <input type=&quot;text&quot; name=&quot;t1&quot; value=&quot;s1&quot; onkeypress=&quot;enter();&quot;/>
<br>
<input type=&quot;submit&quot; name=&quot;buttoncancel&quot; value=&quot;cancel1&quot; onClick=&quot;test_onclick(this);&quot;/>
<input type=&quot;submit&quot; name=&quot;buttonsub&quot; value=&quot;submit1&quot; onClick=&quot;test_onclick(this);&quot;/>
</form>
</body></html>


If I press enter, then the passed URL is &quot;/focus_test_2.html?t1=s1&quot;.
If I select the &quot;Cancel&quot; button, it's &quot;focus_test_2.html?t1=s1&buttoncancel=cancel1&quot;.
If I select the &quot;Submit&quot; button, it's &quot;focus_test_2.html?t1=s1&buttonsub=submit1&quot;.

I've tried every tip I've read about to get the second button to passed as a parameter when I press the enter key (i.e., I want the URL to be &quot;focus_test_2.html?t1=s1&buttonsub=submit1&quot;)

What am I doing wrong?
 
Rather than using the onClick event, try adding the onSubmit event to your form tag and then evaluate the buttons in a javascript.

There's always a better way. The fun is trying to find it!
 
I'm not sure what you mean by &quot;evaluate the buttons&quot;. I modified my HTML so that the following is my onSubmit script, and I get alerts for both &quot;values&quot; whether I press ENTER, Cancel, or Submit. What should I be checking for? I checked all the properties of INPUT/type=submit and none ever change. I also looked at all the properties on FORM to see if there was an indication of which button was pressed, but couldn't find it.

Code:
function submit_test()
{
 if ( document.form1.buttonsub.value == &quot;submit1&quot; ){
   alert(&quot; buttonsub.value is set &quot; + document.form1.buttonsub.value ); }
 if ( document.form1.buttoncancel.value == &quot;cancel1&quot; ){
   alert(&quot; buttoncancel.value is set &quot; + document.form1.buttoncancel.value ); }
}
 
Here's a workaround that I'm using when there are at least two fields in a form (no JavaScript required). I'm creating a table so that the second button actually appears first in the list. (Works in Opera 6 and Netscape 7, too).

I still need a solution for forms with a single field (which, I would hope, is a general solution for all forms.)

Code:
      <table summary=&quot;formatting table for submit buttons&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;>
        <tr>
          <td>
          </td>
          <td rowspan=&quot;2&quot;>
                    
          </td>
          <td rowspan=&quot;2&quot; valign=&quot;bottom&quot;>
            <input type=&quot;submit&quot; name=&quot;buttonsub&quot; value=&quot;submit1&quot; tabindex=&quot;4&quot;>
          </td>
        </tr>
        <tr>
          <td>
            <input type=&quot;submit&quot; name=&quot;buttoncancel&quot; value=&quot;cancel1&quot; tabindex=&quot;3&quot;>
          </td>
        </tr>
      </table>
 
OK. Here's the code that represents what I ended up doing. The major problem is that when &quot;ENTER&quot; is pressed with a single text field, neither button is passed. So, I created a hidden field that I change the name of when ENTER is pressed.

Code:
<html><head><title>Test 11</title></head><body onload=&quot;form1.t1.focus();&quot;>
<script>
function enter_check()
{
  if(window.event && window.event.keyCode == 13)
   {	document.form1.xxx.name=&quot;buttonsub&quot;;   }
}
</script>
<h1>Focus Test 11 - Hidden field</h1>
<form name=&quot;form1&quot; action=&quot;focus_test_2.html&quot; method=&quot;get&quot;>
<input type=&quot;hidden&quot; name=&quot;xxx&quot; value=&quot;submit1&quot; />
Field 1: <input type=&quot;text&quot; name=&quot;t1&quot; value=&quot;s1&quot; tabindex=&quot;1&quot; onkeypress=&quot;return enter_check();&quot;/>
<br>
<input type=&quot;submit&quot; name=&quot;buttoncancel&quot; value=&quot;cancel1&quot; tabindex=&quot;2&quot;>
     
<input type=&quot;submit&quot; name=&quot;buttonsub&quot; value=&quot;submit1&quot; tabindex=&quot;3&quot;>
</form>
</body></html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top