如何创建一个表单来生成URL

Question

i have a form on my site to generate url and it works well but the user should wait until the whole page is loaded to be able to use it properly , i think that happens because i use window.onload and i should use $(document).ready instead of it , but i couldnt replace it i need someone to help me with it

<script type='text/javascript'>
   window.onload = function() {
   document.forms['filterform'].onsubmit = filterLoad;
};

function filterLoad() {
  var url,
      colourSel = this.elements['department'],
      shapeSel = this.elements['country'];

  url = ( colourSel.options[colourSel.selectedIndex].value ) + ( shapeSel.options[shapeSel.selectedIndex].value ); 
 window.location.href = url;
 return false;
}

</script>




<form   id="searchform" name="filterform">
   <select class="chosen" name="department" id="searchfield" >
      <option value="http://www.mysite.com/">choise 1</option>
      <option value="http://www.mysite.com/">choise 1</option>
   </select>

   <select class="chosen" name="country" id="choose">
      <option value="?qatar=show&action=Filter">qatar</option>
      <option value="?ksa=show&action=Filter">ksa</option>
   </select>

   <label for="search"><button  class="submit" onclick="filterLoad()"  /></button></label>

</form>

Answer 1

我会摆脱所有额外的JavaScript来分配功能，而只需使用：

<form   id="searchform" name="filterform" onsubmit="filterLoad">

Answer 2

You have the right idea, I would just call that function though when the form is submitted, and remove the on click event from the submit button.

Try this :

<script type='text/javascript'>

function filterLoad() {
  var url,
      colourSel = this.elements['department'],
      shapeSel = this.elements['country'];

      url = (colourSel.options[colourSel.selectedIndex].value) + (shapeSel.options[shapeSel.selectedIndex].value);
      window.location.href = url;
      return false;
}
</script>

<form id="searchform" name="filterform" onSubmit="return filterLoad();" >
   <select class="chosen" name="department" id="searchfield" >
      <option value="http://www.mysite.com/">choise 1</option>
      <option value="http://www.mysite.com/">choise 1</option>
   </select>

   <select class="chosen" name="country" id="choose">
      <option value="?qatar=show&action=Filter">qatar</option>
      <option value="?ksa=show&action=Filter">ksa</option>
   </select>
   <label for="search"><button  class="submit" /></button></label>
</form>