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.