Potrzebuję pomocy w łączeniu starego jQuery roboczej z nowym webformem

Question

Przepraszam za tytuł tego pytania, ponieważ wiem, że wydaje się nieco szerszy. Niestety, wciąż jestem nowy w jquery i miałem dużo pomocy w przeszłości, aby to zadziałało, a teraz chcę zmienić rzeczy i jestem całkiem ponad moją głową.

Mam stronę internetową, która jest dostępna tutaj: http://www.rattletree.com Istnieje formularz rejestracji biuletynu, w którym po kliknięciu skrzynki e-mail użytkownika pola nazwy i miasta są również zapełniane. To wszystko działa dobrze, ale sposób, w jaki teraz działa, informacja jest wysyłana bezpośrednio na mój adres e-mail i muszę ręcznie wprowadzić osobę do naszego programu do e-mail marketingu. Chcę teraz, aby te informacje były wysyłane bezpośrednio do naszego programu do marketingu e-mailowego, pobierając potrzebne informacje z kodu umieszczonego w programie. Pracowałem nad tym przez kilka dni, a czasami udaje mi się uzyskać informacje wysyłane do programu i nie ukrywać elementów div, a czasami udaje mi się ukryć elementy div i nie uzyskać poprawnego wysłania formularza. Jestem trochę zagubiony. Mam nadzieję, że ktoś może mi pomóc odpowiednio połączyć te dwie rzeczy.

Oto kod roboczych dla bieżącej strony internetowej na żywo, że jest wysyłanie na mój adres e-mail:

(w nagłówku)

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

Skrypt:

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

w na dole strony:

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

I wreszcie tutaj jest kod, który program e-mail marketingu jest zapewnienie gdzie Ja chce wysłać powyższy nazwisko, miasto i informacje e-mail:

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

Dziękuję ogromnie za wszelką pomoc!

Answer 1

Przekroczenie strony POST w JavaScript jest zagrożeniem bezpieczeństwa (wyobrazić sobie stronę robiącą posty na witrynie PayPal z plikami cookie paypal, bez wiedzy użytkownika).

Trzeba zmodyfikować /includes/sendemail.php działać jako serwer proxy, odbierać wejść jak ma to miejsce teraz i wysłać żądanie POST do madmimi.com

Zobacz na przykład w ten sposób: How to send HTTPS posts using php

Jeśli kod na pierwszej odpowiedzi na tej stronie działa, to można go zmienić tak

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

Zakłada się, że na stronie formularza madmimi nie ma kodu javascript, który modyfikuje nazwy pól formularza (aby rejestracja [miasto] nie została zmieniona na coś innego, jak rejestracja miasta przed wysłaniem żądania). Oczywiście wszystkie żądania będą wyglądały na madimi jako przychodzące z twojego serwera, bez plików cookie użytkowników. Rozwiązanie na stronie przepełnienia stosu używa curl, więc aby użyć tego curl musi być dostępny w twoim serwerze Instalacja PHP (http://php.net/manual/en/book.curl.php). Inne rozwiązania są dostępne, jeśli nie są zainstalowane.

Jeśli chcesz również chcesz wysłać wiadomość e-mail, tak jak Ty, po prostu dodaj ten kod do aktualnej wiadomości e-mail.skrypt php, więc nadal robi to, co zrobił, a także łączy się z formą madmimi.

Prawdopodobnie powinieneś zwrócić coś ze skryptu PHP na stronę wywołującą (OK, DONE, SENT, cokolwiek), tak jak zrobił to twój oryginalny sendemail.php, po prostu dodaj to na końcu skryptu przed linią?>.

Answer 2

Istnieje prosty sposób, aby to osiągnąć, używając interfejsu API MadMimi i oficjalnego opakowania PHP, które jest dostępne pod numerem here on GitHub.

Nie powoduje żadnych zmian w jQuery ani w CORS.

Mają przykład how to add new subscribers to lists, którego właśnie szukasz.

Ja dostosował dla was przykładem: (Dodaj do tego /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); 
?> 

ta zakłada, że ​​umieściłeś MadMimi.class.php i SpyC .class.php pliki w tym samym katalogu, co bieżący uchwyt, /includes/sendemail.php.

Pamiętaj o podaniu prawdziwej nazwy użytkownika i klucza API (które powinieneś uzyskać od MadMimi po zalogowaniu).

Można nawet pozostawić istniejący skrypt email tam i po prostu dodać wywołanie API do MadMimi i być powiadamiany za każdym razem, gdy ktoś dokonuje subskrypcji, ale nie trzeba robić nic :)