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

Forum Moderators: open

Message Too Old, No Replies

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

Javascript HTML onchange not working

bakhtn

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

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

the form is :

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

Fotiman

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

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

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.