单击提交按钮（如果表单已验证）时的jQuery
[英]Jquery when click on submit button, if the form is validated
问题描述
I made a form, and when clicked on submit, it takes you to another webpage but i couldn't transfer the variables(values of form) from one webpage to another webpage through Javascript. 
我做了一个表单，当单击提交时，它会将您带到另一个网页，但是我无法通过Javascript将变量（表单的值）从一个网页转移到另一个网页。
So, i figured to hide the data, when submit button clicked. 因此，单击提交按钮时，我想隐藏数据。
How can i check if the form is validated, and only then initiate Jquery. 我如何检查表单是否经过验证，然后才启动Jquery。 With the current logic, it initiates the Jquery even if the form is not initiated. 使用当前逻辑，即使未启动表单，它也会启动Jquery。
Ultimately, animate or hide the heading and the whole form and change it to the result. 最终，对标题和整个表格进行动画处理或隐藏，然后将其更改为结果。
<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>
2 个解决方案
解决方案1
1 2015-08-28 13:18:49
The following is a VERY basic function but will point you in the right direction: 以下是非常基本的功能，但会为您指明正确的方向：
$("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;
}
})
You will need to add a value to your submit button. 您将需要向提交按钮添加一个值。
解决方案2
0 2015-08-28 12:56:21
you could assign ids to all input tags and then access the values using $('#idofinputfield').val() . 您可以为所有输入标签分配ID，然后使用$('#idofinputfield').val()访问值。 you should also use a link or button and register an onclick event handler in javascript 您还应该使用链接或按钮并在javascript中注册onclick事件处理程序
$( "#idofbuttonorlink" ).click(function() {
alert( "Handler for .click() called." );
//validation and further action
});
.if you want to keep using the submit button you can use the submit event handler which allows you to cancel the submission when the validation fails: 。如果您想继续使用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.