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 FILE

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

您可以直接捕获selectbox的.change事件，并避免使用IF语句等。

只需设置隐藏输入的新值，ID为<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> ...

IsString

demo

外包后jQuery脚本失败了

1 个答案: