Question

我制作了一个表单，当点击提交时，它会将您带到另一个网页，但我无法通过Javascript将变量（表单的值）从一个网页传输到另一个网页。

所以，当我点击提交按钮时，我想隐藏数据。

如何检查表单是否经过验证，然后才启动Jquery。使用当前逻辑，即使表单未启动，它也会启动Jquery。

最终，为标题和整个表单设置动画或隐藏，并将其更改为结果。

<head>
    <title>Food Web App</title>
    <link rel="stylesheet" type="text/css" href="appStyleQues.less">
    <link href='http://fonts.googleapis.com/css?family=Orbitron:500' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Mono:300' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="N:\Desktop\Javascript\App.js" type="text/javascript"></script>
</head>

<body>
    <div id="main">
        <header>
            <h1>I need some data</h1>
        </header>
        <div id="ques">
            <ul>
                <form name="myForm" method="get">
                    <li>What cuisine?(You can leave it empty)
                        <br>
                        <input list="Cuisines" class="normal" type="text" name="Cuisine" placeholder="Like Chinese" pattern="Chinese|Italian|American">
                        <datalist id="Cuisines" autocomplete="off">
                            <option value="Chinese"></option>
                            <option value="Italian"></option>
                            <option value="American"></option>
                        </datalist>
                    </li>
                    <li>On a scale of 1 to 10, how much hungry are you?
                        <br>
                        <input class="normal" type="number" name="hunger" min="1" max="10" required>
                    </li>
                    <li>
                        <input class="special" type="checkbox" name="Personality" value="Vegetarian" checked> Vegetarian
                        <input class="special" type="checkbox" name="Personality" value="Non-Vegetarian"> Non-Vegetarian
                    </li>
                    <li>On a scale of 1 to 10, how much healthy do you want the food to be?
                        <br>
                        <input class="normal" type="number" name="Calories" min="1" max="10" required>
                    </li>
                    <li>What will be the max cost of the food, per person?
                        <br>(Quality of the food will be affected)
                        <br>
                        <input class="normal" type="number" name="quality" placeholder=" Like 400" step="50" autocomplete="off" required>
                    </li>
                    <li>How many people?
                        <br>
                        <input class="normal" type="number" name="Amount of people" required>
                    </li>
                    <li>
                        <input class="normal" type="submit" onclick="return a();">
                    </li>
                </form>
            </ul>
        </div>
    </div>
</body>

</html>

Answer 1

以下是非常基本的功能，但会指出正确的方向：

$("form").submit(function(e){
    e.preventDefault();
    var url = "test2.html";
    var appendix = "?";
    var validated = false;
    // Validation
    $("form input").each(function() {
        // Validation stuff here.
        // A basic example:
        if ($(this).val() == "") {
            alert("Please add all fields.");
            return false;
        }
        else validated = true;
    })
    if (validated == true) {
        $("form [name]").each(function() {
            appendix += this.name + "=" + this.value + "&";
        })  
        window.location.href = url + appendix;  
    }   
})

您需要在提交按钮中添加一个值。

Answer 2

您可以将ID分配给所有输入标记，然后使用$('#idofinputfield').val()访问这些值。您还应该使用链接或按钮并在javascript中注册onclick事件处理程序

$( "#idofbuttonorlink" ).click(function() {
  alert( "Handler for .click() called." );

  //validation and further action

});

。如果你想继续使用提交按钮，你可以使用提交事件处理程序，它允许你在验证失败时取消提交：

$( "#idofsubmitbutton" ).submit(function( event ) {
   alert( "Handler for .submit() called." );

   //validation and further action

   event.preventDefault(); //use this function to cancel submission
});

单击提交按钮时的Jquery，如果表单已经过验证

2 个答案: