Validate Form with JavaScript (valid option selected from cbx) - javascript

HTML - this a simple html form, which I have to validate with js, please if some could help me...
<form>
<label class="ancho">Nombre</label>
<input id="name" class="bloque" type="text" placeholder="Nicolas">
<label class="ancho">Apellido</label>
<input id="surename" class="bloque" type="text" placeholder="Oyarzun">
<label class="ancho">Edad</label>
<input id="age" class="bloque" type="number" placeholder="27" min="1" max="110">
<label class="ancho">Carrera</label>
<select id="cbxCarrera" class="bloque">
<option id="op0">-- Seleccione una Carrera --</option>
<option id="op1">Programacion</option>
</select>
<button class="bloque boton" onclick="formulario()">Enviar</button
</form>
JavaScript
<script>
var nombre = document.getElementById("name");
var apellido = document.getElementById("surename");
var edad = document.getElementById("age");
var carrera = document.getElementById("cbxCarrera");
var opcion0 = document.getElementById("op0");
var opcion1 = document.getElementById("op1");
function formulario() {
while (nombre != null || apellido != null || edad > 0) {
if (document.getElementById("cbxCarrera").value != "0") {
// just checking if displays
alert("nombre: " + nombre\ "apellido: " + apellido\ "edad: " + edad\ "carrera: "
document.getElementById(id).optSelected);
}
} else {
alert("Porfavor ingrese valores validos en los campos anteriores.");
}
}
</script>
how can I validate the option selected in the combobox?
thanks!

You can get the selected option by using selectedIndex like this
carrera.options[carrera.selectedIndex];
And then do with it as you please,
REFERENCE

Related

Field validation with JS and HTML

My problem with the following code is that it does not let me enter with the users and passwords of the first three positions of the arrays, but it does let me enter with the last one and I want it to let me enter with each user and their respective password, for example user position 1 with password position 1.
I did it with an if nested in a for and reading the code should work, but it doesn't.
function validar() {
var nombre = document.Formulario.nombre.value;
var password = document.Formulario.password.value;
var indice = document.Formulario.rol.value;
var users = Array('Ruben', 'Juan', 'Pedro', 'Luis');
var pass = Array('1234', 'admin', 'abcd', 'password');
if (nombre == '' || password == '' || indice == 0) {
alert("Faltan campos por llenar");
} else {
alert("Campos llenos :)");
}
for (let i = users.length - 1; i >= 0; i--) {
if (nombre == users[i] && password == pass[i]) {
alert('Bienvenido ' + nombre);
break;
} else {
alert('Datos incorrectos');
break;
}
}
}
<form name="Formulario" method="get" action="recibe.php">
<input type="text" name="nombre" id="nombre" placeholder="Usuario" /><br>
<input type="text" name="password" id="password" placeholder="Password" /><br>
<select name="rol" id="rol">
<option value="0">Selecciona</option>
<option value="1">Gerente</option>
<option value="2">Ejecutivo</option>
</select><br>
<input onclick="validar(); return false;" type="submit" value="Enviar" />
</form>
You can use indexOf for your conditional check instead of using a for loop
function validar(){
var nombre = document.Formulario.nombre.value;
var password = document.Formulario.password.value;
var indice = document.Formulario.rol.value;
var users = Array('Ruben', 'Juan', 'Pedro', 'Luis');
var pass = Array('1234', 'admin', 'abcd', 'password');
if(nombre=='' || password=='' || indice==0){
alert("Faltan campos por llenar");
} else {
alert("Campos llenos :)");
}
if(users.indexOf(nombre) === pass.indexOf(password)) {
alert('Bienvenido ' + nombre);
}
else {
alert('Datos incorrectos');
}
}
<html>
<head>
<title>A8. Validacion de campos con JS + Arreglos_CarlosLomeli</title>
</head>
<body>
<form name="Formulario" method="get" action="recibe.php">
<input type="text" name="nombre" id="nombre" placeholder="Usuario"/><br>
<input type="text" name="password" id="password" placeholder="Password"/><br>
<select name="rol" id="rol">
<option value="0">Selecciona</option>
<option value="1">Gerente</option>
<option value="2">Ejecutivo</option>
</select><br>
<input onclick="validar(); return false;" type="submit" value="Enviar"/>
</form>
</body>
</html>
Use the form submit event
You can use some, to test the user and password
You need to stop the submission when the validation fails
window.addEventListener("DOMContentLoaded", () => { // when page loads
const users = ['Ruben', 'Juan', 'Pedro', 'Luis'];
const pass = ['1234', 'admin', 'abcd', 'password'];
const form = document.Formulario;
form.addEventListener("submit", (e) => {
var nombre = form.nombre.value.trim();
var password = form.password.value.trim();
var indice = form.rol.value.trim();
if (nombre == '' || password == '' || indice == 0) {
alert("Faltan campos por llenar");
e.preventDefault(); // stop submit
return;
}
if (users.some((user, i) => user === nombre && password == pass[i])) {
alert('Bienvenido ' + nombre);
} else {
alert('Datos incorrectos');
e.preventDefault(); // stop submit
return;
}
})
})
<form name="Formulario" method="get" action="recibe.php">
<input type="text" name="nombre" id="nombre" placeholder="Usuario" /><br>
<input type="text" name="password" id="password" placeholder="Password" /><br>
<select name="rol" id="rol">
<option value="0">Selecciona</option>
<option value="1">Gerente</option>
<option value="2">Ejecutivo</option>
</select><br>
<input type="submit" value="Enviar" />
</form>

Implementing Submit action in javascript

I am new to javascript..I am facing some problems while trying to implement form submit action onclick using javascript..
The problem is when I implement all the validation checks using if-else conditions ..The function dose not produce any result..
[] 1[]2
I have implemented various validation check and tried to capture all possible form elements with different conditions..But I am failing when I am implementing validation check..otherwise the code works -I cannot figure out what is the problem..
Here is the code:
function submitForm() {
var nam = document.getElementById("student_name").value;
if (nam.length == 0 || !(isNAN(nam)) || nam.length > 20) {
nam = "Invalid";
}
var ag = document.getElementById("student_age").value;
if (ag.length == 0 || isNAN(ag) || ag.parseInt() > 100) {
age = "Invalid";
}
var gender = document.getElementById("g1").value;
if (document.getElementById("g1").checked) {
gender = document.getElementById("g1").value;
} else if (document.getElementById("g2").checked) {
gender = document.getElementById("g1").value;
} else {
alert("You must select a gendrer!!");
}
var cty = document.getElementById("city").value;
var pan = document.getElementById("h1").value;
var dan = document.getElementById("h2").value;
var sprt = document.getElementById("h3").value;
if (document.getElementById("h1").checked) {
var pan = document.getElementById("h1").value;
pan = pan + "#";
} else {
pan = "";
}
if (document.getElementById("h2").checked) {
var dan = document.getElementById("h2").value;
dan = dan + "#";
} else {
dan = "";
}
if (document.getElementById("h3").checked) {
var sprt = document.getElementById("h3").value;
sprt = sprt + "#";
} else {
spt = "";
}
var hobbies = pan + "" + dan + "" + sprt
document.getElementById("name").innerHTML = nam; //document.getElementById("student_name").value;
document.getElementById("age").innerHTML = ag; //document.getElementById("student_age").value;
document.getElementById("gd").innerHTML = gender;
document.getElementById("ct").innerHTML = cty; //document.getElementById("city").value;
document.getElementById("hb").innerHTML = hobbies; //document.getElementById("h1").value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyTest</title>
</head>
<body style="background:pink;">
<div id="body">
<form>
<br><br>
<span id="name_label" style="background:yellow;">Student Name</span> <input type="text" id="student_name" style="background:yellow;"> <br><br>
<span id="age_label" style="background:yellow;">Age</span> <input type="text" id="student_age" style="background:yellow;"><br><br> Gender <input type="radio" value="male" name="gender" id="g1">M
<input type="radio" value="female" name="gender" id="g2">F<br>
<br><br> City
<select id="city">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kolkata">Kolkata</option>
<option value="Chennai">Chennai</option>
</select><br><br>
<label>Hobby </label> <input type="checkbox" id="h1" value="Painting">Painting
<input type="checkbox" id="h2" name="cbox" value="Dancing">Dancing
<input type="checkbox" id="h3" name="cbox" value="Sports">Singing
<br><br>
</form>
<input type="submit" value="Submit" id="student_submit" onclick="submitForm()">
<div>
<label>Name:</label><span id="name"></span><br>
<label>Age:</label><span id="age"></span><br>
<label>Gender:</label><span id="gd"></span><br>
<label>City:</label><span id="ct"></span><br>
<label>Hobbies:</label><span id="hb"></span><br>
</div>
</div>
</body>
</html>
The first error is at these lines
var nam=document.getElementById("student_name").value;
if(nam.value.length==0 || !(isNAN(nam)) || nam.value.length>20){
nam="Invalid";
}
nam is the value of the input again doing nam.value will throw an error
Secondly isNAN is not a javascript inbuilt function. Case matters while using in build function , it has to be isNaN
Thirdly ag.parseInt() is wrong. Instead it has to be parseInt(ag,10) where 10 is the radix
function submitForm() {
var nam = document.getElementById("student_name").value;
if (nam.length == 0 || !(isNaN(nam)) || nam.length > 20) {
nam = "Invalid";
}
var ag = document.getElementById("student_age").value;
if (ag.length == 0 || isNaN(ag) || parseInt(ag, 10) > 100) {
age = "Invalid";
}
var gender = document.getElementById("g1").value;
if (document.getElementById("g1").checked) {
gender = document.getElementById("g1").value;
} else if (document.getElementById("g2").checked) {
gender = document.getElementById("g1").value;
} else {
alert("You must select a gendrer!!");
}
var cty = document.getElementById("city").value;
var pan = document.getElementById("h1").value;
var dan = document.getElementById("h2").value;
var sprt = document.getElementById("h3").value;
if (document.getElementById("h1").checked) {
var pan = document.getElementById("h1").value;
pan = pan + "#";
} else {
pan = "";
}
if (document.getElementById("h2").checked) {
var dan = document.getElementById("h2").value;
dan = dan + "#";
} else {
dan = "";
}
if (document.getElementById("h3").checked) {
var sprt = document.getElementById("h3").value;
sprt = sprt + "#";
} else {
spt = "";
}
var hobbies = pan + "" + dan + "" + sprt
document.getElementById("name").innerHTML = nam; //document.getElementById("student_name").value;
document.getElementById("age").innerHTML = ag; //document.getElementById("student_age").value;
document.getElementById("gd").innerHTML = gender;
document.getElementById("ct").innerHTML = cty; //document.getElementById("city").value;
document.getElementById("hb").innerHTML = hobbies; //document.getElementById("h1").value;
}
<div id="body">
<form>
<br><br>
<span id="name_label" style="background:yellow;">Student Name</span> <input type="text" id="student_name" style="background:yellow;"> <br><br>
<span id="age_label" style="background:yellow;">Age</span> <input type="text" id="student_age" style="background:yellow;"><br><br> Gender <input type="radio" value="male" name="gender" id="g1">M
<input type="radio" value="female" name="gender" id="g2">F<br>
<br><br> City
<select id="city">
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kolkata">Kolkata</option>
<option value="Chennai">Chennai</option>
</select><br><br>
<label>Hobby </label> <input type="checkbox" id="h1" value="Painting">Painting
<input type="checkbox" id="h2" name="cbox" value="Dancing">Dancing
<input type="checkbox" id="h3" name="cbox" value="Sports">Singing
<br><br>
</form>
<input type="submit" value="Submit" id="student_submit" onclick="submitForm()">
<div>
<label>Name:</label><span id="name"></span><br>
<label>Age:</label><span id="age"></span><br>
<label>Gender:</label><span id="gd"></span><br>
<label>City:</label><span id="ct"></span><br>
<label>Hobbies:</label><span id="hb"></span><br>
</div>
</div>
This might help you
function submitForm()
{
var nam = document.getElementById("student_name").value;
if (!(nam) || nam.length > 20)
{
alert("please Select a valid name");
return false;
}
var ag = document.getElementById("student_age").value;
if (!(ag) || ag > 100)
{
alert("please Select a valid age");
return false;
}
var gender = "";
if(!document.getElementById("g1").checked && !document.getElementById("g2").checked )
{
alert("please Select gender");
return false;
}
else
{
if(document.getElementById("g1").checked)
{
gender = document.getElementById("g1").value;
}
else
{
gender = document.getElementById("g2").value;
}
}
var cty = document.getElementById("city").value;
if (!(cty) || cty=="Default")
{
alert("please Select a city");
return false;
}
var hobbies ="";
if(!document.getElementById("h1").checked && !document.getElementById("h2").checked && !document.getElementById("h3").checked)
{
alert("please Select hobby");
return false;
}
else
{
var inputElements = document.getElementsByName("cbox");
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
var value=" "+ inputElements[i].value;
hobbies +=value;
}
}
}
document.getElementById("name").innerHTML = nam; //document.getElementById("student_name").value;
document.getElementById("age").innerHTML = ag; //document.getElementById("student_age").value;
document.getElementById("gd").innerHTML = gender;
document.getElementById("ct").innerHTML = cty; //document.getElementById("city").value;
document.getElementById("hb").innerHTML = hobbies; //document.getElementById("h1").value;
return true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyTest</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body style="background:pink;">
<div id="body">
<form action="#" method="post" onsubmit="return false">
<br><br>
<span id="name_label" style="background:yellow;">Student Name</span> <input type="text" id="student_name" style="background:yellow;"> <br><br>
<span id="age_label" style="background:yellow;">Age</span> <input type="text" id="student_age" style="background:yellow;"><br><br> Gender <input type="radio" value="male" name="gender" id="g1">M
<input type="radio" value="female" name="gender" id="g2">F<br>
<br><br> City
<select id="city">
<option value="Default">Select City</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kolkata">Kolkata</option>
<option value="Chennai">Chennai</option>
</select><br><br>
<label>Hobby </label>
<input type="checkbox" id="h1" name="cbox" value="Painting">Painting
<input type="checkbox" id="h2" name="cbox" value="Dancing">Dancing
<input type="checkbox" id="h3" name="cbox" value="Sports">Singing
<br><br>
<input type="submit" value="Submit" onclick="submitForm()">
</form>
<div>
<label>Name:</label><span id="name"></span><br>
<label>Age:</label><span id="age"></span><br>
<label>Gender:</label><span id="gd"></span><br>
<label>City:</label><span id="ct"></span><br>
<label>Hobbies:</label><span id="hb"></span><br>
</div>
</div>
</body>
</html>

How to get the current value of a form input updated at each change without using jquery only using javaScript

here I'm trying to make an inscription form an as a form validation i've chosen that the name must contain at least 2 charecters, So i've added an event listner to the input with the id="nom" but the problem that occurs here is that the code gets only the initial value which is empty so it doesn't really matter what the user write in the specified input field the event will be launched with the empty value.
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="#" method="get">
<fieldset id="fieldset">
<legend>Inscription :</legend>
<label for="">Sexe :</label><br>
<input type="radio" name="gender" value="male" checked><label for="male">Homme</label>
<br><input type="radio" name="gender" value="female"><label for="female">Femme</label>
<br><sapn class="tooltip">Vous devez selectionner votre sexe</sapn>
<br><br><label>Nom :</label><br>
<input type="text" id="nom">
<sapn class="tooltip">Un nom ne peut pas faire moins de 2 caractères</sapn>
<br><br><label>Prénom :</label><br>
<input type="text" id="prenom">
<sapn class="tooltip">Un prénom ne peut pas faire moins de 2 caractères</sapn>
<br><br><label>Age :</label><br>
<input type="text" id="age">
<sapn class="tooltip">l'age doit etre compris entre 5 et 140</sapn>
<br><br><label>Pseudo :</label><br>
<input type="text" id="pseudo">
<sapn class="tooltip">Le pseudo ne peut pas faire moins de 4 caractères</sapn>
<br><br><label>Mot de passe :</label><br>
<input type="password" id="mdp">
<sapn class="tooltip">Le mot de passe ne peut pas faire moins de 6 caractères</sapn>
<br><br><label>Mot de passe (confirmation):</label><br>
<input type="password" id="mdpconf">
<sapn class="tooltip">Le mot de passe de confirmation doit etre identique à celui d'origine</sapn>
<br><br><label for="country">Pays :</label><br>
<select name="country" id="country">
<option value="none" selected >Selectionnez votre pays</option>
<option value="Allemagne" >Allemagne</option>
<option value="France" >France</option>
<option value="Tunisie" >Tunisie</option>
</select>
<sapn class="tooltip">Vous devez selectionner votre pays de résidence</sapn>
<br><br><label for="mail">Recevoir des mails </label>
<input type="checkbox" class="answer">
<br><br><input type="submit" value="M'inscrire" id="submit">
<input type="reset" value="Reintitialiser le formulaure" id="reset">
</fieldset>
</form>
<script>
(function (){
var nom = document.getElementById('nom');
var prenom = document.getElementById('prenom');
var sexe = document.querySelectorAll('input[type = checkbox],checked');
var age = document.getElementById('age');
var pseudo = document.getElementById('pseudo');
var mdp = document.getElementById('mdp');
var mdpconf = document.getElementById('mdpconf');
var pays = document.getElementById('country');
var tooltips = document.querySelectorAll(".tooltip");
for(i = 0;i < tooltips.length; i++){
tooltips[i].style.display = 'none';
}
function moreThenTwo(text){
if (text.value.length < 2){
text.style.borderColor="red";
tooltips[1].style.display = "inline-block";
age.value = text.value.length;
}
else
text.style.borderColor = "green";
};
nom.addEventListener('change',moreThenTwo(nom));
})();
</script>
</body>
</html>`
You need to use oninput event in the input field with id="nom" :
nom.addEventListener('input', function moreThenTwo(e){
var field = e.target;
if (field.value.length < 2){
field.style.borderColor="red";
tooltips[1].style.display = "inline-block";
age.value = field.value.length;
} else {
field.style.borderColor = "green";
}
});
or you can directly use this in the event handler;
nom.addEventListener('input', function moreThenTwo(e){
if (this.value.length < 2){
this.style.borderColor="red";
tooltips[1].style.display = "inline-block";
age.value = this.value.length;
} else {
this.style.borderColor = "green";
}
});
Use both onKeyPress() and onKeyUp():
function myFun() {
var value = document.getElementById("inp").value;
var lblValue = document.getElementById("lblValue");
lblValue.innerText = "Text: " + value;
}
<input id="inp" type="text" onKeyPress="myFun()" onKeyUp="myFun()"><br>
<span id="lblValue">Text: </span>

JS undefined error when form is submited

i have this form:
<form onsubmit="return validarIDC()">
<div class="labelBox">
<div>
<label>Destinatario:</label>
<select name="destinatario">
<option value="hombre">Sr.</option>
<option value="mujer">Sra.</option>
</select>
</div>
<div>
<label>Apellido y<br>nombre:</label>
<input type="text" id="nombre"> *
</div>
<div id="ubicarCampo">
<label>Razón Social:</label>
<input type="text" name="razon">
</div>
<div>
<label>Email:</label>
<input type="email" name="email"> *
</div>
<div>
<label>Teléfono:</label>
<input type="text" name="telefono"> *
</div>
<div>
<label>Celular:</label>
<input type="text" name="celular">
</div>
<div>
<label>Via de Contacto:</label>
<select name="via">
<option value="opc1">E-mail</option>
<option value="opc2">Telefono</option>
<option value="opc3">Correo postal</option>
</select>
</div>
<div>
<label>Comentarios:</label>
<textarea max="300"></textarea>
</div>
<input name="submit" type="submit" value="Enviar">
</div>
</form>
<script type="text/javascript" src="script.js"></script>
and i've done a function to validate all the data from inputs, and it works perfectly exept for one error, more details after the code, here is the JS:
function validarIDC() {
var errores = [];
var er = /^[\w]+$/;
if (document.contactForm.nombre.value == "" || document.contactForm.nombre.value == null) {
errores.push("El nombre es obligatorio.");
}
else if (!er.test(document.contactForm.nombre.value)) {
errores.push("El nombre contiene caracteres no validos o Espacios.");
}
if (document.contactForm.telefono.value == "") {
errores.push("Debe ingresar un telefono")
}
else if (isNaN(document.contactForm.telefono.value)) {
errores.push("El campo telefono contiene caracteres no validos.");
}
if (document.contactForm.email.value == "") {
errores.push("Debe especificar una dirección de Email.");
}
if (document.contactForm.celular.value !== "" && isNaN(document.contactForm.celular.value)) {
errores.push("El campo celular contiene caracteres no validos.");
}
if (errores.length > 0) {
msg = alert("Error/es: \n");
for (var i = 0; i < errores.length; i++) {
msg += errores[i] + "\n";
}
alert(msg);
return false;
}
document.contactForm.submit.disable = true;
alert("Los datos han sido enviados exitosamente!");
return true;
}
So when i submit it pops the alert(msg) but surprisingly when any condition its true i get "undefined" sticked to a side of the errors.. the console log saids nothing and i don't know what am i doing wrong.. please can anyone help me with this ?
You need initialize the variable, since alert() doesn't returns anything msg is undefined.
msg = "Error/es: \n";
instead of
msg = alert("Error/es: \n");
You can use .join()
var msg = "Error/es: \n" + errores.join("\n");
you should specify a name and id to your form...
here is a working code :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form onsubmit="return validarIDC()" name="contactForm" id="contactForm">
<div class="labelBox">
<div>
<label>Destinatario:</label>
<select name="destinatario">
<option value="hombre">Sr.</option>
<option value="mujer">Sra.</option>
</select>
</div>
<div>
<label>Apellido y<br>nombre:</label>
<input type="text" id="nombre" name="nombre"> *
</div>
<div id="ubicarCampo">
<label>Razón Social:</label>
<input type="text" name="razon">
</div>
<div>
<label>Email:</label>
<input type="email" name="email"> *
</div>
<div>
<label>Teléfono:</label>
<input type="text" name="telefono"> *
</div>
<div>
<label>Celular:</label>
<input type="text" name="celular">
</div>
<div>
<label>Via de Contacto:</label>
<select name="via">
<option value="opc1">E-mail</option>
<option value="opc2">Telefono</option>
<option value="opc3">Correo postal</option>
</select>
</div>
<div>
<label>Comentarios:</label>
<textarea max="300"></textarea>
</div>
<input name="submit" type="submit" value="Enviar">
</div>
</form>
<script type="text/javascript">
function validarIDC() {
var errores = [];
var er = /^[\w]+$/;
if (document.contactForm.nombre.value == "" || document.contactForm.nombre.value == null) {
errores.push("El nombre es obligatorio.");
}
else if (!er.test(document.contactForm.nombre.value)) {
errores.push("El nombre contiene caracteres no validos o Espacios.");
}
if (document.contactForm.telefono.value == "") {
errores.push("Debe ingresar un telefono")
}
else if (isNaN(document.contactForm.telefono.value)) {
errores.push("El campo telefono contiene caracteres no validos.");
}
if (document.contactForm.email.value == "") {
errores.push("Debe especificar una dirección de Email.");
}
if (document.contactForm.celular.value !== "" && isNaN(document.contactForm.celular.value)) {
errores.push("El campo celular contiene caracteres no validos.");
}
if (errores.length > 0) {
msg = alert("Error/es: \n");
for (var i = 0; i < errores.length; i++) {
msg += errores[i] + "\n";
}
alert(msg);
return false;
}
document.contactForm.submit.disable = true;
alert("Los datos han sido enviados exitosamente!");
return true;
}
</script>
</body>
</html>

innerHTML not affecting div

I have a problem with innerHTML
I'm trying to replace all child elements of a div (wipe it out) and replace with a text. Just to give you idea, this is a registration form, after clicking submit, it should clear the form and output some text. It looks like it doesn't take any affect on the div that I am targeting
here is the function
function signup() {
var u = _("username").value;
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var c = _("country").value;
var g = _("gender").value;
var status = _("status");
if (u == "" || e == "" || p1 == "" || p2 == "" || c == "" || g == "") {
status.innerHTML = "Fill out all of the form data";
} else if (p1 != p2) {
status.innerHTML = "Your password fields do not match";
} else if (_("terms").style.display == "none") {
status.innerHTML = "Please view the terms of use";
} else {
_("signupbtn").style.display = "none";
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "signup.php");
ajax.onreadystatechange = function() {
if (ajaxReturn(ajax) == true) {
if (ajax.responseText.trim() != "signup_success") {
status.innerHTML = ajax.responseText;
_("signupbtn").style.display = "block";
} else {
_("signupform").innerHTML = "OK " + u + ", check your email inbox and junk mail box at <u>" + e + "</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
}
}
}
ajax.send("u=" + u + "&e=" + e + "&p=" + p1 + "&c=" + c + "&g=" + g);
}
and here is the form:
<form name="signupform" id="signupform" onsubmit="return false;">
<div>Username: </div>
<input id="username" type="text" onblur="checkusername()" onkeyup="restrict('username')" maxlength="16">
<span id="unamestatus"></span>
<div>Email Address:</div>
<input id="email" type="text" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88">
<div>Create Password:</div>
<input id="pass1" type="password" onfocus="emptyElement('status')" maxlength="16">
<div>Confirm Password:</div>
<input id="pass2" type="password" onfocus="emptyElement('status')" maxlength="16">
<div>Gender:</div>
<select id="gender" onfocus="emptyElement('status')">
<option value=""></option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
<div>Country:</div>
<select id="country" onfocus="emptyElement('status')">
<?php include_once( "php_includes/template_country_list.php"); ?>
</select>
<div>
<br>
<br>
<a href="#" onclick="return false" onmousedown="openTerms()">
View the Terms Of Use
</a>
</div>
<div id="terms" style="display:none;">
<br>
<br>
<h3>Please read the Terms and Conditions (opens a new window)</h3>
<a href="iLOVEiTtermsandCONS.pdf" title="Terms and Conditions" target="_blank">
<p>Terms and Conditions</p>
</a>
</div>
<br />
<br />
<button id="signupbtn" onclick="signup()">Create Account</button>
<span id="status"></span>
</form>
any ideas what could be wrong? I'm not good with java script at all
Thanks in advance.
I don't know what does _(" ").value mean. But if you change this style to document.getElementByid(" "), it works.

Categories

Resources