I'm sending an GET AJAX call to Mailchimp from a JQuery modal with this scripts. How do i pass the user to the next fieldset if server response is succesful? Do i need to do it from the first javascript posted here or from the php code? I'm sorry for the long display below.
JS:
$('#reg_btn').on('click', function(){
$.ajax({
type: "POST",
url: 'subscribe.php',
dataType: 'json',
data: {
email: $('# .email').val(),
},
success: function(response) {
// User has been successfully subscribed
// Do something here
},
error: function (jqXHR, textStatus, errorThrown) {
var response = $.parseJSON(jqXHR.responseText);
// User has not been subscribed
// Show an error or do something else here
}
});
e.preventDefault();
return false;
});
PHP:
include 'Mailchimp.php';
use \DrewM\MailChimp\MailChimp;
$MailChimp = new MailChimp('your**api***key');
$response = [];
$list_id = 'list_id_goes_here';
function emailExistsMc($subscriberMail, $list_id){
global $MailChimp;
$subscriber_hash = $MailChimp->subscriberHash($subscriberMail);
$result = $MailChimp->get("lists/$list_id/members/$subscriber_hash");
if($result['status'] == '404') return false;
return true;
}
And finally my MODAL HTML+JS script:
<button type="submit" onclick="document.getElementById('id01').style.display='block'" > HERE IS MY BUTTON </button>
<!-- multistep form -->
<div id="id01" class="modalx modalx-style_set">
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">LOG IN</li>
<li>TERMS</li>
<li>INFO</li>
</ul>
<!-- fieldsets -->
<fieldset>
<input type="text" name="email" placeholder="Email" />
<input type="text" name="code" placeholder="Promo Code" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<input type="text" name="address" placeholder="Complete address" minlength="42" maxlength="42" />
<input type="button" name="previous" class="previous action-button" value="Back" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<input type="button" name="previous" class="previous action-button" value="Back" />
</fieldset>
</form>
<script>
//jQuery time
$(document).ready(function(){
var modalx = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalx) {
modalx.style.display = "none";
}
}
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})
})
</script>
