jQuery的當點擊提交按鈕，如果窗體驗證

我做了一個表格，並點擊提交時，它把你帶到另一個網頁，但我不能從一個網頁傳遞變量（形式的值）到另一個網頁通過Javascript。jQuery的當點擊提交按鈕，如果窗體驗證

所以，我想通隱藏數據，當提交按鈕點擊。

我如何檢查的形式進行驗證，然後纔開始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>

來源

2015-08-28 Lavios

'N：\ Desktop'使用適當的模式，並顯示文件的代碼'App.js' – Satpal

我嘗試不同的方法很多的，但毫無效果酷似我想要的，所以我刪除了所有的代碼。目前，沒有javacript – Lavios

那麼，根本沒有_current logic_和_validation_。你認爲我們應該爲你寫整個JS嗎？在'

你可以分配ID的所有輸入標籤，然後使用$('#idofinputfield').val()訪問值。你也應該使用一個鏈接或按鈕，並登記在javascript

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

    //validation and further action 

});

一個onclick事件處理程序。如果您想使用提交按鈕，讓你可以使用提交事件處理程序，它允許您取消提交時驗證失敗：

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

    //validation and further action 

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

來源

2015-08-28 12:56:21 crxy11

下面是一個非常基本的功能，但將指向您在正確的方向：

$("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; 
    } 
})

你會需要爲提交按鈕添加一個值。

來源

2015-08-28 13:18:49

jQuery的當點擊提交按鈕，如果窗體驗證

回答

相關問題