使用 jQuery 对话框将表单发送到 php 脚本
Sending a form to a php script using jQuery dialog
我正在尝试使用 php 脚本发送电子邮件,该脚本在用户单击 'submit' 按钮时通过 jquery 对话框发送,但我无法将此脚本发送到工作。我有 html 格式的对话框:
<div id="join-dialog" class="join-dialog">
<p>Please fill in your details to join the mailing list</p>
<table>
<form action="" method="post">
<tr><td><label for="name">NAME</label></td><td><input id='form-name' type="text" name="name"/></td></tr>
<tr><td><label for="email">EMAIL</label></td><td><input id='form-email' type="email" name="email"/></td></tr>
<tr><td><label for="email">POSTCODE</label></td><td><input id='form-post' type="text" name="postcode"/></td></tr>
</form>
</table>
</div>
我有这个 jQuery:
$(function() {
function addUser(){
var name = document.getElementById("#form-name");
var email = document.getElementById('#form-email');
var post = document.getElementById('#form-post');
if(name !==0 || email!==0 || post!==0){
$.ajax({
url: 'sendemail.php',
type: 'POST',
data: ('name, email, post'),
success: function(){
document.getElementById('#join-dialog').innerHTML("<h2>Thank you for joining the mailing list</h2>");
}
});
}else{
document.getElementById('#join-dialog').append = "There was an error with your form details";
}
};
$( ".join-dialog" ).dialog({
dialogClass: "no-close",
autoOpen: false,
show: {
effect: "fade",
duration: 300
},
hide: {
effect: "fade",
duration: 300
},
modal: true,
buttons:{
'SUBMIT': addUser,
'CLOSE': function(){
$(this).dialog('close');
}
}
});
$( "#open1" ).click(function() {
$( ".join-dialog" ).dialog( "open" );
});
});
添加对话框按钮并执行代码以使用此处的 sendemail.php 发送电子邮件:
<?php
$name= $_POST['name'];
$postcode = $_POST['post'];
$email = $_POST['email'];
$email_to = 'xyz123@hotmail.com';
$email_subject = 'New mailing list subscriber';
$email_message = "Your new subscriber is: ".$name."\n"."Postcode: ".$postcode."\n"."Email: ".$email."\n";
mail($email_to, $email_subject, $email_message);
echo '<p style=\'font-size: 16px;\'>You have been added to Kaylee\'s mailing list!</p>';
echo '<br />';
echo '<br />';
?>
似乎有问题,我不知道是什么问题,如果有人能指出正确的方向,那将非常感谢。
你的html和css看起来不错,但是js有一些错误,可能还有一些:
function addUser() {
var name = $("#form-name").val(),
email = $('#form-email').val(),
post = $('#form-post').val();
if (name !== 0 || email !==0 || post !== 0) {
$.ajax({
url: 'sendemail.php',
type: 'post',
data: {
'name': name,
'email': email,
'post': post
},
success: function() {
$('#join-dialog').html("<h2>Thank you for joining the mailing list</h2>");
}
});
} else {
$('#join-dialog').append("There was an error with your form details");
}
}
$( ".join-dialog" ).dialog({
'dialogClass': "no-close",
'autoOpen': false,
'show': {
'effect': "fade",
'duration': 300
},
'hide': {
'effect': "fade",
'duration': 300
},
'modal': true,
'buttons': {
'submit': addUser,
'close': function() {
$(this).dialog('close');
}
}
});
$( "#open1" ).click(function() {
$( ".join-dialog" ).dialog("open");
});
我正在尝试使用 php 脚本发送电子邮件,该脚本在用户单击 'submit' 按钮时通过 jquery 对话框发送,但我无法将此脚本发送到工作。我有 html 格式的对话框:
<div id="join-dialog" class="join-dialog">
<p>Please fill in your details to join the mailing list</p>
<table>
<form action="" method="post">
<tr><td><label for="name">NAME</label></td><td><input id='form-name' type="text" name="name"/></td></tr>
<tr><td><label for="email">EMAIL</label></td><td><input id='form-email' type="email" name="email"/></td></tr>
<tr><td><label for="email">POSTCODE</label></td><td><input id='form-post' type="text" name="postcode"/></td></tr>
</form>
</table>
</div>
我有这个 jQuery:
$(function() {
function addUser(){
var name = document.getElementById("#form-name");
var email = document.getElementById('#form-email');
var post = document.getElementById('#form-post');
if(name !==0 || email!==0 || post!==0){
$.ajax({
url: 'sendemail.php',
type: 'POST',
data: ('name, email, post'),
success: function(){
document.getElementById('#join-dialog').innerHTML("<h2>Thank you for joining the mailing list</h2>");
}
});
}else{
document.getElementById('#join-dialog').append = "There was an error with your form details";
}
};
$( ".join-dialog" ).dialog({
dialogClass: "no-close",
autoOpen: false,
show: {
effect: "fade",
duration: 300
},
hide: {
effect: "fade",
duration: 300
},
modal: true,
buttons:{
'SUBMIT': addUser,
'CLOSE': function(){
$(this).dialog('close');
}
}
});
$( "#open1" ).click(function() {
$( ".join-dialog" ).dialog( "open" );
});
});
添加对话框按钮并执行代码以使用此处的 sendemail.php 发送电子邮件:
<?php
$name= $_POST['name'];
$postcode = $_POST['post'];
$email = $_POST['email'];
$email_to = 'xyz123@hotmail.com';
$email_subject = 'New mailing list subscriber';
$email_message = "Your new subscriber is: ".$name."\n"."Postcode: ".$postcode."\n"."Email: ".$email."\n";
mail($email_to, $email_subject, $email_message);
echo '<p style=\'font-size: 16px;\'>You have been added to Kaylee\'s mailing list!</p>';
echo '<br />';
echo '<br />';
?>
似乎有问题,我不知道是什么问题,如果有人能指出正确的方向,那将非常感谢。
你的html和css看起来不错,但是js有一些错误,可能还有一些:
function addUser() {
var name = $("#form-name").val(),
email = $('#form-email').val(),
post = $('#form-post').val();
if (name !== 0 || email !==0 || post !== 0) {
$.ajax({
url: 'sendemail.php',
type: 'post',
data: {
'name': name,
'email': email,
'post': post
},
success: function() {
$('#join-dialog').html("<h2>Thank you for joining the mailing list</h2>");
}
});
} else {
$('#join-dialog').append("There was an error with your form details");
}
}
$( ".join-dialog" ).dialog({
'dialogClass': "no-close",
'autoOpen': false,
'show': {
'effect': "fade",
'duration': 300
},
'hide': {
'effect': "fade",
'duration': 300
},
'modal': true,
'buttons': {
'submit': addUser,
'close': function() {
$(this).dialog('close');
}
}
});
$( "#open1" ).click(function() {
$( ".join-dialog" ).dialog("open");
});