[英]Jquery when click on submit button, if the form is validated
我做了一个表单,当单击提交时,它会将您带到另一个网页,但是我无法通过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>
以下是非常基本的功能,但会为您指明正确的方向:
$("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;
}
})
您将需要向提交按钮添加一个值。
您可以为所有输入标签分配ID,然后使用$('#idofinputfield').val()
访问值。 您还应该使用链接或按钮并在javascript中注册onclick事件处理程序
$( "#idofbuttonorlink" ).click(function() {
alert( "Handler for .click() called." );
//validation and further action
});
。如果您想继续使用Submit按钮,则可以使用Submit事件处理程序,该事件处理程序允许您在验证失败时取消提交:
$( "#idofsubmitbutton" ).submit(function( event ) {
alert( "Handler for .submit() called." );
//validation and further action
event.preventDefault(); //use this function to cancel submission
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.