About Form , Ajax

Question

I have a HTML form with ID hello

and i have ajax like this

jQuery(document).ready(function($) {
    $("#hello").submit(function(){

        var $form = $(this);
        var serializedData = $form.serialize();


        request = $.ajax({
            url: "/blog/ajaxphp/registration_check.php",
            type: "post",
            data: {formData:serializedData},
            datetype: "JSON"
        });
        request.done(function (response, textStatus, jqXHR){
            console.log("hellosss");
            if(jQuery.parseJSON(response).success==undefined){
                $form.unbind('submit').submit();
            }else{
                return false;
            }
        });
        request.fail(function (jqXHR, textStatus, errorThrown){
            console.log("error");
        });

     return false;

    });
});

But Submit button is not working . i mean it is working if i pressit two times ..

It logs this

Uncaught TypeError: object is not a function in this line $form.unbind('submit').submit();

Question :

1. How do i make form enable submit when jQuery.parseJSON(response).success==undefined is true otherwise disable form to submit .
2. How do i disable ajax button while ajax process is being performed.

Answer 1

$("#hello").submit(function(){
    return false;  <-- You are exiting the function right away
    //nothing runs here

Use evt.preventDefault();

$("#hello").submit(function(evt){
    evt.preventDefault();

or if you really want to use return, but it at the BOTTOM.

Also the return false in an asynchronous Ajax call does nothing. It is impossible to return anything from an asynchronous call.

EDIT

and you have a typo

if(jQuery.parseJSON(response).sucess==undefined){  <-- that is not how you spell `success`

Double Edit, see if breaking it up into two parts work.

$form.unbind('submit');
$form.submit();