In a contact data submission form, I previously had a input
in which the user entered their country. Now I had to change the input
for a select
, for the user to choose the country from a list.
Aesthetically everything works fine, but what does not work is sending the form.
HTML
<label>
<select name="country" id="country" required>
<option value="" disabled selected hidden>País</option>
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia </option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cuba">Cuba</option>
<option value="Ecuador">Ecuador</option>
<option value="El Salvador">El Salvador</option>
<option value="Guayana Francesa">Guayana Francesa</option>
<option value="Granada">Granada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guayana">Guayana</option>
<option value="Haití">Haití</option>
<option value="Honduras">Honduras</option>
<option value="Jamaica">Jamaica</option>
<option value="México">México</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Panamá">Panamá</option>
<option value="Perú">Perú</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="República Dominicana">República Dominicana</option>
<option value="Surinam">Surinam</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select>
</label>
JS
$(document).ready(function() {
$('#form').validate({
rules: {
firstname: {
required: true,
minlength: 2
},
lastname: {
required: true,
minlength: 2
},
country: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
repeatEmail: {
required: true,
email: true
},
terms: {
required: true
}
},
submitHandler: function(form) {
//event.preventDefault();
$('#submit').addClass('disabled').text('Enviando');
$.ajax({
url: '../services/form.php',
type: 'POST',
data: $(form).serialize(),
success: function() {
$('.message').html('Te suscribiste correctamente').addClass('success');
$('#submit').text('Enviado');
},
error: function() {
$('.message').html('Hubo un error en el envío').addClass('error');
}
});
}
});
});