I asked about this before, but didn't really use the real code, so this time I will do it. I need to be able to check at least one of the input fields. If it is empty, it says that it is empty and it will not open mail.php. If it is not empty, it will open mail.php, and it must send its contents so that it can be processed on the php page.
Here is what I got:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="inscripcion-style.css">
<title>Inscripción</title>
<link rel="icon" href="LOGO.ico" type="image/x-icon">
<script>
function validation() {
var x = document.getElementById("equipo").value;
if (document.getElementById("equipo").value == "" || document.getElementById("equipo").value == " ") {
alert("vacio");
return false;
} else {
alert("no vacio");
return true;
}
}
</script>
</head>
<body>
<div class="header">
<h1>
<font color = "#015BA5">
Inscripción de Equipo
</font>
</h1>
</div>
<form name="myForm" id="myForm" action="mail.php" method="POST" onsubmit="validation()">
<div>
<div class="aBox" id="num1">
<div class="label" style="font-size: 15pt;">Nombre del Equipo</div>
<div class="formParent">
<input type="text" style=" width: 200px; font-size: 15pt;" name="equipo" id="equipo">
</div>
</div>
<div class="aBox" id="num1">
<div class="label" style="font-size: 15pt;">Numero de Integrantes</div>
<div class="formParent">
<select style=" width: 200px; font-size: 15pt;" name="integrantes">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=1 0>10</option>
</select>
</div>
</div>
<div id="num1">
<div class="label" style="font-size: 15pt;">Universidad</div>
<div class="formParent">
<select style=" width: 200px; font-size: 15pt;" name="Uni">
<option value=U met>UMET</option>
<option value=I nter-Metro>Inter-Metro</option>
</select>
</div>
</div>
</div>
<div>
<h1 class="lbl1">
<font color = "#015BA5">
Contacto 1
</font>
</h1>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Nombre</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Primer apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Segundo apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Email</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Teléfono</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel">
</div>
</div>
</div>
<div>
<h1 class="lbl1">
<font color = "#015BA5">
Contacto 2
</font>
</h1>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Nombre</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre2">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Primer apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido2">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Segundo apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido2">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Email</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail2">
</div>
</div>
<div class="aBox2" id="num1">
<div class="label" style="font-size: 15pt;">Teléfono</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel2">
</div>
</div>
</div>
<div>
<h1 class="lbl1">
<font color = "#015BA5">
Profesor
</font>
</h1>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Nombre</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="nombre3">
</div>
</div>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Primer apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="pApellido3">
</div>
</div>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Segundo apellido</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="sApellido3">
</div>
</div>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Email</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="mail3">
</div>
</div>
<div class="aBox3" id="num1">
<div class="label" style="font-size: 15pt;">Teléfono</div>
<div class="formParent">
<input type="text" class="field" style=" width: 200px; font-size: 15pt;" name="tel3">
</div>
</div>
</div>
<div>
<input type="submit" value="Enviar" class="enviarBtn">
</div>
</form>
</body>
This is for a Spanish customer. My problem is that it does the validation, but it still opens the php page and sends its contents, even if it returns false. Without adding css or whatever on the php page, this is not the case. I just need help with this problem.
This is much more organized in my document, I would like for me to do the same here.
Thank.