AJAX request sends empty form data to PHP

Question

This is the code which sends data to the database. It works correctly when I filled form field and click the 'Add Record' button. It inserts the data successfully in the database.

However the main problem is that if the form field is empty and then I click the button, it sends empty data to the database.

function addRecord() {
  var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form
  $.ajax({
    url: "ajax/EditDeleteLecture.php",
    type: "post",
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function(output) {
      alertify.set('notifier', 'delay', 3);
      alertify.set('notifier', 'position', 'top-right');
      alertify.success('Data Inserted Successfully');
      readRecords();
      $('#form1').trigger("reset");
    }
  });
}

In `ajax/EditDeleteLecture.php`, do a `print_r($_POST);` and post the output here. — Blue, Oct 23 '18 at 10:21
`if the form field is empty and then I click the button, it sends empty data to the database` This is standard behaviour. Is your problem that you want to validate all fields are completed before allowing the form to be submit? Also, *remove `async: false`*. It's terrible practice and there's no need for it here as you're using the callback pattern properly. — Rory McCrossan, Oct 23 '18 at 10:21
add `required` attribute in input tag like ``. also you can used javascript & jquery for validate before ajax request send — Bilal Ahmed, Oct 23 '18 at 10:21

score 1 · Answer 1 · answered Oct 23 '18 at 10:30

1

you have 3 places where you can tackle empty data issue before saving to database

1- Put required attribute in your input elements so that user can not submit empty fields.

2- validate your form data in java-script function addRecord() before making ajax request. if the validation is complete send ajax call else show message to user to fill the data.

3- validate your data that you received in $_POST variable and if fields are empty, send error message back in ajax response and show error to user.

answered Oct 23 '18 at 10:30

Asad Rehman

84
10

How can I validate it? – John Merry Oct 23 '18 at 10:41
put required in form input tags like this – Asad Rehman Oct 23 '18 at 10:50

score 0 · Answer 2 · answered Oct 23 '18 at 10:56

When You get form data value while you should the form field value is empty or not... or use print_r($_POST) data..

/* on submitting my form */

  $( '#myform' ).submit(function() {

               var errors = [];

        /*     else if Textarea is empty display message error */
               if($('#myform textarea').val()=="") {  
                    errors[errors.length] = 'enter your message';
                }

        /*      if radio button is not being selected display message error */
                if (!$(":radio:checked").attr('checked')) {
                   errors[errors.length] = 'select a radio';
                }

                if(errors.length > 0){
                    var errMsg = "Please "

                    for(e = 0; e < errors.length-1; e++){
                        errMsg += errors[e]+", ";
                    }

                     errMsg = errMsg.substr(0, errMsg.length -2)+" and "+errors[errors.length-1];
                     $('#errors').empty().text(errMsg);
                     return false;
                }

        /*          Everthing is good display success message and add SENDING class to submit button */
                    else {
                        $('#myform :submit').addClass('sending').html('Sending message...');
                        $('#errors').empty().text('All Good :D');
                    }
                return false;
            });
        });

score -1 · Answer 3 · answered Oct 23 '18 at 10:43

-1

Make sure to set the contentType property to "application/x-www-form-urlencoded" in order to parse this in the backend server.

answered Oct 23 '18 at 10:43

front_end_dev

1,998
1
9
14

AJAX request sends empty form data to PHP

3 Answers3