CODEWITHSUNDEEP
javascriptjqueryajax
thecreator
thecreator

Reputation: 35

Prevent ajax submit with blank inputs and selects

I'm stuck on here:

//Saving Data
    $('#saveButton').click(function(){

        var teamA = $('#teamA').val();
        var teamB = $('#teamB').val();
        var date = $('#date').val();
        var timeOfEvent = $('#timeOfEvent').val();
        var live = "0";
        if($("#live").is(':checked'))
            live = $('#live').val();

        $.ajax({
            url  : "ajax.php",
            type : "POST",
            async: false,
            dataType: "json",
            data :
            {
                'submitAddEvents' : 1,
                'teamA' : teamA,
                'teamB' : teamB,
                'date' : date,
                'timeOfEvent' : timeOfEvent,
                'live' : live,
            },
            success:function(data)
            {

                if(!data.success) {
                    alert(data.message);
                }else{
                    window.location = "addEvents.php";
                }

            }
        });
    });

That's what I already have.. It's "everything" ok BUT even with required in inputs and selects when I click on button It inserts the data into the database without prevent the blank inputs or selects...

WHAT I ALREADY DID I put a <form> and I changed my ajax

$('#saveButton').click(function(){

to

$('#saveButton').submit(function(ev){
ev.preventDefault();

And didn't work.. In this case It blocks the empty inputs but when I fill the inputs and click on button nothing happens..

Upvotes: 0

Views: 56

Answers (2)

Williams I. Mart&#237;nez
Williams I. Mart&#237;nez

Reputation: 56

First of all, instead of using .val() to each input that you have, you can just use var data = $("#myform").serialize(); and you will have all the submitted inputs inside the form, you can do a console.log(data); and you will see the results there.

Another thing is: If you want to validate the data you need to register the form submit, not the button click, so, instead of using $("#savebutton").click(function(){}); use $("#myform").on('submit', function(){}); and to all your html inputs should be like this:

<input type="text" name="stack" placeholder="Name" required>

And its going to work.

Upvotes: 1

Jose Rojas
Jose Rojas

Reputation: 3520

you must select your form, not your button to attach submit listener, instead of this:

$('#saveButton').submit(function(ev){
ev.preventDefault();

change to:

$('#myform').submit(function(ev){
ev.preventDefault();

Upvotes: 1

Related Questions