如何在HTML/JavaScript中构建基于用户输入(文本框/下拉列表)的网站URL

How to construct a website URL based on User inputs (TextBox/Dropdown list) in HTML/JavaScript?

本文关键字：文本 输入 下拉列表 URL 网站 用户 JavaScript 构建 于用户 HTML      更新时间：2023-09-26

我是HTML和JavaScript的新手…

我需要你的帮助来构建基于HTML/JavaScript文本框输入的网站URL ?

我正在寻找一个HTML/JavaScript代码，让用户1)从下拉列表中选择一个选项2)输入一个数字

使用它生成URL

例如

:下拉列表有#年份选择和用户选择年份2014在文本框中，用户输入一个数字1234

下面是我的代码，但不能得到想要的结果:(

<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
    var iYear = $("select#SelectYear").val()
    var iMonth = $("select#SelectMonth").val()
    var iRollNum = $("select#EnterRollNum").val()
    document.getElementById("demo").innerHTML = <a href="some-website.com/url?year=iMonth&iYear&number=N&iRollNum&get=details"> Link </a>
}
</script>


<form id="myForm" action="some.php" method="GET">
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
    <input type="text" name="EnterRollNum" ID="EnterRollNum" />
    <input type="submit" value="submit" />
</form>
<p id="demo"></p>
<script>
$('#myForm').submit(function(e){
    e.preventDefault();
    var url = $(this).attr('action')+'?'+$('#myForm').serialize();
    $('#demo').html('<a href="'+url+'"> Link </a>');
});
</script>

您可以看到工作小提琴- http://jsfiddle.net/grvngr/fak1s583/

希望这对你有帮助!

相关文章：