Question

因此，我在HTML页面上有一个表单，还有一个单独的按钮链接到该表单。我的问题是：当用户输入某个输入（在这种情况下为字符串）并单击按钮时，如何根据来自表单的相应用户输入将用户连接到其他HTML页面？我知道我必须使用javascript，但是任何特定的代码都将非常有用。谢谢！

添加我的代码：

<!doctype html>
<html>
<head>
    <title>Home</title>
    </head>

    <body>
            <form id = "user-info" onSubmit="myFunction()">
                <div class = "favorite-fruit">
                    <p>Enter your favorite fruit<br></p>
                        <input type="text" name="fav-fruit" id = "fruit"><br>
                </div>
                <div class="favorite-vegetable">
                    <p>Enter your favorite vegetable<br></p>
                        <input type="text" name="fav-vegetable" id="vegetable">
                </div>
            </form>
            <a class = "confirm" onSubmit="myFunction()">
                <button form= "user-info" type="button" name= "confirm-input">Confirm</button>
            </a>
        </div>


        <script type="text/javascript">
            function myFunction(){
                var firstFruit = document.getElementById("fruit").innerHTML;
                var secondVegetable = document.getElementById("vegetable").innerHTML;
                var f = firstFruit;
                var s = secondVegetable;

                if(f.value == "Apple" && s.value == "Broccoli"){
                    //GO TO "appleBroccoli.html"
                }
                else if(f.value == "Grapes" && s.value == "Carrots"){
                    //GO TO "grapesCarrots.html"
                }
                else if(f.value == "Strawberry" && s.value == "Kale"){
                    //GO TO "strawberryKale.html"
                }



            }



        </script>
      </body>
</html>

Answer 1

可以通过占用输入标签的值来完成：-

var value = $(element).val();

然后使用新值重置表单标签的action属性：-

$(formElem).attr("action",value+".html")

我想这对你有帮助。

Answer 2

您的表单中，用户信息没有提交按钮

在表单内添加<input type = 'submit' name='conform'>Confirm</input>

将表单的操作和方法设置为相应的目标HTML页面。

<form action='..target html' method ='get'>
</form>

如果输入为brocolli，则可以将表单操作更改为

document.getElementById('user-info').action = <new target>

如何使用JavaScript输入用户输入并链接到相应的HTML页面？

2 个答案: