Single click to submit form

Question

I'm having an issue when trying to submit my form. I have made a workaround so that the input gets sent to parse.com by using a hidden button which is visible until all fields are filled in, then this button is hidden and the real submit button is enabled. The problem is that I want to be able to submit the form directly by clicking the submit button without having to click the button twice. I have the following HTML:

<form id="vcardForm" method="post" >
    <p>
        <input type="text" id="name" name="name" required />
    </p>
    <p>
        <input type="text" id="vorname" name="vorname" required />
    </p>
    <p>
        <input type="text" id="email1" name="email1"  required />
        <label id="atteken" >@</label>
        <input type="text" id="email2" name="email2 "  required />
        <textarea  id="fullemail" name="fullemail"></textarea>
            <p>
        <input type="text" id="telefon" name="telefon" onclick="getFullemail()"     />
    </p>
    <p>
        <input type="text" id="firma" name="firma" required />
    </p>
    <p>
       <input type="submit" id="submitBtn" onclick="functions()" value=" " disabled>
       <button type="button" id="submitKnop" onclick="validateForm()" ></button>

Javascript:

       <script type="text/javascript">
            function getFullemail() {
                document.getElementById('fullemail').value =
                        document.getElementById('email1').value + '@' +
                        document.getElementById('email2').value;
            }

</script>

<script>
function validateForm() {
var name = document.getElementById('name').value;
var vorname = document.getElementById('vorname').value;
var email = document.getElementById('fullemail').value;
var firma = document.getElementById('firma').value;
var telefon = document.getElementById('telefon').value;
if(name == '' || vorname == '' || email == '' || firma == '' || telefon == '' ) {

alert('Bitte alle Felder ausfüllen. Danke.');
e.preventDefault();
}else {
document.getElementById('submitKnop').style.visibility = 'hidden';
document.getElementById('submitBtn').disabled = false;
}
}
</script>
<script>
    function functions() {
        sendTheMail();

    }
</script>

Parse.com script

$(document).ready(function() {

    var parseAPPID = "bla";
    var parseJSID = "bla";

    Parse.initialize(parseAPPID, parseJSID);
    var VcardObject = Parse.Object.extend("VcardObject");

    $("#vcardForm").on("submit", function(e) {
        e.preventDefault();

        console.log("Handling the submit");
        //add error handling here
        //gather the form data

        var data = {};
        data.name = $("#name").val();
        data.vorname = $("#vorname").val();
        data.fullemail = $("#fullemail").val();
        data.telefon = $("#telefon").val();
        data.firma = $("#firma").val();

        var vcard = new VcardObject();
        vcard.save(data, {
            success:function() {
            openPage('danke');
                console.log("Success");
            },
            error:function(e) {
                console.dir(e);
            }
        });

    });

});

Answer 1

It will spare your from using two buttons.When submit button is clicked check if all the fields are filled in or not.Use && operator instead of || operator. || operator. Because you want all the fields to be filled

if(name != '' && vorname != '' &&  email != '' &&  firma != '' && telefon != '' )

If all fields are filled it will alert a message which will tell you that your form is submitted.Otherwise it will alert you to fill all the fields

 function validateForm() { var name = document.getElementById('name').value; var vorname = document.getElementById('vorname').value; var email = document.getElementById('fullemail').value; var firma = document.getElementById('firma').value; var telefon = document.getElementById('telefon').value; if(name != '' && vorname != '' && email != '' && firma != '' && telefon != '' ) { alert('form is sumbitted.'); e.preventDefault(); }else { alert('fill all fields !!'); } } 

 <form id="vcardForm" method="post" > <p> <input type="text" id="name" name="name" required /> </p> <p> <input type="text" id="vorname" name="vorname" required /> </p> <p> <input type="text" id="email1" name="email1" required /> <label id="atteken" >@</label> <input type="text" id="email2" name="email2 " required /> <textarea id="fullemail" name="fullemail"></textarea> <p> <input type="text" id="telefon" name="telefon" onclick="getFullemail()" /> </p> <p> <input type="text" id="firma" name="firma" required /> </p> <p> <input type="submit" id="submitBtn" onclick="validateForm()" value=" submit " > 

Answer 2

If i understand you correctly, you'd like to click button after form is filed and if all fields are valid the form should be send. If so you need to do following changes: 1) remove from html

<input type="submit" id="submitBtn" onclick="functions()" value=" " disabled>

2) change your validateForm - replace this lines

document.getElementById('submitKnop').style.visibility = 'hidden';
document.getElementById('submitBtn').disabled = false;

with

functions()

Answer 3

modify validateForm

function validateForm() {
    var name = document.getElementById('name').value;
    var vorname = document.getElementById('vorname').value;
    var email = document.getElementById('fullemail').value;
    var firma = document.getElementById('firma').value;
    var telefon = document.getElementById('telefon').value;
    if(name == '' || vorname == '' || email == '' || firma == '' || telefon == '' ) {
        alert('Bitte alle Felder ausfüllen. Danke.');
        return false
    }
    return true
}

and replace

    console.log("Handling the submit");
    //add error handling here
    //gather the form data

with

if(!validateForm()) return
sendTheMail(...al your params here)

and the last step replace in your html

<input type="submit" id="submitBtn" onclick="functions()" value=" " disabled>
<button type="button" id="submitKnop" onclick="validateForm()" ></button>

with

<input type="submit" id="submitBtn" value=" ">