2009-09-21 9 views
1

私はjQueryを使って選択フィールドの選択肢(カテゴリ+投稿者)を結合し、idをas_qとした隠しフィールドに挿入しようとしていますが、スクリプトを実行するとas_q常に空です。変数をjQueryに割り当てる問題

現時点では、ユーザがサブミットをクリックしたときに関数を呼び出します.2つの選択フィールドの値を取得し、それらを組み合わせてからas_qフィールドに割り当てます。少なくともそれは私のロジックです。

おそらく私は間違った場所にいるのでしょうか?私の現在のコードは以下の通りです。すべてのヘルプは大歓迎、感謝

<form action="<? echo $PHP_SELF;?>" method="get" id="cse-search-box"> 
    <input type="text" name="q" size="31"/> 
    <select name="category"> 
    <option>Movies</option> 
    <option>Film</option> 
    <option>Fashion</option> 
    </select> 
    <select name="contributors"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
    </select> 
    <input type="hidden" name="as_q" id="as_q" value="" /> 
    <input type="submit" name="sa" value="Search" id="submit_query" /> 
</form> 

<script>  
    $('#submit_query').click(function(){ 
    var category = $('[name=category]').val(); 
    var contributors = $('[name=contributors]').val(); 

    $('[#as_q]').val(category+' '+contributors); 

    }); 
</script> 
+0

はでテストページの結果にコードを置くファイルはsandbox.php呼ばれる

(あなたはファイル拡張子.phpを与えてくれた場合、私はこれは本当に不明だ唯一のものとされて言及します)それはFF3.5で正常に動作します。それ以上の詳細は記入できますか? – Steerpike

+0

私はデプロイメントサーバーの外で自分でテストページを試しましたが、正しく動作しません - 私は空のurlのas_qセクションを見ています。 2つのフィールドがas_qに組み合わされていることをどのようにテストしているのか尋ねることはできますか?多分もっと正確な情報を提供するのに役立つでしょうか? – Gibset

+0

私は本当にこのような質問のためにpastehtml.comを使用することをお勧めします。 http://pastehtml.com/view/090921UbqT7OfJ.html – itsadok

答えて

1

ただの推測 - 「as_q」の周りに角括弧を入れないでください...

$('[#as_q]').val(category+' '+contributors); 
+0

質問を送信した後でこれを認識しましたが、問題ではありません。 – Gibset

0

から角括弧を取り除きます。また、送信ボタンをクリックしてもこれを行わないでください。フォームを提出できるすべての方法を取り込むことはできません。代わりにイベントを提出し、フォーム上でそれを実行します。

$("#cse-search-box").submit(function() { 
    var category = $('[name=category]').val(); 
    var contributors = $('[name=contributors]').val(); 
    $('#as_q').val(category+' '+contributors); 
}); 

注:はform.submitを呼び出すには、()(一部のブラウザ上で)あまりにもこのハンドラをバイパスしますが、それはとにかく、あなたのクリック()イベントをバイパスします。作られた他の提案に加えて

+0

私は元々このようにしていましたが、それはどちらもうまくいかないようです。 どちらの方法もas_qを空のままにしています...私は何らかの手段で専門家ではないので、ここで紛失します!それ以上の助けに感謝します。 – Gibset

1

1から$(document).ready(...ブロックにあなたのコードを入れてください。これはなぜ機能していないのかもしれない。

2 - パフォーマンスを向上させるために選択IDを指定すると、attribute filters([name = blah]のような)は要素を選択する最もすばらしい方法ではありません。

$(document).ready(function() { 
    $('#submit_query').click(function(){ 
     var category = $('#category').val(); 
     var contributors = $('#contributors').val(); 
     $('#as_q').val(category + ' ' + contributors); 
    }); 
}); 
+0

提案していただきありがとうございます。IDセレクタを使用しています。 私はコードをdoc readyブロックにラップしましたが、まだ運がありません - なぜこれが動作しないのか本当に混乱しています! – Gibset

1

私が使用しているテストコードは、あなたのコードがうまく動作しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 --> 
<head> 
    <meta http-equiv="Content-Type" content="application/text+html;utf-8"> 

    <title>Sandbox</title> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet"> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#submit_query').click(function(){ 
    var category = $('[name=category]').val(); 
    var contributors = $('[name=contributors]').val(); 

    $('#as_q').val(category+' '+contributors); 
    }); 
    }); 

</script> 
</head> 
<?php 
if(isset($_REQUEST['as_q'])) { 
    echo $_REQUEST['as_q']; 
} 
?> 
<body class="calendarPage"> 
<form action="#" method="get" id="cse-search-box"> 
    <input type="text" name="q" size="31"/> 
    <select name="category"> 
    <option>Movies</option> 
    <option>Film</option> 
    <option>Fashion</option> 
    </select> 
    <select name="contributors"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
    </select> 
    <input type="hidden" name="as_q" id="as_q" value="" /> 
    <input type="submit" name="sa" value="Search" id="submit_query" /> 
</form> 


    </body> 


</html> 
+0

よろしく、ありがとうございます - 開発サーバー上のコードを使用して、すべて正常に動作します。私の知る限り、私のコードとあなたの唯一の違いは、私が開発しているサイトで使用されているjQueryのバージョンです - 1.2.6。 バージョンの違いはわかりませんが、これは問題ではないと思いますか?サーバーにローカルに保存されているjqueryが編集されていない限り、私は調査し、いくつかの情報を取得しようとしています! – Gibset

関連する問題