jQueryスクリプトがアウトソーシング後に失敗する

Question

選択したラベルに基づいてユーザーをリダイレクトする小さなスクリプトを作成しました。オンページ

ON-PAGE SCRIPT

<form id="contact" method="POST" name="contact"> 
    <label for="request" class="mandatory"> 
    <select id="request" required> 
     <option selected="selected" value="">-Please select-</option> 
     <option value="A">Selection A</option> 
     <option value="B">Selection B</option> 
     </select> 
    </label> 
</form> 
<input id="redirect" type="hidden" name="redirect" value=""/> 
<input class="send" onclick="submit_form();" type="submit" name="Submit" value="Send Mail" /> 
</form> 
<script> 
$("form").ready(function(){ 
     $("select").change(function(){ 
      $("select option:selected").each(function(){ 
       if($(this).attr("value")=="A"){ 
        $("#redirect").val("http://example.com/a"); 
       } 
       if($(this).attr("value")=="B"){ 
        $("#redirect").val("http://example.com/b"); 
       } 
      }); 
     }).change(); 
    }); 
</script> 

スクリプトが正常に動作しますが、今、私は外部JSファイルにそれをアウトソーシングに苦しみました。

HTML

<form id="contact_form" method="POST" name="contact_form"> 
    <label for="request" class="mandatory"> 
    <select id="request" required> 
     <option selected="selected" value="">-Please select-</option> 
     <option value="A">Selection A</option> 
     <option value="B">Selection B</option> 
     </select> 
    </label> 
</form> 
<input id="redirect" type="hidden" name="redirect" value=""/> 
<input class="send" onclick="submit_form();" type="submit" name="Submit" value="Send Mail" /> 
<script src="/form/flexRequest.js"></script> 
<script> 
$("form").ready(function(){ 
    flexRequest(); 
}); 
</script> 

JSファイル

function flexRequest(){ 
$("select").change(function(){ 
      $("select option:selected").each(function(){ 
       if($(this).attr("value")=="A"){ 
        $("#redirect").val("http://example.com/a"); 
       } 
       if($(this).attr("value")=="B"){ 
        $("#redirect").val("http://example.com/b"); 
       } 
      }); 
     }).change(); 
    }); 

あなたが見ることができるように、私はJSファイルを統合し、特定のページのイベントでそれを初期化する必要があることを承知していますpagecreateのようになります。しかし、私は最終的な解決に苦しんでいます。

Answer 1

あなたが直接あなたの選択ボックスの.changeイベントをキャッチし、など

IF文を使用しないようそして、ちょうどID #redirectであなたの隠された入力の新しい値を設定することができます...

<form id="contact_form" method="POST" name="contact_form"> 
    <label for="request" class="mandatory"> 
    <select id="request" required> 
     <option selected="selected" value="">-Please select-</option> 
     <option value="A">Selection A</option> 
     <option value="B">Selection B</option> 
     </select> 
    </label> 
</form> 
<input id="redirect" type="hidden" name="redirect" value=""/> 
<input class="send" onclick="submit_form();" type="submit" name="Submit" value="Send Mail" /> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#request").change(function(){ 
     var request_value = $(this).val(); 
     $("#redirect").val("http://example.com/"+request_value); 
    }); 
}); 
</script> 

demo