I attempted to transmit JSON data to PHP for email processing, but encountered an issue where the process veered into the 'else' condition during debugging. Here is the code snippet:
HTML
<form id="cbp-mc-form" class="cbp-mc-form" method="post">
<div class="cbp-mc-column">
<label for="name">Name (*)</label>
<input type="text" minlength="2" name="name" required="true" placeholder="John Doe">
<label for="phone">Phone Number</label>
<input type="text" name="phone" placeholder="+54 11 999 999">
<label for="email">Email Address (*)</label>
<input type="text" name="email" required="true" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2a7a1b7a092b6bdbfb3bbbcfcb7aaa6">[email protected]</a>">
</div>
<div class="cbp-mc-column">
<label for="country">Country (*)</label>
<select id="country" name="country" required>
<option value="">Choose a country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="ES">Spain</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<label>Scope of Work (*)</label>
<select id="scope" name="scope" required>
<option value="">Choose scope</option>
<option value="UX / IA / Strategy">UX / IA / Strategy</option>
<option value="Design">Design</option>
<option value="Development">Development</option>
<option value="Other">Other</option>
</select>
<label>Estimated Budget (*)</label>
<select id="budget" name="budget" required>
<option value="">Choose a budget</option>
<option value="Less than u$s10k">Less than u$s10k</option>
<option value="u$s10k-20k">u$s10k-20k</option>
<option value="u$s20k-50k">u$s20k-50k</option>
<option value=">u$s50k-100k">u$s50k-100k</option>
<option value="">More than +u$s100k</option>
</select>
</div>
<div class="cbp-mc-row">
<div id="g-recaptcha" class="g-recaptcha" data-sitekey="6LcjmAsTA12QOrP3RYXRjMLwM-bWXVEukSkvNh"></div>
<label for="message">Message (*)</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="cbp-mc-submit-wrap">
<p>* Mandatory Fields</p>
<input type="submit" id="submit_btn" class="cbp-mc-submit" value="Enviar">
</div>
</form>
The JavaScript component:
$(document).ready(function() {
$("#submit_btn").on('click',function(e) {
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js", function() {
$("#cbp-mc-form").validate({
debug: true,
rules: {
"name": {
required: true,
minlength: 2
},
"email": {
required: true,
email: true
},
"country": {
required: true
},
"scope": {
required: true
},
"budget": {
required: true
},
"message": {
required: true,
rangelength: [50,250]
}
},
messages: {
"name": {
required: "Please enter your name.",
minlength: "Your name must have 2 digits at least."
},
"country": {
required: "Choose your country."
},
"scope": {
required: "Specify the scope of your project."
},
"email": {
required: "Enter an email.",
email: "Enter a valid email format"
},
"budget": {
required: "Select a budget that best suits your needs."
},
"message": {
required: "Share your needs about the project.",
maxlength: "Character limitation is about 400"
}
}
});
console.log($("#cbp-mc-form").valid());
if($("#cbp-mc-form").valid()) {
post_data = {
'user_name': $('input[name=name]').val(),
'user_email': $('input[name=email]').val(),
'phone': $('input[name=phone]').val(),
'country': $('select[name=country]').val(),
'scope': $('select[name=scope]').val(),
'budget': $('select[name=budget]').val(),
'message': $('textarea[name=message]').val(),
'captcha': grecaptcha.getResponse()
};
$.ajax({
type: "POST",
url: "php/contact_me.php",
async: true,
data: post_data ,
dataType: 'json',
success: function (data) {
console.log("everything looks ok" + data);
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) {
return; // it's not really an error
} else {
console.log("You're Bot");
}
}
});
}
});
e.preventDefault();
});
});
While troubleshooting, I diligently logged all pertinent information in the console to pinpoint any issues, yet upon form submission, the unexpected message appeared: console.log("You're Bot"). What could be the underlying cause?
Additionally, I employed the 'preventDefault' statement to ensure the page doesn't refresh upon form submission.