シンプルなjavascriptフォームのアクション方向

フォームのターゲットURLを再作成するためにJqueryを使用しようとしています。私が間違っているアイデアは？多くのおかげで...あなたの元のコードでシンプルなjavascriptフォームのアクション方向

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

    <script> 
     // Needs to point at search page with eg: test.htm?s=SearchTerm&cat=3,7 
     // but I keep getting - test.htm?s=hh&cat1=3&cat2=0 
     $("#aSearch").click(function() { 
     $('form').attr('action', './test.htm?s=' + this.s + '&cat=' . this.cat1 + ',' + this.cat2); 
     }); 
    </script> 

    <form name="advancedSearch" action="" method="get"> 
    <input id="s" type="text" name="s" size="40" /> 
    <select name="cat1"> 
     <option value="0"> - - - </option> 
     <option value="3">Chardonnay (6)</option> 
     <option value="23">Gewurztraminer (1)</option> 
     <option value="24">Pinot Gris (1)</option> 
     <option value="4">Sauvignon Blanc (3)</option>    
    </select> 
    <select name="cat2"> 
     <option value="0"> - - - </option> 
     <option value="2">Burgandy (6)</option> 
     <option value="7">Shiraz (1)</option>   
    </select> 
    <div><input id="aSearch" type="submit" value="Search" /></div 
    </form> 

</body> 
</html>

出典

2011-07-15 Gwilym

あなたのケースでは、 'this'は、あなたの下の' '要素です！ 's'や' cat1'のようなフィールドや要素は存在しません – timaschew

、あなたはthisのプロパティにアクセスしようとしていました。コールバック内のthisキーワードはaSearch DOMオブジェクトを参照していたため、適切な値を提供していませんでした。

$('form').attr('action', './test.htm?s=' + this.s + '&cat=' . this.cat1 + ',' + this.cat2);

あなたはjQueryを使って各要素を選択して、代わりに.val()でその値を取得する必要があります：

<script> 
    $(document).ready(function() { 
     var s = $('#s'); 
     var cat1 = $('#cat1'); 
     var cat2 = $('#cat2'); 

     $("#aSearch").click(function() { 
      $('form').attr('action', './test.htm?s=' + s.val() + '&cat=' . cat1.val() + ',' + cat2.val()); 
     }); 
    }); 
</script>

出典

2011-07-15 00:27:08

シンプルなjavascriptフォームのアクション方向

答えて

関連する問題