Mangage submit buttons

tux090 · Jan 8, 2008

Hi All,

I am new to html programming. I am having a page which has 4 buttons.
And I have limitation that I have to have all the buttons of type
SUBMIT only and the order of the buttons is also fixed.

But I am facing problem with functionality of the page. I am attaching
a sample code here for the reference.
<html><head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>

<script type="text/javascript" language="JavaScript1.2" >
function displayShow() {
alert("Show button pressed...");
}
function displaySubmit() {
alert("Submit button pressed...");
}
function displayReset() {
alert("Reset button pressed...");
}
</script>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="1375"
height="447">
<tr>
<td valign="top" height="447" width="1375">
<form method="POST" name="testForm" action="./test.htm">
<p> </p><p> </p>
<p>Message: <input type="text" name="T1" size="20"></p>
<p> </p><p> </p><p>
<input type="submit" value="Show" name="B1"
onkeypress="displayShow()" >
<input type="submit" value="Submit" name="B2"
onkeypress="displaySubmit()" >
<input type="submit" value="Reset" name="B3"
onkeypress="displayReset()" >
</p>
</form>
<p> </td>
</tr>
</table>
<script type="text/javascript">
document.testForm.B2.focus();
</script>
</body></html>

The page has Show, Submit, Reset buttons, all are of type submit. When
I press enter I want submit button should be executed but show button
get executed. And also with respect to button focus, by default Show
button takes the button focus when I click in the text box, I want to
have it on submit button when normal focus is on text box, so that
submit routine should be called when I press enter.

I tried with few java scripts but didn't work out.

Can anybody please help in this regard.

Thanks in advance.

Regards,
Prashant.

Anthony Levensalor · Jan 8, 2008

(e-mail address removed) said:

Hi All,

I am new to html programming. I am having a page which has 4 buttons.
And I have limitation that I have to have all the buttons of type
SUBMIT only and the order of the buttons is also fixed.

Sounds like homework, have you looked in the textbook?

[snip]

<html><head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>

<script type="text/javascript" language="JavaScript1.2" >

Don't bother with the language attribute. type="text/javascript" is plenty,

<body>
<table border="0" cellpadding="0" cellspacing="0" width="1375"
height="447">
<tr>
<td valign="top" height="447" width="1375">
<form method="POST" name="testForm" action="./test.htm">
<p> </p><p> </p>
<p>Message: <input type="text" name="T1" size="20"></p>

You need a keydown, keyup, or keypress event on the input itself:

<input type="text" name="T1" size="20" onkeydown="evalKey(event)">

And since you don't want every single keypress to submit the form,
you'll need a function to check for the right value. Assuming you only
want the enter key, the value you're looking for is 13.

In IE it's called keyCode, in FireFox it's called charCode. A simple
evaluation would be:

function evalKey(e) {
var keyPressed

if ( e && e.charCode) {
keyPressed = e.charCode
} else if (window.event) {
keyPressed = window.event.keyCode
}

if (typeof(keyPressed != "undefined")) {
if (keyPressed == 13) {
displaySubmit()
}
}
}

And then, when you press enter in the text field, the submit function
fires. Also, in FireFox, pressing enter had the default effect of
submitting the form.

<p> </p><p> </p><p>
<input type="submit" value="Show" name="B1"
onkeypress="displayShow()" >
<input type="submit" value="Submit" name="B2"
onkeypress="displaySubmit()" >
<input type="submit" value="Reset" name="B3"
onkeypress="displayReset()" >
</p>

All three of those keypress events are going to do you no good at all on
the buttons themselves. Go ahead and remove those.

</form>
<p> </td>
</tr>
</table>
<script type="text/javascript">
document.testForm.B2.focus();

The script element always goes in the head of the document, putting the
script tag at the bottom of the page is invalid markup, and I've been
caught on that one before, so don't feel bad.

[snip]

I tried with few java scripts but didn't work out.

Here's a good tutorial site. Some of it is questionable, but mostly it's
decent information.

http://www.w3schools.com/jsref/jsref_onkeypress.asp

Can anybody please help in this regard.

I hope I helped a bit, aye.

All the best,
~A!

David Mark · Jan 8, 2008

(e-mail address removed) said:

Hi All,

Click to expand...

I am new to html programming. I am having a page which has 4 buttons.
And I have limitation that I have to have all the buttons of type
SUBMIT only and the order of the buttons is also fixed.

Click to expand...

Sounds like homework, have you looked in the textbook?

[snip]

<html><head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>

Click to expand...

<script type="text/javascript" language="JavaScript1.2" >

Click to expand...

Don't bother with the language attribute. type="text/javascript" is plenty,

<body>
<table border="0" cellpadding="0" cellspacing="0" width="1375"
height="447">
<tr>
<td valign="top" height="447" width="1375">
<form method="POST" name="testForm" action="./test.htm">
<p> </p><p> </p>
<p>Message: <input type="text" name="T1" size="20"></p>

Click to expand...

You need a keydown, keyup, or keypress event on the input itself:

Unless this truly is a homework assignment, the best bet is to
rearrange the buttons and skip the script.

<input type="text" name="T1" size="20" onkeydown="evalKey(event)">

The keyup event would be a better choice. Also, you didn't prevent
the default action.

And since you don't want every single keypress to submit the form,
you'll need a function to check for the right value. Assuming you only
want the enter key, the value you're looking for is 13.

In IE it's called keyCode, in FireFox it's called charCode. A simple

That is incorrect.

http://developer-cluster.mozilla.org/en/docs/DOM:event.which

evaluation would be:

function evalKey(e) {
var keyPressed

if ( e && e.charCode) {
keyPressed = e.charCode

The charCode property is only set in keyPress events.

http://developer-cluster.mozilla.org/en/docs/DOM:event.charCode

} else if (window.event) {
keyPressed = window.event.keyCode
}

There is no need to check for window.event as you explicitly passed
the event object.

Since you used the keydown event, this is what you want:

keyPressed = e.which || e.keyCode;

if (typeof(keyPressed != "undefined")) {

This is not needed. An undefined value will type convert to 0 and so
will not equal 13.

if (keyPressed == 13) {
displaySubmit()
}
}

}

And then, when you press enter in the text field, the submit function
fires. Also, in FireFox, pressing enter had the default effect of
submitting the form.

All three of those keypress events are going to do you no good at all on
the buttons themselves. Go ahead and remove those.

The script element always goes in the head of the document, putting the
script tag at the bottom of the page is invalid markup, and I've been

That is not true and it often makes sense to put scripts at the tail
end of the document.

Anthony Levensalor · Jan 8, 2008

David Mark said:

The keyup event would be a better choice. Also, you didn't prevent
the default action.

I didn't in the one I posted, no. I did in the one I was playing with at
my house, though. I figure there's only so far one need go for homework.
I did my own in college.

That is incorrect.

Why did charCode work for me on the keydown? I'm a mite confused about
that, but reading the doc now, thanks for the edification.

http://developer-cluster.mozilla.org/en/docs/DOM:event.which

The charCode property is only set in keyPress events.

And oddly enough, it still worked. They must be compensating for
incompetence. Dammit, I wish they'd just throw an error and stop letting
me screw up.

http://developer-cluster.mozilla.org/en/docs/DOM:event.charCode

There is no need to check for window.event as you explicitly passed
the event object.

I did not know that. Thank you.

Since you used the keydown event, this is what you want:

keyPressed = e.which || e.keyCode;

This is not needed. An undefined value will type convert to 0 and so
will not equal 13.

I like the typeof syntax. It may not be necessary in a great many cases,
but it's a style thing. I like it.

[snip]

That is not true and it often makes sense to put scripts at the tail
end of the document.

Really? I got my ass chewed on that one not two weeks ago up here. I'm
hoping the person who corrected me on that pipes up on this one, I'd
love to hear the details.

Thanks for taking the time to go over that, much obliged for the
corrections.

All the best,
~A!

David Mark · Jan 8, 2008

David Mark said:

I didn't in the one I posted, no. I did in the one I was playing with at
my house, though. I figure there's only so far one need go for homework.
I did my own in college.

Why did charCode work for me on the keydown? I'm a mite confused about
that, but reading the doc now, thanks for the edification.

It is hard to believe that charCode would work in this example.
Regardless, you shouldn't use it in keydown/up events.

And oddly enough, it still worked. They must be compensating for
incompetence. Dammit, I wish they'd just throw an error and stop letting
me screw up.

I did not know that. Thank you.

I like the typeof syntax. It may not be necessary in a great many cases,
but it's a style thing. I like it.

The syntax isn't the issue. The line is extraneous.

[snip]

That is not true and it often makes sense to put scripts at the tail
end of the document.

Click to expand...

Really? I got my ass chewed on that one not two weeks ago up here. I'm

Really. Script elements are not relegated to the head. Perhaps you
put one after the closing body tag, which is invalid.

hoping the person who corrected me on that pipes up on this one, I'd
love to hear the details.

Thanks for taking the time to go over that, much obliged for the
corrections.

No problem.

Henry · Jan 8, 2008

David Mark said:

I like the typeof syntax. It may not be necessary in a great
many cases, but it's a style thing. I like it.

<snip>

Maybe, but you will have to watch your parenthesise. As you have it
you are testing the - typeof - the expression - (keyPressed !=
"undefined") -. That expression will have a boolean result so the
result of the - typeof - will be the string "boolean", which being non-
empty will result in the - if - expression type-converting that value
to boolean true, always. So that - if - test is pointless as it can
only ever have one outcome.

Anthony Levensalor · Jan 8, 2008

Henry said:

Maybe, but you will have to watch your parenthesise. As you have it
you are testing the - typeof - the expression - (keyPressed !=
"undefined") -. That expression will have a boolean result so the
result of the - typeof - will be the string "boolean", which being non-
empty will result in the - if - expression type-converting that value
to boolean true, always. So that - if - test is pointless as it can
only ever have one outcome.

It's funny you mention that, in taking notes on the corrections David
sent along, I noticed the parens were out of place, and was actually
thinking about experimenting with that to see if I could get it to
royally blow up. Nice catch, thanks!

~A!

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How can I arrange a series of radio buttons?	2	Jan 25, 2024
Buttons lining up	1	Feb 6, 2022
Can't execute php to delete multiple rows in database	3	May 14, 2023
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
How to explain buttons	13	Aug 31, 2023
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
<Button ...> display is fine, except for two things	1	Oct 23, 2023

Mangage submit buttons

tux090

Anthony Levensalor

David Mark

Anthony Levensalor

David Mark

Henry

Anthony Levensalor

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads