Sending form to parse.com after validation

Question

I want to send my form to parse.com but only if all fields are filled in. The problem is that even with the validation script, the form still gets submitted when I press the submit button even if all fields are empty.

I have tried using a button instead of the input type=submit but then the form doesn't get sent to parse.com even with all the fields filled.

I have the following HTML & JQuery:

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() return false;">

       <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.');
    }else {
        document.vcardForm.submit();
    }
}
</script>

<script>
    function functions() {
        validateForm();
    }
</script>

Jquery:

$(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);
            }
        });

    });

});

Any help would be greatly appreciated.

Thanks.

Tharaka Karunarathne · Accepted Answer · 2015-01-22 10:46:08Z

Use jquery form submit as follows

$(document).ready(function() {

    // process the form
    $('#vcardForm').submit(function(event) {

        // get the form data
        var formData = {
        data.name = $("#name").val();
        data.vorname = $("#vorname").val();
        data.fullemail = $("#fullemail").val();
        data.telefon = $("#telefon").val();
        data.firma = $("#firma").val();

        var vcard = new VcardObject();
        };

        // process the form
        $.ajax({
            type        : 'POST',
            url         : 'parse.com', // **the url where you want to POST**
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
                        encode          : true
        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

});

Only url: 'parse.com' will not work here. You have to specify the file that is waiting for the data. Eg: 'parse.com/index.php'

Hope this helps

Collectives™ on Stack Overflow

Sending form to parse.com after validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related