在將整個表單作爲插入提交給數據庫之前，如何根據帶有Ajax的數據庫驗證表單選擇輸入值？

我有一個主人form這將被插入到mysql，在這個表格中，我有一個選擇選項，用戶可以選擇即一個房間，而選擇這個房間，他可以點擊一個按鈕來檢查數據庫，如果這個房間是可用。在將整個表單作爲插入提交給數據庫之前，如何根據帶有Ajax的數據庫驗證表單選擇輸入值？

到目前爲止，現在的結構是一種嵌套的形式，我知道，這通常不被建議/允許，但有沒有另外一種方法呢？

所有元素都假定爲主窗體的一部分。

我已經發布了我的代碼示例如下。

$(document).on("click", "#checkRoom", function() { 
 
    var data = $('#checkRoomForm').serialize(); 
 
    $.post('urlToMyPHP', data).success: function(response) { 
 
    // on success.. 
 
    $('#checkRoomResult').val(response); // show result 
 
    }; 
 
}); 
 

 
$(document).on("click", "#MasterSubmit", function() { 
 
    var data = $('#masterForm').serialize(); 
 
    $.post('urlToMyPHP', data); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="masterForm"> 
 

 
    <label>Name:</label> 
 
    <input id="checkName" name="checkName"> 
 

 

 
    <form id="checkRoomForm"> 
 
    <label>Room:</label> 
 
    <select id="selectRoom" name="selectRoom"> 
 
    <optgroup> 
 
     <option value="R1">Room 1</option> 
 
     <option value="R2">Room 2</option> 
 
     <option value="R3">Room 3</option> 
 
    </optgroup> 
 
    </select> 
 

 
    <input type="submit" value="Check Room" id="checkRoom"> 
 
    </form> 
 

 
    <label>Status:</label> 
 
    <input id="checkRoomResult" value=""> 
 

 
<input id="MasterSubmit" type="submit"> 
 
</form>

來源

2017-07-26 Cyber

您可以將內部形式更改爲師像下面從這裏分割例

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 

<form id="masterForm"> 

    <label>Name:</label> 
    <input id="checkName" name="checkName"> 


    <div id="checkRoomForm" name="checkRoomForm"> 
    <label>Room:</label> 
    <select id="selectRoom" name="selectRoom"> 
    <optgroup> 
     <option value="R1">Room 1</option> 
     <option value="R2">Room 2</option> 
     <option value="R3">Room 3</option> 
    </optgroup> 
    </select> 

    <input type="button" value="Check Room" id="checkRoom"> 
    </div> 

    <label>Status:</label> 
    <input id="checkRoomResult" value=""> 

<input id="MasterSubmit" type="submit"> 
</form> 
</body> 
</html>

，並獲得輸入數據

$(document).ready(function(){ 
    $("#checkRoom").click(function(){ 
    console.log($("#checkRoomForm :input").serialize()); 
    }); 
});

來源

2017-07-26 11:16:23

看起來很有趣，我要檢查出來。 – Cyber

在將整個表單作爲插入提交給數據庫之前，如何根據帶有Ajax的數據庫驗證表單選擇輸入值？

回答

相關問題