2

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&#x3a;&#x2f;&#x2f;syntaxtecnologias.com.mx&#x2f;index.php&#x2f;Inicio_controller&#x2f;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&#x20;Electr&oacute;nico'>Comercio Electr&oacute;nico</option>
                            <option value='Comercio&#x20;Exterior'>Comercio Exterior</option>
                            <option value='Corporativo&#x2f;Grande'>Corporativo&#x2f;Grande</option>
                            <option value='Educacion&#x2f;Capacitacion'>Educacion&#x2f;Capacitacion</option>
                            <option value='Embajadas&#x20;y&#x20;Consulados'>Embajadas y Consulados</option>
                            <option value='Empresas&#x20;de&#x20;Servicios'>Empresas de Servicios</option>
                            <option value='Gobierno&#x2f;Militar'>Gobierno&#x2f;Militar</option>
                            <option value='Industria&#x20;Aeron&aacute;utica'>Industria Aeron&aacute;utica</option>
                            <option value='Industria&#x20;Automotriz'>Industria Automotriz</option>
                            <option value='Industria&#x20;de&#x20;Alimentos'>Industria de Alimentos</option>
                            <option value='Industria&#x20;de&#x20;la&#x20;Construcci&oacute;n'>Industria de la Construcci&oacute;n</option>
                            <option value='Industria&#x20;de&#x20;las&#x20;Telecomunicaciones'>Industria de las Telecomunicaciones</option>
                            <option value='Industria&#x20;Energ&eacute;tica'>Industria Energ&eacute;tica</option>
                            <option value='Industria&#x20;Hotelera'>Industria Hotelera</option>
                            <option value='Industria&#x20;Inmobiliaria'>Industria Inmobiliaria</option>
                            <option value='Industria&#x20;Manufactura'>Industria Manufactura</option>
                            <option value='Industria&#x20;Maquiladora'>Industria Maquiladora</option>
                            <option value='Industria&#x20;Metalmecanica'>Industria Metalmecanica</option>
                            <option value='Industria&#x20;Minera'>Industria Minera</option>
                            <option value='Industria&#x20;Qu&iacute;mica'>Industria Qu&iacute;mica</option>
                            <option value='Industria&#x20;Textil'>Industria Textil</option>
                            <option value='Industria&#x20;Tur&iacute;stica'>Industria Tur&iacute;stica</option>
                            <option value='Inmobiliaria'>Inmobiliaria</option>
                            <option value='ISP&#x20;&#x28;&#x20;Intenet&#x20;Service&#x20;Provider&#x29;'>ISP &#x28; Intenet Service Provider&#x29;</option>
                            <option value='Proyectos&#x20;de&#x20;Infraestructura'>Proyectos de Infraestructura</option>
                            <option value='PyME&#x2f;Mediana&#x20;Empresa'>PyME&#x2f;Mediana Empresa</option>
                            <option value='Salud'>Salud</option>
                            <option value='Sector&#x20;Financiero&#x20;y&#x20;Bancos'>Sector Financiero y Bancos</option>
                            <option value='Servicios&#x20;Financieros,&#x20;inmobiliarios&#x20;y&#x20;de&#x20;Alquiler'>Servicios Financieros, inmobiliarios y de Alquiler</option>
                            <option value='Servicios&#x20;Tecnicos&#x20;Profesionales,&#x20;Personales&#x20;y&#x20;Soc'>Servicios Tecnicos Profesionales, Personales y Soc</option>
                            <option value='SoHo&#x2f;Micro&#x20;Empresa'>SoHo&#x2f;Micro Empresa</option>
                            <option value='Transportes&#x20;y&#x20;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.

1 respuesta 1

2

Detener y/o Reanudar Eventos

No es posible detener un evento con la intención de reanudarlo más adelante, lo que sí se puede hacer es ejecutar código <jscript> antes de que el evento ocurra, dando esto la sensación de haber detenido el evento para luego continuarlo.

A título ilustrativo, en el siguiente ejemplo te muestro como hacer en el caso del evento submit

$(document).ready(function() {
 $("form").on("submit", function() {
  // Coloque aqui el codigo que desea ejecutar
  // antes de enviar el formulario.
  // ..
  // ..
  // ..

  // Al final puede:
  // Continuar o Cancelar el Envío del Formulario con:
  return confirm("Desea Enviar el Formulario?");
  return true;   // Envía el Formulario (Default)
  return false;  // Cancela el envío del Formulario
 });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<form action="http://www.example.com">
 codigo <input>
 nombre <input>
 <input type="submit" value="Enviar">
</form>

En tal sentido te recomiendo elimines la primera y última línea e.preventDefault(); y return false de tu código y funcionara.

Espero esto te ayude ...;))

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.