ho bisogno di aiuto per unire il vecchio jquery funzionante con il nuovo modulo web

Question

Mi scuso per il titolo di questa domanda perché so che sembra un po 'generica. Sfortunatamente, sono ancora molto nuovo in jQuery e in passato ho avuto un sacco di aiuto per fare questo lavoro, e ora voglio cambiare le cose e sono abbastanza sopra la mia testa.

Ho un sito Web che è attivo qui: http://www.rattletree.com C'è il modulo di iscrizione alla newsletter in cui quando un utente fa clic sulla casella di posta elettronica, i campi nome e città vengono visualizzati anche per essere compilati. Funziona tutto bene, ma come funziona ora, le informazioni vengono inviate direttamente al mio indirizzo email e devo inserire manualmente la persona nel nostro programma di email marketing. Ora desidero che queste informazioni vengano inviate direttamente al nostro programma di email marketing prendendo le informazioni necessarie dal codice di incorporamento fornito dal programma. Ci ho lavorato per alcuni giorni, ea volte riesco a ottenere le informazioni inviate al programma e non nascondere i div e a volte riesco a nascondere i div e non ottenere correttamente il modulo inviato. Sono un po 'perso. Spero che qualcuno possa aiutarmi a fondere correttamente queste due cose.

Ecco il codice di lavoro per l'attuale sito web in diretta che sta inviando al mio indirizzo e-mail:

(nell'intestazione)

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

Lo script:

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

in un include nella parte inferiore della pagina:

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

E infine ecco il codice che il programma di email marketing sta fornendo in cui Sono voler inviare il nome al di sopra, della città, e mail a:

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

Grazie molto per qualsiasi aiuto!

Answer 1

Il POST di cross site in Javascript è un rischio per la sicurezza (immagina un sito Web che pubblica post sul sito di PayPal con i cookie di PayPal impostati, senza che tu lo sappia).

è necessario modificare /includes/sendemail.php di agire come un proxy, ricevere input come fa ora e invia la richiesta POST per madmimi.com

Si veda ad esempio questo: How to send HTTPS posts using php

Se il codice a prima risposta in quella pagina funziona, allora si può cambiare in questo modo

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

Questo presuppone che non vi sia alcun codice javascript sulla pagina del modulo madmimi che modifica i nomi dei campi del modulo (in modo che la registrazione [città] non venga modificata in qualcos'altro come la città di registrazione prima di inviare la richiesta). Naturalmente tutte le richieste sembreranno a madimi come arrivate dal tuo server, senza i cookie degli utenti impostati. La soluzione nella pagina di overflow dello stack utilizza curl, quindi per utilizzare tale arricciatura deve essere disponibile nell'installazione PHP del server (http://php.net/manual/en/book.curl.php). Altre soluzioni sono disponibili, se non è installato.

Se si anche si desidera inviare l'e-mail, come hai fatto, basta aggiungere questo codice in cima al sendemail corrente.script php, quindi fa ancora quello che ha fatto, in più si connette al modulo madmimi.

Probabilmente è necessario restituire qualcosa dallo script PHP alla pagina chiamante (OK, FATTO, INVIATO, qualunque cosa) come ha fatto il tuo sendemail.php originale, basta aggiungere quello alla fine dello script prima della riga?>.

Answer 2

C'è un modo semplice per raggiungere questo obiettivo, utilizzando l'API di MadMimi e il relativo wrapper PHP ufficiale che è disponibile here on GitHub.

Non comporta alcuna modifica a jQuery o CORS.

Hanno un esempio di how to add new subscribers to lists che è quello che stai cercando.

Ho personalizzato l'esempio per voi: (aggiungi questo a /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); 
?> 

Questo presuppone che si è posto il MadMimi.class.php e Spyc .class.php file nella stessa directory del gestore corrente, /includes/sendemail.php.

Assicurati di collegare il tuo vero nome utente e la chiave API (che dovresti poter ottenere da MadMimi dopo aver effettuato l'accesso).

Si potrebbe anche lasciare lo script di posta elettronica esistente in là e basta aggiungere la chiamata API per MadMimi, e una notifica ogni volta che qualcuno si abbona, ma non c'è bisogno di fare nulla :)