我正在尝试创建一个html表单,根据字段的输入生成一个url地址

时间:2015-02-19 17:43:56

标签: javascript html

我正在尝试为我的团队创建一个小型HTML文档,用于在我们的程序中创建用于测试目的的虚假设备。我们目前有一个链接可以执行此操作,但我们必须在URL字段中手动更改部分内容,然后再按Enter键进行处理。我提出了创建此表单的想法,以便我们确保正确填写URL的所有元素,然后将创建的URL复制并粘贴到浏览器中。地址的静态部分我们不会改变,然后我们会在' ='之后更新地址。标志。我们可以使用4种不同的环境。

我承认自从我上次使用HTML以来已经有一段时间了,所以我一直在尝试搜索像W3School这样的论坛和网站来查找我认为可以达到目的的代码段我瞄准的目的对于。以下代码是我到目前为止所获得的代码,但不能按照我预期的方式使用它。如果有人能就我错过或做错的事情提供建议或反馈,我会很感激。谢谢!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Item birth generator</title>
<script>
function mySubmit() {
    var addStart;
    var addPart1 = "part1=";
    var addPart2 = "&part2=";
    var addPart3 = "&part3=";
    var addPart4 = "&part4=";
    var addPart5 = "&part5=";
    var addPart6 = "&part6=";
    var addPart7 = "&part7=";
    var addPart8 = "&part8=";
    var myChoice = "choice";
    if (myChoice.value == "choice1")
        {addStart="https://address1?";}
    else if (myChoice.value == "choice2")
        {addStart="https://address2?";}
    else if (myChoice.value == "choice3")
        {addStart="https://address3?";}
    else (myChoice.value == "choice4")
        {addStart="https://address4?";}

    var address = addStart.concat(addPart1, "mInput1", addPart2, "mInput2", addPart3, "mInput3", addPart4, "mInput4", addPart5, "mInput5", addPart6, "mInput6", addPart7, "mInput7", addPart8, "mInput8");
document.getElementById("demo").innerHTML = address;
}
</script>
</head>

<body>
<font> <H3>Please fill in the appropriate fields and then click Generate to create a url for an item in the chosen environment.</H3></font>
<form target="_self" id="demo" name="item" method="post" onSubmit="return checkValue();">
<input type="radio" name="choice" id="ch1" value="choice1" checked> Choice 1  <input type="radio" name ="choice" id="ch2" value="choice2"> Choice 2  <input type="radio" name="choice" id="ch3" value="choice3"> Choice 3  <input type="radio" name ="choice" id="ch4" value="choice4"> Choice 4
<br><br>
<table>
<tbody>
<tr>
<td>Item Part 1</td>
<td><input type="text" name="mInput1" maxlength="13"></td>
</tr>
<tr>
<td>Item Part 2</td>
<td><input type="text" name="mInput2"></td>
</tr>
<tr>
<td>Item Part 3</td>
<td><input type="text" name="mInput3"></td>
</tr>
<tr>
<td>Item Part 4</td>
<td><input type="text" name="mInput4"></td>
<tr>
<td>Item Part 5</td>
<td><input type="text" name="mInput5"></td>
</tr>
<tr>
<td>Item Part 6</td>
<td><input type="text" name="mInput6"></td>
</tr>
<tr>
<td>Item Part 7</td>
<td><input type="text" name="mInput7"></td>
</tr>
<tr>
<td>Item Part 8</td>
<td><input type="text" name="mInput8"></td>
</tr>
<tr>
</tr>
<tr>
<td><input type="submit" value="Generate" onclick="mySubmit()"></td>
</tr>
</tbody>
</table>
<br>
<input type="text" size="250" name="address" value=''>
</form>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

此行有错误:

 var s.address = s.addStart.concat(addPart1, mInput1, addPart2, mInput2, addPart3, mInput3, addPart4, mInput4, addPart5, mInput5, addPart6, mInput6, addPart7, mInput7, addPart8, mInput8);

通过测试变量(使用console.log或警报输出)验证您使用的是有效的,并检查命令语法。 :)