Script does not work

Navigation
0

The purpose is if the field is empty write in the "label" that the field can not be empty.

The purpose of the form is to go to the ConfirmNovaParagem.php to send the data and then the ConfirmNovaParagem sends the user to the page to add stops.

What happens is that the script does not work and goes to the ConfirmaNovaParagem.php soon.

I'm a beginner in javascript sorry for any obvious error. 

<script type="text/javascript" language="javascript">
    function valida_form (){
        if(document.getElementById("adicionanomeparagem").value == ""){
            var div = document.getElementById("adicionanomeparagem");
            div.innerText = "Não pode estar vazio!"        
        }
    }
</script>
<div id="content">       
    <div id="segundofundo">
        <div id="titulo">
            <center>Adicionar Paragem</center>
        </div>
        <form name="Adicionaparagem" action="confirmaNovaParagem.php" method="post">
            <div id="fundotitulo"><br><br>
                Nome da paragem:<br><br>
                <input type="text" name="adicionanomeparagem"><br><br>

                Latitude paragem:<br><br>
                <input type="text" name="adicionalatitudeparagem"><br><br>

                Longitude paragem:<br><br>
                <input type="text" name="adicionalongitudeparagem"><br><br>

                Estado paragem: <br><br>            
                <select name="estadoparagem">
                    <option value="1">Activa</option>
                    <option value="2">Inactiva</option>
                </select><br><br>

                <div id="posicaobotao">
                    <input class="botao" value="Adicionar"  onclick="valida_form ()" type="submit" >
                </div>
            </div>
       </div>
    </form>
    
asked by anonymous 17.05.2016 / 12:29

2 answers

0

I'll list what I found in your file, which may be causing you problems.

  • Your html is not fully formed. There is a div extra closure before closing form .

  • Your function did not contain a return, so every time you clicked the button, the submit action was performed.

  • Your onclick was calling the function, but it was not handling the return, when it gets, onclick="return valida_form()" , it executes the function and if the return is false, the submit is not executed. If the return is true, the submit is executed.

  • In this line document.getElementById("adicionanomeparagem").value == "" you are trying to get the element by the id, but its inputs have no id and yes name. Add the id property to the desired input.

  • In this line var div = document.getElementById("adicionanomeparagem"); you were trying to get a "div" that has the same id of your input. What would not be correct, since the id is unique, that is, only one element in the gift, can have that id.

    • Here's a good reference for how to do forms validation.

    17.05.2016 / 13:05
    0

    You have to stop sending the form with event.preventDefault() , which prevents button from acting as expected. Then you make the verification and, if it is valid,%% of%

    Take a look at this example, after clicking on form.submit(); it waits 5 seconds and sends the form, thus interrupting what is expected. 

    var button = document.querySelector('button');
var form = document.querySelector('form');
button.addEventListener('click', function(e) {
    e.preventDefault();
    setTimeout(function() {
        form.submit();
    }, 5000);
});

    jsFiddle: link

    In your case the code would have to be: 

    <input class="botao" value="Adicionar"  onclick="valida_form(event)" type="submit" >

    and in the function: 

    function valida_form (e){
    e.preventDefault();
    // resto da lógica de validação
    // ...
    // e depois, se tudo estiver certo:
    document.querySelector('form[name="Adicionaparagem"]').submit();
        
    17.05.2016 / 12:46
    Use AsyncTask in web page data capture in Android app Variables returning trying to get object of non object