Determine form to do other things first and then resume it and send it to CRM

2

I have a problem since yesterday with the following form with submit button

<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>

The form calls a JavaScript function checkMandatory54017000020400005 (event) and passes it as an event parameter

<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>

I've been doing modifications to the code for example I put recapcha, but before I put the function checkMandatory54017000020400005 (event) did not have the event and neither validated the recap nor the ajax called the controller, at the end of accounts that form was sent to a CRM correctly, but now I want to send it to the mail as well and that is what that call does to the controller by AJAX, the controller works if I do things separately but now I want to put everything together. What I tried to do was send him to the JavaScript function as parameter the event and I stop the form before it is sent and first sent to the mail which if it works, then I try to resume send the form to the CRM but it does not arrive, I suspect that the problem is in the resumption of sending the form to the CRM since it is not arriving the form and to part when if it is sent to the CRM the page is refreshed.

I hope you can support me.

    
asked by Javier fr 12.12.2018 в 18:39
source

1 answer

2

Stop and / or Resume Events

It is not possible to stop an event with the intention of resuming it later, what can be done is to execute code <jscript> before the event occurs, giving this the sensation of having stopped the event and then continuing it. / p>

For illustrative purposes, in the following example I show you how to do in the case of the event 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>

In this sense I recommend you delete the first and last line e.preventDefault(); and return false of your code and it will work.

I hope this helps you ...;))

    
answered by 12.12.2018 в 21:25