單擊提交按鈕（如果表單已驗證）時的jQuery
[英]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>
2 個解決方案
解決方案1
1 2015-08-28 13:18:49
以下是非常基本的功能，但會為您指明正確的方向：
$("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;
}
})
您將需要向提交按鈕添加一個值。
解決方案2
0 2015-08-28 12:56:21
您可以為所有輸入標簽分配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
});
我單擊提交按鈕時，用jQuery擴展了textarea，但未提交表單
[英]textarea expanded with jquery, not submitting the form when i click the submit button
jQuery Ajax當我單擊未在表單中的按鈕時提交表單
[英]Jquery Ajax Submit a form when i click a button which not been in the form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.