0

ユーザーが と という値を持つ 2 つのドロップダウン ボックスを持つ Web サイトからフォームを作成したいと考えていbody heightますtype of build。選択に応じて、特定の/選択したビルドに関する情報が記載されたページに移動します。

私が作成したいもののアイデアを得るために、ここに表示したいフォームがあります.. BMX バイク ガイドの場合の使用

function goToPage() { var type = document.getElementById("type").value; var height = document.getElementById("height").value; if(タイプ !== 0 && 高さ !== 0) { window.location = "http://www.maltabmx.com/About.html?jtype=" + 1 + "&height=" + 1; 
        window.location = "http://www.maltabmx.com/Footage.html?jtype=" + 
        1 + "&height=" + 
        2;

        window.location = "http://www.maltabmx.com?jtype=" + 
        1 + "&height=" + 
        3;

        window.location = "http://www.maltabmx.com/About.html?jtype=" + 
        1 + "&height=" + 
        4;

        window.location = "http://www.maltabmx.com/Footage.html?jtype=" + 
        1 + "&height=" + 
        5;

        window.location = "http://www.maltabmx.com?jtype=" + 
        1 + "&height=" + 
        6;   }  } 

<form>  <p> Type of Terrain: </p>

ストリート/パーク ダート レーシングを選択 

<p>Body Height</p>
<select id="height">
<option value="0" id="Select">Select</option>
<option value="1" id="5ft">4ft</option>
<option value="2" id="5.5ft">4.25ft</option>
<option value="3" id="5.5ft">4.50ft</option>
<option value="4" id="6ft">4.75ft</option>
<option value="5" id="5ft">5ft</option>
<option value="6" id="5.5ft">5.25ft</option>
<option value="7" id="6ft">5.50ft</option>    <option value="8" id="5ft">5.75ft</option>
<option value="9" id="5.5ft">6ft</option>
<option value="10" id="6ft">6.25ft</option>
</select>

<br /><br />

<input  onclick="goToPage();"  type="button" value="Submit" />

</form>
4

1 に答える 1

1 
<html>
 <head>

  $(document).ready(function() {

      $('#submit').click(function(){ 

      var type= $("#type").val();
      var height = $("#height").val();

      window.location.href = 'http://www.someweb.com/page.php?type='+type+'&&height='+height;

    });

 });

  </head>
  <body>

 <form>
 <p> Type of Terrain: </p>

  <select id="type">
    <option value="1" id="Street">Street</option>
    <option value="2" id="Dirt">Dirt</option>
    <option value="3" id="Park">Park</option>
    <option value="4" id="Racing">Racing</option>
    </select>

    <p>Body Height</p>
    <select id="Height">
    <option value="1" id="5ft">5ft</option>
    <option value="2" id="5.5ft">5.5ft</option>
    <option value="3" id="6ft">6ft</option>

    </select>

    <br /><br />

    <input id="submit" type="submit" value="Submit" />

    </form>
  </body>
</html>

そこで、上記のコードを変更しました。ご不明な点がございましたら、お気軽にお問い合わせください。

PS: 通常、他のページに値をリダイレクトまたは渡すには、windows.location.href の代わりに jquery の $.post、$.get、または $.ajax メソッドを使用します。

ここを見てくださいhttp://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

編集済み - 実用的なソリューション: http://jsfiddle.net/YXW7K/13/

于 2012-07-10T15:29:24.447 に答える