homepage Welcome to WebmasterWorld Guest from 107.20.25.215
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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




msg:4538727
 6:50 pm on Jan 23, 2013 (gmt 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>

...

 

bakhtn




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

the form is :

<form action="showSearchResult.php" id="advanced-search-form" method="post">
Fotiman




msg:4538754
 8:31 pm on Jan 23, 2013 (gmt 0)

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>

Fotiman




msg:4538756
 8:33 pm on Jan 23, 2013 (gmt 0)

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();

bakhtn




msg:4539303
 5:11 pm on Jan 25, 2013 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved