[英]Stay on page after submit form
目的是一旦单击了提交按钮,而不是发送send.php,它将仅保留页面,我什至不希望页面重新加载。 如果你们有另一种方法可以做到这一点,那就太好了。
我的Ajax代码
$("#sendtxt").click(function(e) {
e.preventDefault();
var phonenum = $("#phonenum").val();
var provider = $("#provider").val();
var message = $("#message").val();
$.ajax({
type : 'POST',
data : dataString,
url : 'send.php',
success : function(data) {
alert(data);
}
});
});
我的表格代码
<form name="reqform" action="" method="post">
<h1>Phone Number:
<input name="phonenum" id="phonenum" type="text" class="txtbox-style" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required/>
<select name = "provider" id ="provider" class="txtbox-style" required>
<option value="@sms.mycricket.com">Cricket Wireless</option>
</select>
<br/>
Message:
<input name="message" id="message" type="text" class="txtbox-style"/>
<br/>
How many times?
<input name="amount" id="amount" type="number" min="1" max="20" class="txtbox-style" required/>
<br />
<input type="submit" id="sendtxt" name="sendtxt" class="btn-style" value="Start Sending" />
</h1>
</form>
我的send.php
<?php
$to = $_POST["phonenum"];
$provider = $_POST["provider"];
$subject = 'Hi';
$message = $_POST["message"];
$headers = 'From: Hello' . phpversion();
mail($to . $provider, $subject, $message, $headers);
?>
您的数据属性不正确,没有发送任何内容。 您可以这样尝试,它将起作用:
您必须在页面中包含jQuery,您可以使用以下代码行将其放置在脚本上方:
<script>
$(document).ready(function(){
$('input[name="phonenum"]').keyup(function(e) {
if (/\D/g.test(this.value)) {
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});
$("#sendtxt").click(function(e) {
e.preventDefault();
var phonenum = $("#phonenum").val();
var provider = $("#provider").val();
var message = $("#message").val();
$.ajax({
type : 'POST',
data : {
provider : provider,
// ^key that appears in post
message : message,
// ^var you fetched before from the input
phonenum : phonenum
},
url : 'send.php',
success : function(data) {
alert(data);
console.log('Success');
},
error : function(xhr, err) {
console.log("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
console.log("responseText: " + xhr.responseText);
}
});
});
});
</script>
编辑:
检查您的控制台是否有错误(chrome中为F12),如果有错误,它将看起来像这样或类似的东西:
如果ajax成功,则至少会有“成功”
另一个编辑:
将您的表单放在<h1>
标记之外,像这样使用它:
<h1>Phone Number:</h1>
并删除表单末尾的</h1>
。
我认为最好的方法是使用jquery $.post
方法
$("form").submit(function(e) {
e.preventDefault();
$.post('send.php', $( this ).serialize()).done(function(data){
alert(data);
});
}
http://api.jquery.com/serialize/
http://api.jquery.com/jQuery.post/
**更新**
js小提琴示例:
我更喜欢绑定表单的submit
事件(因为用户可能会在聚焦的<input>
元素上按回车,而不是通过单击<input type="submit">
),此外还有一种更简单的数据收集方法:
$("form").submit(function(e) {
e.preventDefault();
$.ajax({
type : 'POST',
data : $(this).serialize(),//Here we collect all entered data
url : 'send.php',
success : function(data) {
alert(data);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.