AJAX/JS:抓取多个输入字段而不刷新或点击按钮,php会回显该值
AJAX/JS: Grabbing multiple input fields without refresh or button click and php echoing the value
我目前使用Ajax/JS提交表单,无需刷新页面或点击按钮。我已经用keyup
设置了一个定时器来触发该功能。我已经用一个输入字段测试了它,效果很好,但现在添加了其他输入字段,我没有得到PHP响应的结果。我已经用firefox bug工具进行了检查,结果正在存储中。我不确定这是JS还是PHP的问题。
在用户停止键入后,如何正确地回显输入字段的值?示例
JS/AAJAX
<script>
$(document).ready(function() {
var timer = null;
var dataString;
function submitForm(){
$.ajax({ type: "POST",
url: "index.php",
data: dataString,
success: function(result){
$('#special').html('<p>' + $('#resultval', result).html() + '</p>');}
});
return false;
}
$('#contact_form').on('keyup', function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 2000);
var name = $("#contact_name, #email, #phone, #address, #website").val();
dataString = 'name='+ name;
});
});
</script>
HTML/PHP代码段
<form action="" method="post" enctype="multipart/form-data" id="contact_form" name="form4">
<div class="row">
<div class="label">Contact Name *</div> <!-- end .label -->
<div class="input">
<input type="text" id="contact_name" class="detail" name="contact_name" value="<?php echo isset($_POST['contact_name'])? $_POST['contact_name'] : ''; ?>" />
<div id="special"><span id="resultval"><? echo $_POST['contact_name']; ?></span></div>
</div><!-- end .input-->
</div><!-- end .row -->
<div class="row">
<div class="label">Email Address *</div> <!-- end .label -->
<div class="input">
<input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" />
<div id="special"><span id="resultval"><? echo $_POST['email']; ?></span></div>
</div><!-- end .input-->
</div><!-- end .row -->
您需要构建数据,而不是尝试进行批量分配。例如,您当前有:
var name = $("#contact_name, #email, #phone, #address, #website").val();
jquery应该在它匹配的第一个标识符上匹配,很可能是id为contact_name的元素,这将是name具有的唯一值,因为您希望在其中获得几个表单字段的数据。
事实上,您根本不需要构建dataString,因为您的数据将通过表单通过邮件提交。
重写JS:
$(document).ready(function() {
var timer = null;
var dataString;
function submitForm(){
$.ajax({ type: "POST",
url: "index.php",
dataType: 'json',
success: function(result){
$('#special').html('<p>' + $('#resultval', result).html() + '</p>');}
});
return false;
}
$('#contact_form').on('keyup', function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 2000);
});
});
在index.php中,您可以访问$_POST数组中的表单值,例如$_POST['contact_name']。
相关文章:
- 通过ajax到php文件获取单选按钮值
- PHP Javascript显示/隐藏按钮不工作
- 使用加号按钮添加多个文本框,并通过PHP提交
- 基于文本jquery php更改按钮
- 无法在PHP中找到确认按钮
- 单击Dojo按钮执行PHP脚本
- 当客户端将两个按钮的javascript函数参数修改为相同时,SQL/PHP会更新多行
- 类似按钮增量计数器不工作.PHP,AJAX,MySQL,javascript
- 如何在标题上创建弹出框,当点击关闭按钮时,不使用jquery或php在网站中显示
- 表单中的提交按钮在 PHP 打印中不起作用
- PHP到JavaScript图表;显示w/按钮
- (PHP)克隆按钮上的按钮点击计数器
- 更改PHP中禁用按钮的外观
- PHP If Else-隐藏按钮
- 在按钮'上运行PHP代码;s onclick事件,或者使用Ajax
- 停止直接执行php代码而不点击按钮
- 如何通过ajax php将图像上传到服务器本地目录,其中html表单haven't任何传统的提交按钮
- 取消按钮php表单jquery
- 如何为“下一步”创建一个永无止境的循环?奥得河“prev"按钮(php / jquery)
- 单选按钮 php 开机自检