如何创建表单来生成url

时间:2013-10-09 21:37:33

标签: javascript jquery html forms

我在我的网站上有一个表单来生成url并且它运行良好但是用户应该等到整个页面加载才能正确使用它,我认为这是因为我使用window.onload并且我应该使用$(文件).ready而不是它,但我无法取代它我需要有人来帮助我

<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>

2 个答案:

答案 0 :(得分:1)

我将摆脱所有额外的javascript以分配该功能,只需使用:

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

答案 1 :(得分:1)

你有正确的想法,我只是在提交表单时调用该函数,并从提交按钮中删除on click事件。

试试这个:

<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>