如何將數據從模態窗體（JQUERY-UI）傳遞到mysql？

Question

我想從模式形式（JQuery-UI）傳遞一些數據到MySQL數據庫，我用POST方法嘗試了action =「」，但沒有出現在我的數據庫中。 我在谷歌搜索了3個第一頁中的每一個答案，但我沒有找到任何解決我的問題。我會附上我的代碼，以便你能看到我的代碼並糾正我。我使用的模式形式是關於新的客戶表單。我點擊我的頁面上的「添加客戶端」按鈕，彈出窗口（模式窗體）打開時會顯示一些html輸入信息，當我按提交時，我想要將該數據插入到我的數據庫中。 謝謝！

模式表單代碼：

<div id="dialog-form" title="Add new client"> 

         <form name="new_client" method="POST" action="addclient.php"> 
         <fieldset> 
          <label for="name">First Name</label> 
          <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all"> 
          <label for="last">Last Name</label> 
          <input type="text" name="last" id="last" class="text ui-widget-content ui-corner-all"> 
          <label for="address">Address</label> 
          <input type="text" name="address" id="address" class="text ui-widget-content ui-corner-all"> 
          <label for="num">Nr. of Address</label> 
          <input type="text" name="num" id="num" class="text ui-widget-content ui-corner-all"> 
          <label for="city">City</label> 
          <input type="text" name="city" id="city" class="text ui-widget-content ui-corner-all"> 
          <label for="postal">Postal Code</label> 
          <input type="text" name="postal" id="postal" class="text ui-widget-content ui-corner-all"> 
          <label for="state">State</label> 
          <input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all"> 


<!-- Allow form submission with keyboard without duplicating the dialog  button --> 
          <input type="submit" method="POST" name="insert-client" id="insert-client" tabindex="-1" style="position:absolute; top:-1000px"> 
</fieldset> 
</form> 
(and the div tag here) 

（和下面的結束標記）

AddClient.php

<?php 

require_once('mysqli_connect.php'); 
if(isset('insert-client')){ 
    $f_name = $_POST['name']; 
    $l_name = $_POST['last']; 
    $address = $_POST['address']; 
    $num = $_POST['num']; 
    $city = $_POST['city']; 
    $postal = $_POST['postal']; 
    $state = $_POST['state']; 


    $query = "INSERT INTO clients(clientID, name, last, address, num, city, postal, state) VALUES (NULL, $f_name, $l_name, $address, $num, $city, $postal, $state)"; 

    mysqli_query($dbc, $query); 
    mysqli_close($dbc); 
} 
?> 

我也tryed把下面這行代碼在我頭上的標籤模態形式javascript

$.post("addclient.php", $("new_client").serialize()); 

我張貼在這裏的頭標記的腳本代碼來檢查它

<script> 
$(function() { 
    var dialog, form, 

    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29 
    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, 
    name = $("#name"), 
    last = $("#last"), 
    address = $("#address"), 
    num = $("#num"), 
    city = $("#city"), 
    postal = $("#postal"), 
    state = $("#state"), 
    allFields = $([]).add(name).add(last).add(address).add(num).add(city).add(postal).add(state), 
    tips = $(".validateTips"); 

function updateTips(t) { 
    tips 
    .text(t) 
    .addClass("ui-state-highlight"); 
    setTimeout(function() { 
    tips.removeClass("ui-state-highlight", 1500); 
    }, 500); 
} 

function checkLength(o, n, min, max) { 
    if (o.val().length > max || o.val().length < min) { 
    o.addClass("ui-state-error"); 
    updateTips("Length of " + n + " must be between " + 
     min + " and " + max + "."); 
    return false; 
    } else { 
    return true; 
    } 
} 

function checkRegexp(o, regexp, n) { 
    if (!(regexp.test(o.val()))) { 
    o.addClass("ui-state-error"); 
    updateTips(n); 
    return false; 
    } else { 
    return true; 
    } 
} 


    function addUser() { 
    var valid = true; 
    allFields.removeClass("ui-state-error"); 

    valid = valid && checkLength(name, "name", 3, 16); 
    valid = valid && checkLength(name, "last", 3, 16); 
    valid = valid && checkLength(name, "address", 3, 16); 
    valid = valid && checkLength(name, "num", 3, 16); 
    valid = valid && checkLength(name, "city", 3, 16); 
    valid = valid && checkLength(name, "postal", 3, 16); 
    valid = valid && checkLength(name, "state", 3, 16); 

    if (valid) { 
    $("#clients tbody").append("<tr>" + 
     "<td>" + name.val() + "</td>" + 
     "<td>" + last.val() + "</td>" + 
     "<td>" + address.val() + "</td>" + 
     "<td>" + num.val() + "</td>" + 
     "<td>" + city.val() + "</td>" + 
     "<td>" + postal.val() + "</td>" + 
     "<td>" + state.val() + "</td>" + 
     "</tr>"); 
    dialog.dialog("close"); 

    } 
    return valid; 
} 

dialog = $("#dialog-form3").dialog({ 
    autoOpen: false, 
    height: 680, 
    width: 770, 
    modal: true, 
    buttons: { 
    "Προσθήκη": addUser, 
    Cancel: function() { 
     dialog.dialog("close"); 
    } 
    }, 
    close: function() { 
    form[ 0 ].reset(); 
    allFields.removeClass("ui-state-error"); 
    } 
}); 

form = dialog.find("form").on("submit", function(event) { 
    event.preventDefault(); 
    addUser(); 
}); 



$("#create-user3").button().on("click", function() { 
    dialog.dialog("open"); 
    }); 
}); 
</script> 

Answer 1

嘗試此方法

$(document).ready(function(){ 
     $("#new_client").click(function(){ 
      var str = $("form").serializeArray(); 
      $.ajax({ 
       type: "POST", 
       url: "http://example.com", 
       data: str, 
       success: function(value) { 
        // your logic 
       } 
      }); 
     }); 
    }); 

在代碼中，你錯過了叫「#new_client」