Problems redirecting and validating form in javascript

1

good! I'm pretty new with javascript and I'm having a serious problem validating and redirecting the input. This is my html code:

<div class="grid-container">
    <a href="index.html" class="back"><span></span> < </a>
</div>

<div class="flex-container-registro">
    <div class="cuadroAzul">
        <p>REGISTRATE<br/>
        Ahora crea tu codigo de seguridad</p>
    </div>

    <form class="registro" id="rCod" onsubmit="return registroCs()" >
        <input type="text" class="security"  maxlength="1" id="rCod1" required>
        <input type="text" class="security"  maxlength="1" id="rCod2" required>
        <input type="text" class="security"  maxlength="1" id="rCod3" required>
        <input type="text" class="security"  maxlength="1" id="rCod4" required>
    <div class="infoRegistro">
        <p>Recordalo, lo vas a necesitar siempre que necesites Cargar Saldo</p>
    </div>

    <input class="botonRegistro" type="submit" value="Continuar" id="ContinuarRegistro" >
    </form>
</div>

this is my code js

function registroCs(){
		cs1= document.getElementById("rCod1").value;
		cs2= document.getElementById("rCod2").value;
		cs3= document.getElementById("rCod3").value;
		cs4= document.getElementById("rCod4").value;
		
		if ( cs1.length > 1 || cs2.length > 1 || cs3.length > 1 || cs4.length > 1  ) {
			error= true;
		} else if (cs1 != "" && cs2 != "" && cs3 != "" && cs4 != ""){
			error= false;
		}

		if (error == false) {
			alert("a otro lado");
			document.location.href = "registro2.html";
			return true;
		}

	}

if anyone has an idea why it does not generate the redirection to the next page and can share it would be very helpful

    
asked by Matti Vaccaro 24.11.2017 в 06:01
source

1 answer

2

Here is an example. In the action you must place the page that will process your form and the input must have attribute name . Now, when you do the "redirection" in your code you use a static Html address "registro2.html", not a script, so it is not clear how you intend to process the data that the user enters in the form. At the moment I will use the url below in my action.

<form class="registro" id="rCod" action="http://jkorpela.fi/cgi-bin/echo.cgi" 
    onsubmit="return validar()" >
    <input type="text" class="security"  maxlength="1" id="rCod1" name="rCod1" required />
    <input type="text" class="security"  maxlength="1" id="rCod2" name="rCod2" required />
    <input type="text" class="security"  maxlength="1" id="rCod3" name="rCod3" required />
    <input type="text" class="security"  maxlength="1" id="rCod4"  name="rCod4" required />
    <div class="infoRegistro">
        <p>Recordalo, lo vas a necesitar siempre que necesites Cargar Saldo</p>
    </div>

    <input class="botonRegistro" type="submit" value="Continuar" id="ContinuarRegistro" />
</form>

In the Javascript you do the validation. From what I understood from your comments and code, the data is valid as long as something has been written.

function validar() {
    cs1 = document.getElementById("rCod1").value;
    cs2 = document.getElementById("rCod2").value;
    cs3 = document.getElementById("rCod3").value;
    cs4 = document.getElementById("rCod4").value;
    return cs1.trim() != "" && cs2.trim() != "" && cs3.trim() != "" && cs4.trim() != "";
}

Note: Since the form tag does not have method attribute, it is being sent by GET.

    
answered by 24.11.2017 / 10:22
source