how can page reload disabled when data get using ajax success function in javascript codeigniter php?

Question

I have a registration form and want to check if registered user will try to register again to show a alert window already registered using ajax function.

i have used codeigniter framework.

my function is working properly but when alert popup and press ok page is reloaded. i want to disable

my form code:

<form class="modal-content" name="form2" action="<?= $this->config->base_url();?>home/register_user" method="post" onSubmit="return ValidateRegister()">
                                              <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                          </button>
                          <h4 class="modal-title">Create your account</h4>
                        </div>
                       <div class="page-content vertical-align-middle" style="display:block;">
      <div class="form-group has-error">
                    <label class="control-label" for="inputTokenfieldError-tokenfield"> <?php echo validation_errors();  ?></label>

                  </div>
        <div class="form-group form-material floating">
          <input type="text" class="form-control " id="inputName" name="username" value="<?php echo set_value('username'); ?>" autocomplete="off">
          <label class="floating-label">Username</label>
        </div>
        <div class="form-group form-material floating">
          <input type="email" class="form-control " id="my_email" name="email" value="<?php echo set_value('email'); ?>" autocomplete="off">
        <label class="floating-label">Email</label>
        </div>
        <div class="form-group form-material floating">
          <input type="password" class="form-control " id="inputPassword" name="password" autocomplete="off">
          <label class="floating-label">Password</label>
        </div>

 <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block">Join Now - It's Free</button>
 </div>

      </form>

my javascript function:

function checkRegistrations() 
        {
            var email = $('#my_email').val();
            $.ajax({
                url: "<?= base_url() ?>home/checkRegistration",
                async: false,
                type: "POST",
                data: "email="+email,
                dataType: "html",
                success: function(data) {
                  //  alert(data);
                    if(data==1)
                    {

                    //event.preventDefault();
                    alert('Email already registered');
                    return false;
                    window.location.reload(false);
                    }
                    else{

                        return true;
                    }
                }
            })
        }

Answer 1

Just add an id to the submit button, say #submitbutton.

and use the .prop() method of jQuery to set the disabled attribute of the button.

$("#submitbutton").prop("disabled", true);

IMP: This will only work if you are keeping the same page on ajax success, But if you are reloading the page then you need to check it on php side whether this form has been submitted in this current $_SESSION.

So inside your php ajax handler, you can do the check as follows.

session_start();
if(!empty($_POST) && empty($_SESSION['post'])) {
    $_SESSION['post'] = true;
    ... do your code
    unset($_SESSION['post']);
}else{
// send the json encoded error message 
}

And on the html form just add a hidden input with the name post and set value to 1 or something whatever you deem fit, so once the form is submitted, the post key will be set inside the $_SESSION SuperGlobal Array, and if the same form is submitted twice by the same user then php wont accept it.

Answer 2

You are returning true/false from inside an annon. function i.e. success handler. But parent function is not returning true/false.

Modify your code like this :

function checkRegistrations() 
        {
            var email = $('#my_email').val();
            var isValid = true;
            $.ajax({
                url: "<?= base_url() ?>home/checkRegistration",
                async: false,
                type: "POST",
                data: "email="+email,
                dataType: "html",
                success: function(data) {
                    if(data==1)
                    {
                    alert('Email already registered');
                    isValid = false;
                    }
                }
            });
           return isValid;
        }