HTML/Javascript onchange vs onsubmit problem

StackOverflow https://stackoverflow.com/questions/6367204

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>
Was it helpful?

Solution

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

OTHER TIPS

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

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

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" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top