I'm learning to use forms and I have a javascript code that when I click submit the page shows an error but it does it in a microsecond so I cannot read it and the page refresh it self, I have no idea about what is wrong here. Here is my html
<body>
<h3>Formulario</h3>
<form name="formName" action="#" onsubmit="return validaciones()">
<h4>Nombre:</h4>
<input type="text" onkeypress="validateName(this)" name="campoNombre">
<br>
<br>
<select id="opciones" name="opciones">
<br>
<br>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
<option value="4">Cuarto valor</option>
</select>
<br>
<br>
<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI
<input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO
<input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> NS/NC
<br>
<br>
<input type="checkbox" value="condiciones" name="condiciones" id="condiciones"/> He leído
y acepto las condiciones
<input type="checkbox" value="privacidad" name="privacidad" id="privacidad"/> He leído la
política de privacidad
<br>
<br>
<textarea id="parrafo"></textarea>
<br>
<br>
<input type="submit" value="submit">
</form>
Javascript code
function validaciones() {
let valorNombre = document.forms["formName"]["campoNombre"].value;
if (valorNombre == "") {
alert("Name must be filled out");
console.log('Ingresaste tu nombre: ' + valorNombre)
}
var elementos = document.getElementsByName("pregunta");
for(var i=0; i<elementos.length; i++) {
console.log(" Elemento: " + elementos[i].value + "\n Seleccionado: " +
elementos[i].checked)
}
return false
};
function validateName(item){
value = item.value;
console.log(value)
};
If you submit a form, the page is reloaded by default. You will have to use something like the following:
document.forms["formname"].addEventListener("submit", (event) => {
event.preventDefault();
validaciones();
});
That prevents the browser from reloading the site, if the form is submitted.