Joe*_*oel 5 javascript forms jquery
我为这个问题的标题道歉,因为我知道这似乎有点宽泛.不幸的是,我仍然是jquery的新手,过去我有很多帮助来完成这项工作,现在我想要改变一些事情,而且我很想知道.
我有一个网站在这里:http://www.rattletree.com 有一个简报注册表单,当用户点击电子邮箱时,名称和城市字段也会下拉以填充.这一切都很好,但它现在的工作方式,信息直接发送到我的电子邮件地址,我需要手动输入该人进入我们的电子邮件营销计划.我现在希望通过从程序提供的嵌入代码中获取所需信息,将此信息直接发送到我们的电子邮件营销计划.我已经工作了几天,有时我设法将信息发送到程序而不是隐藏div,有时我设法隐藏div并且没有正确发送表单.我有点失落.我希望有人可以帮我正确合并这两件事.
以下是发送到我自己的电子邮件地址的当前实时网站的工作代码:
(在标题中)
<div class="outeremailcontainer">
<div id="emailcontainer">
<?php include('verify.php'); ?>
<form action="../index_success.php" method="post" id="sendEmail" class="email">
<h3 class="register2">Newsletter Signup:</h3>
<ul class="forms email">
<li class="name">
<label for="yourName">Name: </label>
<input type="text" name="yourName" class="info" id="yourName" value="<?php echo $_POST['yourName']; ?>" /><br />
</li>
<li class="city"><label for="yourCity">City: </label>
<input type="text" name="yourCity" class="info" id="yourCity" value="<?php echo $_POST['yourCity']; ?>" /><br />
</li>
<li class="email">
<label for="emailFrom">Email: </label>
<input type="text" name="emailFrom" class="info" id="emailFrom" value="<?php echo $_POST['emailFrom']; ?>" />
<?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
?>
</li>
<li class="buttons email">
<button type="submit" id="submit">Send</button>
<input type="hidden" name="submitted" id="submitted" value="true" />
</li>
</ul>
</form>
<div class="clearing">
</div>
</div>
</div>
剧本:
$(document).ready(function () {
$('#emailFrom').focus(function () {
if ($('#overlay').length) {
return;
} // don't keep adding overlays if one exists
$('#sendEmail').find('.name, .city').slideDown(300, function () {
$(this).show();
});
$('.outeremailcontainer').css({
position: 'relative',
bottom: 0,
left: 0,
zIndex: 1001
});
$('<div id="overlay"></div>').appendTo('body');
});
$('#overlay').live('click', function () {
$('#sendEmail').css({
backgroundColor: 'transparent'
}).find('.name, .city').slideUp(300);
$('.outeremailcontainer').css({
position: 'static'
});
$('#overlay').remove();
});
});
在页面底部的包含中:
$(document).ready(function () {
$("#submit").click(function () {
$(".error").hide();
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailFromVal = $("#emailFrom").val();
if (emailFromVal == '') {
$("#emailFrom").after('<span class="error"><br />You forgot to enter the email address to send from.</span>');
hasError = true;
} else if (!emailReg.test(emailFromVal)) {
$("#emailFrom").after('<span class="error"<br />>Enter a valid email address to send from.</span>');
hasError = true;
}
var yourNameVal = $("#yourName").val();
if (yourNameVal == '') {
$("#yourName").after('<span class="error"><br />You forgot to enter your name.</span>');
hasError = true;
}
var yourCityVal = $("#yourCity").val();
if (yourCityVal == '') {
$("#yourCity").after('<span class="error"><br />You forgot to enter your city.</span>');
hasError = true;
}
if (hasError == false) {
$(this).hide();
$("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
$.post("/includes/sendemail.php",
//emailTo: emailToVal,
{
emailFrom: emailFromVal,
yourName: yourNameVal,
yourCity: yourCityVal
},
function (data) {
$("#sendEmail").slideUp("normal", function () {
$("#sendEmail").before('<h3 class="register2">Thank you! You\'re on the email list!</h3><p class="emailbox">Click <a href="http://rattletree.com/Songs/Live_EP/Chikende.mp3">HERE</a> for your free song.</p>');
});
}
);
}
return false;
});
});
最后,这里是电子邮件营销计划提供的代码,我希望将上述名称,城市和电子邮件信息发送到:
<form action="https://madmimi.com/signups/subscribe/66160" method="post" id="mad_mimi_signup_form">
<fieldset>
<div class="mimi_field text email required">
<label for="signup_email">Email</label>
<input id="signup_email" name="signup[email]" type="text" placeholder="you@example.com" class="required">
<div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
</div>
<div class="mimi_field text required">
<label for="signup_name" id="wf_label">Name</label>
<input id="signup_name" name="signup[name]" type="text" class="required">
<div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
</div>
<div class="mimi_field text required">
<label for="signup_city" id="wf_label">City</label>
<input id="signup_city" name="signup[city]" type="text" class="required">
<div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
</div>
<div class="mimi_field action">
<input id="webform_submit_button" value="Sign up!" type="submit" class="submit" data-default-text="Sign up!" data-submitting-text="Sending…" data-invalid-text="? You forgot some required fields">
</div>
</fieldset>
</form>
非常感谢您的帮助!
Javascript 中的跨站点 POST 存在安全风险（想象一下，一个网站在您不知情的情况下使用您设置的 Paypal Cookie 在 Paypal 网站上发帖）。
您必须修改 /includes/sendemail.php 以充当代理，像现在一样接收输入并将 POST 请求发送到 madmimi.com
例如，请参阅： How to send HTTPS posts using php
如果该页面上第一个答案的代码有效，那么您可以像这样更改它
/includes/sendemail.php
<?php
$postfields = array('signup[email]'=>$_REQUEST['emailFrom'], 'signup[name]'=>$_REQUEST['yourName'], 'signup[city]'=>$_REQUEST['yourCity']);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://madmimi.com/signups/subscribe/66160');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postFields);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$result = curl_exec($ch);
?>
这假设 madmimi 表单页面上没有 javascript 代码来修改表单字段名称（以便在发送请求之前，signup[city] 不会被修改为其他内容，例如 signup-city）。当然，所有请求在 madimi 看来都是来自您的服务器，没有设置用户的 cookie。堆栈溢出页面上的解决方案使用了curl，因此要使用curl，您的服务器PHP安装中必须可用（http://php.net/manual/en/book.curl.php）。如果未安装，也可以使用其他解决方案。
如果您也想发送电子邮件，就像您所做的那样，只需将此代码添加到当前 sendemail.php 脚本的顶部，这样它仍然会执行其操作，并且它会连接到 madmimi 表单。
您可能需要从 PHP 脚本返回一些内容到调用页面（OK、DONE、SENT，等等），就像您原来的 sendemail.php 所做的那样，只需将其添加到脚本末尾的 ?> 行之前。