0

I'm building one cordova application that uses one tag form with a submit button, the problem is that this is one mobile application, so when a click on my text input, write something and than click on confirm button of my mobile keyboard, my problem happens. Because when I click on this button, I want to move to the next input, but my aplication execute my submit method. What I have to do to my application pass to the next input and if, and only if this is my last input, so verify if all input are filled.

This is my html code:

<form id="form">
    <label for="idNome"> Nome: </label> <input name="nome" id="idNome"
        placeholder="Seu Nome" required autofocus autocomplete="on"><br>

    <label for="idCpf"> CPF:</label> <input type="tel"
            autocomplete="on" name="cpf" id="idCpf" placeholder="Seu CPF"
            required> <img style="display: none;" id="idValidadeCPF"
            src=""><br> 

    <label for="idEndereco"> Endereço:</label>
    <textarea id="idEndereco" rows="1" cols="30"></textarea><br>

    <label for="idMensagem"> Mensagem: </label><br>
    <textarea cols=30 id="idMensagem" rows="10" name="mensagem"
            maxlength="500" wrap="hard"
            placeholder="Informe datalhes sobre o seu problema." required></textarea><br>

    <input type="submit" value="Enviar" onclick="submitForm()" />

And this is my submitForm method

function submitForm(){
    document.getElementById('form').onsubmit= function(e){
        e.preventDefault();
        alert("Todos os campos devem ser preenchidos");
    }
}
Carlos Porta
  • 1,224
  • 5
  • 19
  • 31

1 Answers1

0

Your submitForm() function isn't actually doing the logic it contains, it's just setting a handler. It's basically just doing this:

document.getElementById('form').onsubmit = someFunction;

And that's all. Whatever's inside of someFunction isn't going to be executed until the next time the handler is invoked. But it sounds like you want it invoked right away.

Instead of assigning the submit handler when you submit the form, assign it right away when the page loads. Something like this:

<form id="form">
    ... your form
    <input type="submit" value="Enviar" />
</form>
<script type="text/javascript">
    document.getElementById('form').onsubmit = function(e){
        e.preventDefault();
        alert("Todos os campos devem ser preenchidos");
    }
</script>

Notice that I've removed the submitForm function entirely, as well as removed it from the input which was calling it. It isn't really needed in this case. That input is of type submit so it will submit the form by default. But when the page loads this JavaScript adds your anonymous function as the handler for the form's submit event, so this function will run when the input submits the form.

It's worth noting that this will prevent the form from ever actually being submitted, though. You're only submit handler prevents the default action (submitting the form) and shows an alert(). It's not clear to me why you're doing that or what you're trying to accomplish.

David
  • 208,112
  • 36
  • 198
  • 279
  • Thanks for your help David, I understand what you said, the problem is that searching onde web, I do not understand the use of "preventDefault()". What I want is one method that verify if all input are filled and if they are filled, I want to submit, else not. And the other problem is that when I click o my mobile keyboard submit button, I do not want to submit my form, I just want to pass to the next input of my form. – Carlos Porta Dec 21 '13 at 13:27
  • @Caaarlos: You're talking about several concerns here, and each should be broken apart into its own functionality. Form validation can take many shapes. It could be something as simple as checking in the JavaScript code if the form elements have values in them and *then* calling `.preventDefault()` only if the condition finds an empty value. As for passing the focus from one form element to another, this should help: http://stackoverflow.com/q/17500704/328193 – David Dec 21 '13 at 13:30
  • Thanks again David, I was thinking that '.preventDefault()' was used to check if all inputs of my form were filled, but '.preventDefault()' does not do that. So I changed my code now, lets see if its is the correct form... I create some var that receive the value of my elements, like this: 'var usuarioNome = document.forms[0].elements[1].value;', now I will verify if its value is null or "" o " ". And if it is true i use '.preventDefault()'. Is this the right thing? – Carlos Porta Dec 21 '13 at 13:46
  • @Caaarlos: That's the general structure, yes. I can't guarantee that it will work, but it's worth testing. – David Dec 21 '13 at 14:20