[英]Prevent page refresh and submit form data
因此,我正在尝试提交表单数据,但不希望页面更改/刷新。 同时,我希望完成后弹出一个jquery对话框。
这是我的原文:
<script>
$( function() {
$('#dialog-message').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$( "#subbutton" ).click(function( event ) {
event.preventDefault();
$.post("formaction.php",function(){
$('#dialog-message').dialog('open');
return false;
});
});
});
</script>
这会将空白数据提交给数据库,但是会插入新行。 删除event.preventDefault(); 提交所有数据,但页面更改为formaction.php。
我尝试进行轮询,但是我不确定如何正确进行轮询。 我将在另一台计算机上以少量方式提供该代码。
$( function() {
$('#dialog-message').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
});
$( "#subbutton" ).click(function( event ) {
$('#dialog-message').dialog('open');
event.preventDefault();
$(function poll(){
setTimeout( function(){
$.ajax({
type:'POST',
dataType: 'json',
url:'formaction.php',
success: function(data){
},
complete: poll
}),
},
5000);
})
/*
$.post("formaction.php",function(){
return false;
});
event.preventDefault();
*/
});
poll();
添加表格以获取更多详细信息
<div id="lostForm">
<form name="lostForm" method="post" action="formaction.php" enctype="multipart/form-data">
<h1> Owner Information</h1>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="First name" required>
<br> <br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Last name" required>
<br> <br>
<label for="mnumber">Mobile</label>
<input id="mnumber" name="mobilenumber" placeholder=" (###)###-####" required>
<br> <br>
<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="email@example.com" required>
<br>
<br>
<hr>
<h1> Pet Information </h1>
<br>
<label for="pname">Pet Name</label>
<input type="text" id="pname" name="petname" placeholder="Pet Name" required>
<br> <br>
<label for="petgen">Pet Gender</label>
<select name="petgen" id="petgen" required>
<option value="male"> Male </option>
<option value="female"> Female </option>
</select>
<br> <br>
<label for="pname">Pet Age</label>
<input type="text" id="page" name="petage" placeholder="How old is your pet?" required>
<br> <br>
<label for="primary">Primary Color</label>
<select name="color1" id="primary" required>
<option value="black"> Black </option>
<option value="brindle"> Brindle </option>
<option value="cream"> Cream </option>
<option value="red"> Red </option>
<option value="white"> White </option>
<option selected="selected" value="none"> --none-- </option>
</select>
<br> <br>
<label for="secondary">Second Color</label>
<select name="color2" id="secondary" required>
<option value="black"> Black </option>
<option value="brindle"> Brindle </option>
<option value="cream"> Cream </option>
<option value="red"> Red </option>
<option value="white"> White </option>
<option selected="selected" value="none"> --none-- </option>
</select>
<br> <br>
<label for="markings">Markings</label>
<input type="text" id="markings" name="marking" placeholder="Indetifiable Markings" optional>
<br><br>
<label for="fileToUpload">Upload Image:</label>
<br>
<input id="fileToUpload" type="file" name="fileToUpload">
<br>
<br>
<hr>
<h1> Location Lost </h1>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true" name="streetAdd"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true" name="city"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true" name="state"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true" name="zip"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
<button type="submit" value="Submit" name="submitbtn" id="subbutton">Submit </button>
</form>
您的ajax $.post()
函数缺少您要插入的数据。
最简单的方法是序列化表格:
...
event.preventDefault();
$.post("formaction.php", $('form').serialize(), function(){
$('#dialog-message').dialog('open');
});
现在, form
元素中的所有字段都将添加到帖子中。 如果您有多个表单,则可以使用表单的ID来获取正确的表单:
$.post("formaction.php", $('#your_form').serialize(), function(){
$('#dialog-message').dialog('open');
});
为此使用ajax。
$.ajax({
type: "POST",
url:"<?php yourpage.php;?> ",
data:your data,
success: function(html){
//show your message
}
});
您将需要使用:success回调函数。
$.post( "test.php", { name: "John", time: "2pm" })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
有一个简单的解决方案可以阻止重定向。 更改按钮的类型(#subbutton),添加属性type="button"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.