Welcome to WebmasterWorld Guest from 54.158.10.156

Forum Moderators: incrediBILL

Message Too Old, No Replies

This is not working, any ideas why? Javascript onchange HTML

Javascript HTML onchange not working

     
6:50 pm on Jan 23, 2013 (gmt 0)

New User

joined:Nov 4, 2011
posts:6
votes: 0


why is this not working, when I click it should execute the javascript code:


<html>
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

<script type="text/javascript">

function submitLocationForm()
{
document.getElementById("advanced-search-form").action = "advancedSearch.php";
document.getElementById("advanced-search-form").method = "post";
document.getElementById("advanced-search-form").submit();

}

</script>

</head>

...

<div>
<label for="country">Country:</label>
<select name="country" id="country" onchange="submitLocationForm()">


<option value="Any" selected="selected">Any</option>

<option value="Canada">Canada</option>

<option value="United Kingdom">United Kingdom</option>

<option value="USA">USA</option>


</select>
</div>

...
6:52 pm on Jan 23, 2013 (gmt 0)

New User

joined:Nov 4, 2011
posts:6
votes: 0


the form is :

 <form action="showSearchResult.php" id="advanced-search-form" method="post">
8:31 pm on Jan 23, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


Works for me.
Does your form wrap your select element?

<html>
<head>
<title>Advanced Search</title>
<script type="text/javascript">
function submitLocationForm()
{
document.getElementById("advanced-search-form").action = "advancedSearch.php";
document.getElementById("advanced-search-form").method = "post";
document.getElementById("advanced-search-form").submit();
}
</script>
</head>
<body>
<div>
<form action="" id="advanced-search-form">
<div>
<label for="country">Country:</label>
<select name="country" id="country" onchange="submitLocationForm()">
<option value="Any" selected="selected">Any</option>
<option value="Canada">Canada</option>
<option value="United Kingdom">United Kingdom</option>
<option value="USA">USA</option>
</select>
</div>
</form>
</div>
</body>
</html>
8:33 pm on Jan 23, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


Note, you shouldn't call getElementById mutiple times. It's not efficient. Assign the result to a variable so you don't have to keep searching the DOM.
var frm = document.getElementById('advanced-search-form');
frm.action = 'advancedSearch.php';
frm.method = 'post';
frm.submit();
5:11 pm on Jan 25, 2013 (gmt 0)

New User

joined:Nov 4, 2011
posts:6
votes: 0


thanks everyone, but its sorted now, this is the reason it was not working, the submit button was named submit, so the js was confused, i changed the name to something else and now its working.