HTML/Javascript onchange vs onsubmit problem

Question

I am trying a code, that will load an iframe onsubmit. I am able to do it onchange of a text field (code taken from somewhere). But onsubmit does not work:

Works

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

</head>
<body>
<input value="Song1" onchange="foo.location='song.php?song=blind_willie.mp3'"  style="display:block; margin:auto" type="text">
<iframe name="foo" style="display:block; margin:auto"></iframe>
</body>
</html>

DOES NOT WORK

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">


<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

</head>
<body>
<input value="Song1" onsubmit="foo.location='song.php?song=blind_willie.mp3'"  style="display:block; margin:auto" type="Submit">
<iframe name="foo" style="display:block; margin:auto"></iframe>
</body>
</html>

Ivan Castellanos · Accepted Answer · 2017-05-28 03:08:36Z

1

Onsubmit goes on the form, not on the submit button, try using type="button" instead in an "onclick" event.

edited May 28, 2017 at 3:08

answered Jun 16, 2011 at 4:49

Ivan Castellanos

8,2521 gold badge51 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tanon Over a year ago

Works perfect. Thanks a ton (will accept answer after time limit goes!)

Shurdoof · Accepted Answer · 2011-06-16 04:49:40Z

1

OnSubmit is a form event so it won't work on input.

Use type='button' and the OnClick event instead.

answered Jun 16, 2011 at 4:49

Shurdoof

1,71913 silver badges16 bronze badges

Comments

Jordan · Accepted Answer · 2011-06-16 04:50:33Z

1

2 things:

onsubmit belongs to the form element, not the input, so you would put your current input in a form like this:

<form onsubmit="foo.location='song.php?song=blind_willie.mp3'; return false">
    <input value="Song1" style="display:block; margin:auto" type="Submit" />
</form>

The 2nd thing is that you need to return false from the onsubmit or it will try to refresh the page since you don't have an action.

On a side note, this seems like quite a strange method you have. You could certainly just do:

<input value="Song1" onclick="foo.location='song.php?song=blind_willie.mp3'"  style="display:block; margin:auto" type="Submit" />

answered Jun 16, 2011 at 4:50

Jordan

32.7k6 gold badges59 silver badges67 bronze badges

Collectives™ on Stack Overflow

HTML/Javascript onchange vs onsubmit problem

Works

DOES NOT WORK

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Works

DOES NOT WORK

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related