我有这个弹出式ajax表单,它不是发送数据并保留在同一页面上,而是发送数据但是从我的表单转到send.php文件。这是为什么?我在另一个站点上正确实现了几乎相同的表单。我不知道我在这里做错了什么......
形式:
<form id="form" action="send.php" name="form" method="post" >
<input type="text" id="name" name="name" value="" /><br />
<input type="text" id="email" name="email" value="" /><br />
<textarea name="message" cols="4" rows="4" id="message" ></textarea><br />
<input type="submit" value="" id="submit" title="Send!"/>
</form>
AJAX:
<script type="text/javascript">
$(document).ready(function () {
$('#form').ajaxForm({
beforeSubmit: validate
});
function validate(formData, jqForm, options) {
var name = $('input[name=name]').fieldValue();
var email = $('input[name=email]').fieldValue();
var message = $('textarea[name=message]').fieldValue();
if (!name[0]) {
alert('Please enter a value for name');
return false;
}
if (!email[0]) {
alert('Please enter a value for email');
return false;
}
if (!message[0]) {
alert('Please enter a value for message');
return false;
}
else {
$("#prima_form").fadeOut(1000, function () {
$(this).html("<img src='images/de_multumire.png'/>").fadeIn(2000);
});
var message = $('textarea[name=message]').val('');
var name = $('input[name=name]').val('');
var email = $('input[name=email]').val('');
}
}
});
</script>
send.php:
<?php
if($_POST){
$email = $_POST['email'];
$name = $_POST ['name'];
$message = $_POST ['message'];
// response hash
$ajaxresponse = array('type'=>'', 'message'=>'');
try {
// do some sort of data validations, very simple example below
$all_fields = array('name', 'email', 'message');
foreach($all_fields as $field){
if(empty($_POST[$field])){
throw new Exception('Required field "'.ucfirst($field).'" missing input.');
}
}
// ok, if field validations are ok
// now Send Email, ect.
// let's assume everything is ok, setup successful response
$subject = "New Contact";
//get todays date
$todayis = date("l, F j, Y, g:i a") ;
$message = " $todayis \n
Attention: \n\n
Please see the message below: \n\n
Email Address: $email \n\n
Message: $message \n\n
";
$from = "From: $email\r\n";
//put your email address here
mail("contact@xxx.ro", $subject, $message, $from);
//prep json response
$ajaxresponse['type'] = 'success';
$ajaxresponse['message'] = 'Thank You! Will be in touch soon';
} catch(Exception $e){
$ajaxresponse['type'] = 'error';
$ajaxresponse['message'] = $e->getMessage();
}
// now we are ready to turn this hash into JSON
print json_encode($ajaxresponse);
exit;
}
?>
我的js控制台给出了这个:
[17:38:03.840] [cycle] terminating; zero elements found by selector @ http://sociallab.ro/js/jquery_003.js:10
--
[17:38:16.012] POST http://sociallab.ro/send.php [HTTP/1.1 200 OK 218ms]
[17:38:16.204] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. @ http://sociallab.ro/send.php
谢谢!
答案 0 :(得分:1)
在纯Javascript中,您需要执行以下操作:
function sendWithAjax() {
var ajax = new XMLHttpRequest();
ajax.open("POST", "send.php", true);
然后从输入元素中读取值:
var email = document.getElementById('email').value;
var name = document.getElementById('name').value;
var message = document.getElementById('message').value;
您可以在调用.send()
之前验证表单(您可能需要使用escape()函数转义表单元素的内容)
并将它们放入send方法:
ajax.send("email="+ email +"&name="+ name +"&message="+ message);
并从表单代码中删除完整的表单标记。因此,您不需要提交按钮,因此将其更改为一个简单的按钮:
<input type="text" id="name" name="name" value="" /><br />
<input type="text" id="email" name="email" value="" /><br />
<textarea name="message" cols="4" rows="4" id="message" ></textarea><br />
<input type="submit" value="" id="submit" title="Send!" onclick="javascript:sendWithAjax()"/>
要获取ajax响应,请使用:
var response = ajax.responseText;
}
答案 1 :(得分:1)
尝试添加此内容:
$('#submit').click(function(){ return false; /* stop html form from submitting*/ })
我相信正在发生的事情是jquery是通过ajax发送表单数据,但是你没有像正常那样停止提交html表单的默认“提交”按钮。添加上面的代码应该停止提交按钮默认操作(将表单提交到send.php),从而使您保持在当前页面。
答案 2 :(得分:0)
类似的东西:
$(document).ready(function(event){
event.preventDefault();
$('#FORMID').ajaxForm({
type: 'POST',
dataType: 'json',
beforeSubmit: function(){
},
success: function(resp){
},
error: function(resp){
}
});
});
希望这会有所帮助。