0
我正在为新用户和管理员的登记弹出形式。用户将转到new.php。该网站以表格的形式包含现有用户的列表以及“创建新用户”按钮。点击'创建新用户'按钮，它将显示一个弹出窗体。提交表单后，页面将自行刷新并更新现有的用户表。如何将jquery ui模式表单提交到数据库中？
做这一切，我使用jQuery UI的模式窗体演示。
，因为它工作正常演示。但演示没有保存数据。每当页面刷新时，提交的数据将消失。它没有去数据库。我如何将数据传递到数据库中？
new.php（对话）
<script type="text/javascript">
$(function() {
var name = $("#name"),
tel = $("#tel"),
email = $("#email"),
username = $("#username"),
password = $("#password"),
allFields = $([]).add(name) .add(tel) .add(email) .add(username) .add(password),
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;
}
}
$("#dialog-form").dialog({
autoOpen: false,
height: 600,
width: 450,
modal: true,
buttons: {
"Create": function() {
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(name, "name", 3, 80);
bValid = bValid && checkLength(tel, "tel", 10, 11);
bValid = bValid && checkLength(email, "email", 6, 80);
bValid = bValid && checkLength(username, "username", 4, 20);
bValid = bValid && checkLength(password, "password", 5, 16);
bValid = bValid && checkRegexp(name, /^([a-zA-Z ])+$/, "Name may consist of a-z, space only.");
bValid = bValid && checkRegexp(tel, /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/, "eg. 012-976-9422");
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]");
bValid = bValid && checkRegexp(username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (bValid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + tel.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + username.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
$(this).dialog("close");
}
},
Cancel: function() { $(this).dialog("close"); }
},
close: function() { allFields.val("").removeClass("ui-state-error"); }
});
$("#create-user")
.button()
.click(function() {
$("#dialog-form").dialog("open");
});
});
</script>
</head>
new.php（形式&表）
<!--BUTTON-->
<button id="create-user">Create new user</button>
<!--DIALOG FORM-->
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Full Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="tel">Phone Number</label>
<input type="tel" name="tel" id="tel" class="text ui-widget-content ui-corner-all"/>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
<label for="name">Username</label>
<input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
Admin
<input id="radio1" name="admin" type="radio" class="radio-btn" value="admin" />
User
<input id="radio2" name="user" type="radio" class="radio-btn" value="user" />
<script type="text/javascript" defer="defer">
<!--
if(document.getElementById){
if (option1 != ""){
// Radiobutton "No" should be selected.
document.getElementById('radio1').checked = false;
document.getElementById('radio2').checked = true;
}
else if (option2 != ""){
// Radiobutton "Yes" should be selected.
document.getElementById('radio1').checked = false;
document.getElementById('radio2').checked = true;
}
}
// -->
</script>
</fieldset>
</form>
</div>
<!--TABLE-->
<div id="users-contain" class="ui-widget">
<p style="float:left;">Existing Users:</p>
<br />
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th width="26%">Nama</th>
<th width="14%">No. Telefon</th>
<th width="25%">Email</th>
<th width="19%">Username</th>
<th width="16%">Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td></td>
<td>[email protected]</td>
<td>john89</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
请格式化你的代码，以便我们可以看到它之前。 @jsve我已经编辑:) –
。将来，在发布代码之前格式化代码会很好。 – Syaa
谢谢（我们不能帮助你，如果我们无法理解你的代码。） –