Currently, I am independently studying jQuery and grappling with the Mailchimp Opt-In form code. Despite various existing queries on this topic, I am curious about why my own implementation, as a beginner in jQuery, is not functioning correctly. My intention is to troubleshoot and improve my code rather than copying solutions from others.
I have already included the post-json?u= and &c=? actions within my HTML code:
<div id="mc_embed_signup">
<form action="https://xxxxxxxxxx.com/subscribe/post-json?u=xxxxxx;id=xxxxx&c=?" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div id="colonna-sx">
<div class="mc-field-group gruppo-email">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="obbligo-email" class="obbligo-form" style="color:red">Campo obbligatorio</div>
</div>
<div class="mc-field-group gruppo-nome">
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
<div id="obbligo-nome" class="obbligo-form" style="color:red">Campo obbligatorio</div>
</div>
<div class="clear"></div>
<div class="mc-field-group input-group gruppo-consenso">
<input type="radio" value="Acconsento al trattamento dei miei dati personali." name="CONSENSO" id="mce-CONSENSO-0"><label for="mce-CONSENSO-0">Acconsento al trattamento dei miei dati personali.</label>
<div id="obbligo-consenso" class="obbligo-form" style="color:red">Campo obbligatorio</div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_6a6f3b7082472f64c07c2cad3_e065e0e3c4" tabindex="-1" value=""></div>
</div>
<div id="colonna-dx">
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="mc-button"></div>
</div>
<div class="clear"></div>
</div>
</form>
</div>
In order to display or hide error messages based on the inputs' validation status, I have implemented CSS rules setting "display:none" for the divs associated with the comments "THIS ONE" and the IDs #obbligo-email, #obbligo-nome, and #obbligo-consenso.
Below is the snippet of my jQuery code:
(function($) {
var $form = $("#mc-embedded-subscribe-form");
var stato1;
var stato2;
var stato3;
$("#mc-embedded-subscribe").bind("click", function(event) {
if (event) event.preventDefault();
if ($("#mce-EMAIL").val() != "") {
$("#obbligo-email").css({"display":"none"});
stato1=true;
} else {
$("#obbligo-email").css({"display":"block"});
stato1=false;
}
if ($("#mce-FNAME").val() != "") {
$("#obbligo-nome").css({"display":"none"});
stato2=true;
} else {
$("#obbligo-nome").css({"display":"block"});
stato2=false;
}
if ($("#mce-CONSENSO-0").is(":checked")) {
$("#obbligo-consenso").css({"display":"none"});
stato3=true;
} else {
$("#obbligo-consenso").css({"display":"block"});
stato3=false;
}
if (stato1 == true && stato2 == true && stato3 == true) {
register($form);
}
});
function register($form) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
cache: false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
});
};
}(jQuery));
Despite researching similar issues on StackOverflow without success, I seek assistance to comprehend any mistakes in my approach.
My goal is to maintain visible error messages when input fields are empty and set boolean variables accordingly for form submission. The form should be sent via Ajax without page reload upon successful validation, clearing the input fields simultaneously.
Some unanswered queries:
If I switch the "method" to "get," it results in a 404-page error.
If I include "$(document).ready( funtion(){", the JavaScript file fails to execute properly, which remains unclear to me despite attempts with alerts.