how to force the ajax function to go inside success function?

Question

I am using bootstrap register form to take information of users and store them in my database I use ajax request to submit the form information and store it after validation .

The information is validated correctly and then stored correctly in my database.

the problem is after storng the information the request does not return a response.

This is the validation bootstrap code and the ajax request :

$(document).ready(function(){
    //To validate the registration form and save its value after validation
    $('#registerForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    notEmpty: {
                            message: 'The email is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
        }
    })
    .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data           
            $.ajax({
                type: "POST",
                url: $form.attr('action'),
                data:$(form).serialize(),
                dataType: "json",
                success: function(data)
                {
                     alert(data);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest);
                        alert(textStatus);
                        alert(errorThrown);
                        alert(XMLHttpRequest.responseText);
               }
            });
        });
});

The ajax function does not go inside any of the success or error functions as I said it works fine and store everything correctly but instead of return to the ajax function it prints the respons in the browser .

This is also the php page :

<?PHP
$server_root = "../";
include_once("{$server_root}include-sql/mysql.class.php");
include_once("{$server_root}config.php");
Global $db1;
$db1 = new db_mysql($conf['db_hostname'], $conf['db_username'], $conf['db_password'], $conf['db_name']);
$db1->query("SET NAMES utf8");
date_default_timezone_set('Asia/Istanbul');

$email = mysql_real_escape_string($_POST['email']);

$sql = $GLOBALS['db1']->query("INSERT INTO users (email) VALUES ('$email')");

if($sql)
{
    $msg = 'Success';
}
echo json_encode($msg);
?>

The msg is printed after submission I can not alert it because it is not returning to the ajax success function ??? Is there any thing wrong or did I miss any thing in this code ?

you've asked this before and your problem seems like the form is submitting directly through browser default submit. Is the form being loaded by ajax and therefore not available when your code runs? Try `alert( $('#registerForm').length)` — charlietfl, Oct 12 '14 at 12:33
my form does not loaded by ajax . it is html form and i validate it with this `jQuery`code . and I stop the default submission as u can see in the code `e.preventDefault();` and when I alert the form length after the document load and before submitting anything , it shows `1` — Basel Shbeb, Oct 12 '14 at 12:40
the page reload the php page (that has the sql query which save the information and then return the jason msg) not the registration page — Basel Shbeb, Oct 12 '14 at 12:45
that means the `preventDefault` isn't working. Best guess is there are script errors in page blocking your code from running, or selector is wrong or the use of plugin is incorrect — charlietfl, Oct 12 '14 at 12:48
would also break if the form element gets moved in the DOM after your code runs , such as inserted into a modal — charlietfl, Oct 12 '14 at 13:06

score 0 · Answer 1 · answered Oct 12 '14 at 12:30

0

It is expecting a json response. You are not returning one. $msg is a string and cant be encoded into json.

I would do this:

$success = false;
if($sql)
{
    $success = true;
}
echo json_encode(array("success" => $success));

then in your success function:

alert(data.success);

answered Oct 12 '14 at 12:30

Brian

903
1
7
13

it is still printing not alerting but instead of printing `success` now it prints `{"success":true}` – Basel Shbeb Oct 12 '14 at 12:36
Sounds like it is not preventing the normal post. Is the url changing to your php page? – Brian Oct 12 '14 at 12:40
add this to your form chaining and see if it helps: .on('submit', function(e) {e.preventDefault();}) – Brian Oct 12 '14 at 12:45
if u check the form u will see this line I have already prevent the defualt – Basel Shbeb Oct 12 '14 at 12:46
1

you are not preventing the submit event. you are preventing the success.form.bv event which is not the same. – Brian Oct 12 '14 at 12:47
this is the submission way in bootstrap forms – Basel Shbeb Oct 12 '14 at 12:50

how to force the ajax function to go inside success function?

1 Answers1