1

Hola estoy iniciando con JS y tengo algunas dudas que alomejor son algo básicas. Tengo un formulario de un CRM vtiger y junto con eso tengo un código JavaScript para enviar el formulario, este código tiene el evento onsubmit para validar y enviar el código. Sin embargo cuando realiza esta acción me redirige a una página que muestra la respuesta del servidor. Quisiera enviar este formulario por AJAX para que no me rediriga, sin embargo no lo he conseguido hacer bien, alguien me podria ayudar.

FORMULARIO:

<form id="__vtigerWebForm" name="" action="https....Webforms/capture.php"
    method="post" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="hidden" id="primerCampo" name="__vtrftk" value="">
    <input type="hidden" id="segundoCampo" name="publicid" value="">
    <input type="hidden" id="tercerCampo" name="urlencodeenable" value="">
    <input type="hidden" id="cuartoCampo" name="name" value="">
    <table class="w-100">
        <tbody>
            <tr>
                <td><input type="text" class="form-control" placeholder="Nombre*" name="firstname" data-label="" value="" required=""></td>
            </tr>
            <tr>
                <td><input type="text" class="form-control" placeholder="Apellidos*" name="lastname" data-label="" value="" required=""></td>
            </tr>
            <tr>
                <td><input type="text" class="form-control" placeholder="Teléfono Principal*" name="phone" data-label="" value="" required=""></td>
            </tr>
            <tr>
                <td><input type="email" class="form-control" placeholder="E-mail Principal*" name="email" data-label="" value="" required=""></td>
            </tr>
            <tr>
                <td><select name="leadsource" data-label="leadsource" required="" hidden="">
                        <option value="">Select Value</option>
                        <option value="Llamada entrante - Referido">Llamada entrante - Referido</option>
                        <option value="Llamada entrante - Facebook">Llamada entrante - Facebook</option>
                        <option value="Llamada entrante - Google/Website">Llamada entrante - Google/Website</option>
                        <option value="Chat web">Chat web</option>
                        <option value="Facebook">Facebook</option>
                        <option value="Google/Website">Google/Website</option>
                        <option value="emagister">emagister</option>
                        <option value="Leaducate">Leaducate</option>
                        <option value="Opportunity Leads">Opportunity Leads</option>
                        <option value="MS">MS</option>
                        <option value="DESCONOCIDO">DESCONOCIDO</option>
                        <option value="Pagina Web" selected="">Pagina Web</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="hidden" id="quintoCampo" name="cf_945" data-label="" value="" required=""></td>
            </tr>
            <tr>
                <td><input class="btn btn-form-R" type="submit" value="Submit"></td> 
            </tr>
        </tbody>
    </table>
</form>

JS:

window.onload = function () {
var N = navigator.appName,
    ua = navigator.userAgent,
    tem;
var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if (M && (tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1];
M = M ? [M[1], M[2]] : [N, navigator.appVersion, "-?"];
var browserName = M[0];
var form = document.getElementById("__vtigerWebForm"),
    inputs = form.elements;
form.onsubmit = function () {
    var required = [],
        att, val;
    for (var i = 0; i < inputs.length; i++) {
        att = inputs[i].getAttribute("required");
        val = inputs[i].value;
        type = inputs[i].type;
        if (type == "email") {
            if (val != "") {
                var elemLabel = inputs[i].getAttribute("label");
                var emailFilter =
                    /^[_/a-zA-Z0-9]+([!"#$%&()*+,./:;<=>?\^_`{|}~-]?[a-zA-Z0-9/_/-])*@[a-zA-Z0-9]+([\_\-\.]?[a-zA-Z0-9]+)*\.([\-\_]?[a-zA-Z0-9])+(\.?[a-zA-Z0-9]+)?$/;
                var illegalChars = /[\(\)\<\>\,\;\:\"\[\]]/;
                if (!emailFilter.test(val)) {
                    alert("For " + elemLabel + " field please enter valid email address");
                    return false;
                } else if (val.match(illegalChars)) {
                    alert(elemLabel + " field contains illegal characters");
                    return false;
                }
            }
        }
        if (att != null) {
            if (val.replace(/^\s+|\s+$/g, "") == "") {
                required.push(inputs[i].getAttribute("label"));
            }
        }
    }
    if (required.length > 0) {
        alert("The following fields are required: " + required.join());
        return false;
    }
    var numberTypeInputs = document.querySelectorAll("input[type=number]");
    for (var i = 0; i < numberTypeInputs.length; i++) {
        val = numberTypeInputs[i].value;
        var elemLabel = numberTypeInputs[i].getAttribute("label");
        var elemDataType = numberTypeInputs[i].getAttribute("datatype");
        if (val != "") {
            if (elemDataType == "double") {
                var numRegex = /^[+-]?\d+(\.\d+)?$/;
            } else {
                var numRegex = /^[+-]?\d+$/;
            }
            if (!numRegex.test(val)) {
                alert("For " + elemLabel + " field please enter valid number");
                return false;
            }
        }
    }
    var dateTypeInputs = document.querySelectorAll("input[type=date]");
    for (var i = 0; i < dateTypeInputs.length; i++) {
        dateVal = dateTypeInputs[i].value;
        var elemLabel = dateTypeInputs[i].getAttribute("label");
        if (dateVal != "") {
            var dateRegex =
                /^[1-9][0-9]{3}-(0[1-9]|1[0-2]|[1-9]{1})-(0[1-9]|[1-2][0-9]|3[0-1]|[1-9]{1})$/;
            if (!dateRegex.test(dateVal)) {
                alert("For " + elemLabel + " field please enter valid date in required format");
                return false;
            }
        }
    }
    var inputElems = document.getElementsByTagName("input");
    var totalFileSize = 0;
    for (var i = 0; i < inputElems.length; i++) {
        if (inputElems[i].type.toLowerCase() === "file") {
            var file = inputElems[i].files[0];
            if (typeof file !== "undefined") {
                var totalFileSize = totalFileSize + file.size;
            }
        }
    }
    if (totalFileSize > 50) {
        alert("Maximum allowed file size including all files is 50MB.");
        return false;
    }

};

De ante mano les agradezco la ayuda.

1 respuesta 1

1

Para empezar no tienes el evento onsubmit() en tu input, de la manera mas facil podrias hacer lo siguiente:¿, Primero modificaria el boton:

<input class="btn btn-form-R" type="button" value="submit" onclick='enviar_formulario()'>

En javascript, procederiamos a obtener los valores de los campos que quieres enviar, por ejemplo:

function enviar_formulario(){
     email = document.getElementById('email').value/*es necesario poner en tus inputs un id para poden obtener su valor*/
     nombre = document.getElementById('Nombre').value
     apellido = document.getElementById('Apellido').value
    var ajax = new XMLHttpRequest()/*la variable ajax es un objeto tipo XMLHttpRequest*/
     ajax.open("POST","https....Webforms/capture.php",true)/*enviaremos por post los datos,a tu ruta del php, por lo que en action del formulario ya no es necesario ponerlo y el true significa que es asincrono*/
     ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
     ajax.send("correo="+email+"&nombre="+nombre+"&apellido="+apellido)/*en esta parte enviaras tus datos, en donde los que van entre comillas sera el nombre que tendra el valor del dato al que le estas concatenando, si quieres añadir mas datos tendras que poner el amperson y el nombre de la variable, en el php recibirias estos datos de la siguiente manera $_POST["correo"];*/
     ajax.onreadystatechange = function(){
         if(ajax.readyState == 4 && ajax.status == 200){/*aqui si ajax.status es igual al codigo de estado, significa que l a peticion se ha enviado correctamente y el readyState ==4 significa que el servidor termino de devolver la respuesta*/ 
             alert("Formulario enviado correctamente")/*en esta parte puedes poner un mensaje de que todo salio correcto, es opcional*/
          }
     }
}

Esto seria un ejemplo de como puedes hacerlo

2
  • Muchas gracias, me funciono muy bien. El CRM recibió correctamente el formulario, lo único que el if regreso un false. Ando revisando eso pero te lo agradezco, de verdad aprendí mucho con este problema.
    – Dseo Web
    Commented el 15 jun. 2019 a las 20:18
  • De nada, si el if del ajax regresa un false, podria ser que en tu php estes regresando este booleano, puedes intentar regresar desde tu php el resultado de la consulta con un: echo json_encode($resultado_consulta) y en el if del ajax podrias tomar ese valor devuelto de la siguiente manera, decarando una variable, respuesta = JSON.parse(ajax.responseText) y imprimirla en un console.log o alert para checar los resultados de tu consulta. Commented el 16 jun. 2019 a las 4:49

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.