tengo un problema desde ayer con el siguiente formulario con boton tipo submit
<form id="form_contactanos" action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads54017000020400005 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory54017000020400005(event)' accept-charset='UTF-8'>
<div class="row">
<!-- Do not remove this code. -->
<input type='text' style='display:none;' name='xnQsjsdp' value='b8c6293891e2878f125a78c114c45d1133cd8ab0fd31519fb0e76a930012c594'/>
<input type='hidden' name='zc_gad' id='zc_gad' value=''/>
<input type='text' style='display:none;' name='xmIwtLD' value='8a7419917526917cd8f7bdba23036d4e91d640f798fb7dcac4168b987edf63b4'/>
<input type='text' style='display:none;' name='actionType' value='TGVhZHM='/>
<input type='text' style='display:none;' name='returnURL' value='https://syntaxtecnologias.com.mx/index.php/Inicio_controller/contactanos' />
<!-- Do not remove this code. -->
<style>
tr , td {
padding:6px;
border-spacing:0px;
border-width:0px;
}
</style>
<table style='width:600px;background-color:white;color:black'>
<h1 class="title font-light m-t-10">Contáctanos</h1>
<div class="col-lg-12">
<div class="form-group m-t-10">
<input id="txt_nombre" name="First Name" class="form-control" type="text" placeholder="Nombre(s)"> </div>
</div>
<div class="col-lg-12">
<div class="form-group m-t-10">
<input id="txt_apellido" name="Last Name" class="form-control" type="text" placeholder="Apellidos"> </div>
</div>
<div class="col-lg-12">
<div class="form-group m-t-10">
<input id="txt_puesto" name="LEADCF31" class="form-control" type="text" placeholder="Tu Puesto"> </div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>Giro de la Empresa</label>
<select class="custom-select col-12" name='Industry'>
<option value='-None-'>---Seleccione---</option>
<option value='ASP'>ASP</option>
<option value='Comercio Electrónico'>Comercio Electrónico</option>
<option value='Comercio Exterior'>Comercio Exterior</option>
<option value='Corporativo/Grande'>Corporativo/Grande</option>
<option value='Educacion/Capacitacion'>Educacion/Capacitacion</option>
<option value='Embajadas y Consulados'>Embajadas y Consulados</option>
<option value='Empresas de Servicios'>Empresas de Servicios</option>
<option value='Gobierno/Militar'>Gobierno/Militar</option>
<option value='Industria Aeronáutica'>Industria Aeronáutica</option>
<option value='Industria Automotriz'>Industria Automotriz</option>
<option value='Industria de Alimentos'>Industria de Alimentos</option>
<option value='Industria de la Construcción'>Industria de la Construcción</option>
<option value='Industria de las Telecomunicaciones'>Industria de las Telecomunicaciones</option>
<option value='Industria Energética'>Industria Energética</option>
<option value='Industria Hotelera'>Industria Hotelera</option>
<option value='Industria Inmobiliaria'>Industria Inmobiliaria</option>
<option value='Industria Manufactura'>Industria Manufactura</option>
<option value='Industria Maquiladora'>Industria Maquiladora</option>
<option value='Industria Metalmecanica'>Industria Metalmecanica</option>
<option value='Industria Minera'>Industria Minera</option>
<option value='Industria Química'>Industria Química</option>
<option value='Industria Textil'>Industria Textil</option>
<option value='Industria Turística'>Industria Turística</option>
<option value='Inmobiliaria'>Inmobiliaria</option>
<option value='ISP ( Intenet Service Provider)'>ISP ( Intenet Service Provider)</option>
<option value='Proyectos de Infraestructura'>Proyectos de Infraestructura</option>
<option value='PyME/Mediana Empresa'>PyME/Mediana Empresa</option>
<option value='Salud'>Salud</option>
<option value='Sector Financiero y Bancos'>Sector Financiero y Bancos</option>
<option value='Servicios Financieros, inmobiliarios y de Alquiler'>Servicios Financieros, inmobiliarios y de Alquiler</option>
<option value='Servicios Tecnicos Profesionales, Personales y Soc'>Servicios Tecnicos Profesionales, Personales y Soc</option>
<option value='SoHo/Micro Empresa'>SoHo/Micro Empresa</option>
<option value='Transportes y Comunicaciones'>Transportes y Comunicaciones</option>
</select>
</td>
</div>
</div>
<div class="col-lg-12">
<div class="form-group m-t-10">
<input id="txt_ubicacion" name="Street" class="form-control" type="text" placeholder="Ubicación"> </div>
</div>
<div class="col-lg-12">
<div class="form-group m-t-10">
<input id="txt_telefono" name="Phone" class="form-control" type="text" placeholder="Teléfono"> </div>
</div>
<div class="col-lg-12">
<div class="form-group m-t-10">
<textarea id="txt_mensaje" name="LEADCF30" class="form-control" rows="3" placeholder="Mensaje"></textarea>
</div>
</div>
<div class="col-lg-12">
<div id="recaptcha" class="g-recaptcha" data-sitekey="6LctHHEUAAAAAP99bIMWKIoyMLzEaFnsz0XF2Tpx"></div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-info-gradiant btn-md m-t-20 btn-arrow"><span> ENVIAR <i class="ti-arrow-right"></i></span></button>
</div>
</table>
</div>
</form>
El formulario llama a una funcion JavaScript checkMandatory54017000020400005(event) y le paso como parametro un evento
<script>
var mndFileds=new Array('First Name','Last Name','Phone');
var fldLangVal=new Array('Nombre','Apellido','Phone');
var name='';
var email='';
function checkMandatory54017000020400005(e) {
e.preventDefault();//detengo el formulario
var $captcha = $( '#recaptcha' ),
response = grecaptcha.getResponse();
if (response.length === 0) {
swal("Algo salió mal!", "Valida el reCAPTCHA por favor!", "error");
} else {
$.ajax({
url : "<?php echo base_url('index.php/Inicio_controller/enviar_mensaje');?>",
type: "POST",
data: $('#form_contactanos').serialize(),
dataType: "JSON",
success: function(data)
{
//checkMandatory54017000020400005();
// console.log(data);
// grecaptcha.reset();
// document.getElementById("form_contactanos").reset();
swal("Buen trabajo!", "Tu mensaje ha sido enviado!", "success");
for(i=0;i<mndFileds.length;i++) {
alert('entra');
var fieldObj=document.forms['WebToLeads54017000020400005'][mndFileds[i]];
if(fieldObj) {
if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0) {
if(fieldObj.type =='file') {
alert('Please select a file to upload.');
fieldObj.focus();
return false;
}
alert(fldLangVal[i] +' cannot be empty.');
fieldObj.focus();
return false;
} else if (fieldObj.nodeName=='SELECT') {
if(fieldObj.options[fieldObj.selectedIndex].value=='-None-') {
alert(fldLangVal[i] +' cannot be none.');
fieldObj.focus();
return false;
}
} else if(fieldObj.type =='checkbox'){
if(fieldObj.checked == false){
alert('Please accept '+fldLangVal[i]);
fieldObj.focus();
return false;
}
}
try {
if(fieldObj.name == 'Last Name') {
name = fieldObj.value;
}
} catch (e) {}
}
}
},
error: function (jqXHR, textStatus, errorThrown)
{
console.log(errorThrown);
swal("Algo salió mal!", "Error al enviar tu mensaje!", "error");
}
});
}
return false;//segun con esto se reanuda enviar el formulario al CRM
}
</script>
Le he estado haciendo modificaciones al codigo por ejemplo le puse recapcha, pero antes de que lo colocara la funcion checkMandatory54017000020400005(event) no tenia el evento y tampoco validaba el recapcha ni el ajax llamaba al controlador, al final de cuentas ese formulario se enviaba a un CRM correctamente, pero ahora quiero enviarlo al correo tambien y es lo que hace esa llamada al controlador por AJAX, igual el controlador funciona si hago las cosas por separado pero ahora quiero juntar todo. Lo que intente hacer fue que le envio a la funcion JavaScript como parametro el evento y detengo el formulario antes de que se envie y primero envio al correo lo cual si funciona, despues intento reanudar enviar el formulario al CRM pero ya no llega, sospecho que el problema esta en la reanudacion de enviar el formulario al CRM ya que no esta llegando el formulario y a parte cuando si se envia al CRM la pagina se refresca.
Espero que me puedan apoyar.