cần trợ giúp hợp nhất jquery cũ với biểu mẫu web mới

Question

Tôi xin lỗi vì tiêu đề của câu hỏi này vì tôi biết nó có vẻ hơi rộng. Thật không may, tôi vẫn còn thực sự mới để jquery và tôi đã có rất nhiều sự giúp đỡ trong quá khứ để thực hiện công việc này, và bây giờ tôi muốn thay đổi mọi thứ và tôi khá trong đầu của tôi.

Tôi có một trang web sống ở đây: http://www.rattletree.com Có biểu mẫu đăng ký bản tin nơi người dùng nhấp vào hộp email, tên và trường thành phố thả xuống cũng được điền. Điều này tất cả hoạt động tốt, nhưng cách nó hoạt động ngay bây giờ, thông tin được gửi trực tiếp đến địa chỉ email của tôi và tôi cần phải tự nhập người vào chương trình tiếp thị email của chúng tôi. Bây giờ tôi muốn có thông tin này được gửi trực tiếp đến chương trình tiếp thị qua email của chúng tôi bằng cách lấy thông tin cần thiết từ mã nhúng do chương trình cung cấp. Tôi đã làm việc trên nó trong một vài ngày, và đôi khi tôi quản lý để có được thông tin được gửi đến chương trình và không giấu các div và đôi khi tôi quản lý để ẩn các div và không nhận được mẫu gửi đúng. Tôi bị mất một chút. Tôi hy vọng ai đó có thể giúp tôi hợp nhất hai điều này.

Dưới đây là đoạn code làm việc cho trang web sống hiện tại đang gửi đến địa chỉ email của riêng tôi:

(trong tiêu đề)

<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> 

Kịch bản:

$(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(); 
    }); 
}); 

trong bao gồm ở cuối trang:

$(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; 
    }); 
}); 

Và cuối cùng ở đây là mã mà chương trình tiếp thị email đang cung cấp nơi tôi muốn gửi tên ở trên, thành phố và thông tin xin gửi đến:

<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> 

Cảm ơn bạn rất nhiều sự giúp đỡ nào!

Answer 1

Trang web chéo POST trong Javascript là một nguy cơ bảo mật (hãy tưởng tượng một trang web đang thực hiện các bài đăng trên trang web paypal với tập hợp cookie paypal của bạn mà bạn không biết).

Bạn phải thay đổi /includes/sendemail.php để hoạt động như một proxy, nhận đầu vào như nó bây giờ và gửi yêu cầu POST để madmimi.com

Xem ví dụ này: How to send HTTPS posts using php

Nếu mã trên câu trả lời đầu tiên trên trang đó hoạt động, sau đó bạn có thể thay đổi nó như thế này

/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); 
?> 

Giả định không có mã javascript trên trang biểu mẫu madmimi sửa đổi tên trường biểu mẫu (để đăng ký [thành phố] không được sửa đổi thành thứ khác như thành phố đăng ký trước khi gửi yêu cầu). Tất nhiên tất cả các yêu cầu sẽ xuất hiện để madimi khi đến từ máy chủ của bạn, không có cookie của người dùng thiết lập. Giải pháp trên trang tràn ngăn xếp sử dụng curl, do đó, để sử dụng curl đó phải có sẵn trong cài đặt PHP máy chủ của bạn (http://php.net/manual/en/book.curl.php). Các giải pháp khác có sẵn, nếu nó không được cài đặt.

Nếu bạn cũng muốn gửi email, như bạn đã làm, chỉ cần thêm mã này vào đầu email gửi hiện tại.php script, do đó, nó vẫn làm những gì nó đã làm, cộng với nó kết nối với các hình thức madmimi.

Bạn có thể cần phải trả lại nội dung nào đó từ tập lệnh PHP đến trang gọi (OK, DONE, SENT, bất cứ điều gì) như sendemail.php ban đầu của bạn, chỉ cần thêm vào cuối tập lệnh trước dòng?>.

Answer 2

Có một cách dễ dàng để đạt được điều này, sử dụng API của MadMimi và trình bao bọc PHP chính thức có sẵn here on GitHub.

Nó không liên quan đến bất kỳ thay đổi nào đối với jQuery hoặc CORS.

Họ có ví dụ về how to add new subscribers to lists đó là những gì bạn đang tìm kiếm.

tôi đã tuỳ chỉnh ví dụ cho bạn: (thêm video này vào /includes/sendemail.php)

<?php 
require('MadMimi.class.php'); 
$mailer = new MadMimi('YOUR USERNAME (OR E-MAIL ADDRESS)', 'YOUR API KEY'); 
$user = array('email' => $_REQUEST['emailFrom'], 'name' => $_REQUEST['yourName'], 'city' => $_REQUEST['yourCity'], 'add_list' => 'My List'); 
$mailer->AddUser($user); 
?> 

này giả định rằng bạn đã đặt MadMimi.class.php và Spyc .class.php tệp trong cùng thư mục với trình xử lý hiện tại của bạn, /includes/sendemail.php.

Hãy nhớ cắm tên người dùng và khóa API thực của bạn (bạn sẽ có thể nhận được từ MadMimi khi bạn đăng nhập).

Bạn thậm chí có thể rời khỏi kịch bản email hiện có trong đó và chỉ cần thêm các cuộc gọi API để MadMimi, và được thông báo mỗi khi ai đó đặt mua, nhưng không phải làm bất cứ điều gì :)