简体   繁体   中英

Based on input selected redirect to new html page on button click

I am new to javascripts. Based on the input selected from the drop downlist I need to redirect to new html page once i click the next button.

...
<p>Application Type&nbsp
<select id = "aList" name="selection">
<option value = "">---Select Value---</option>
<option value = "New_req_p2_web.html">External Web Application</option>
<option value = "New_req_p2_web.html">Internal Web Application</option>
<option value = "New_req_p2_mob.html">Mobile Application</option>
<option value = "New_req_p2_net.html">Network</option>
</select>
</p>
<button type="submit" id="next" onclick="WinOpen()">Next</button>
....
<script type="text/javascript">
function WinOpen() {
var url=document.redirect.selection.value
document.location.href=url
}
</script>
...

You can do something like this:

You will need to make sure the path/value is correct for your htmlpage based on the current page your on, so the values may need to change to something like: ./New_req_p2_web.html

<p>Application Type</p>
<select id="aList" name="selection">
<option value="">---Select Value---</option>
<option value="New_req_p2_web.html">External Web Application</option>
<option value="New_req_p2_web.html">Internal Web Application</option>
<option value="New_req_p2_mob.html">Mobile Application</option>
<option value="New_req_p2_net.html">Network</option>
</select>
<button type="submit" id="next" onclick="WinOpen()">Next</button>

<script type="text/javascript">
//THIS WILL OPEN IN A NEW WINDOW/TAB
function WinOpen() {
    var url = $('#aList').val();
    window.open(url);
}
//THIS WILL OPEN ON ITS SELF - if you use this remove the onclick for the button. 
$('#next').click(function () {
     var url = $('#aList').val();
     window.open(url, "_self");
});

</script>

Your path will need to be correct for the value, what i mean by this is if this file is in your desktop folder then your 'New_req_p2_web.html' will have to be in the same folder unless you change the pathing of your value.

The updated code here, I hope it's useful for you.

Thanks

<p>Application Type&nbsp
<select id="aList" name="selection">
  <option value="">---Select Value---</option>
  <option value="New_req_p2_web.html">External Web Application</option>
  <option value="New_req_p2_web.html">Internal Web Application</option>
  <option value="New_req_p2_mob.html">Mobile Application</option>
  <option value="New_req_p2_net.html">Network</option>
</select>
</p>
<button type="submit" id="next" onClick="WinOpen();">Next</button>

<script type="text/javascript">
  function WinOpen() {
    var url = document.getElementById("aList").value;
    document.location.href = url;
  }
</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM