CODEWITHSUNDEEP
javascriptphpjquery
Dranreb
Dranreb

Reputation: 313

Disable submit button when javascript triggered

I have this form:

<form action = "" method = "post">
   <input type = "text" name = "tbox_phone" placeholder = "phone" onkeyup="checker_phone(this.value)">
   <div id = "msg"></div>
   <input type = "submit" name = "button_submit" value = "submit">
</form>

The checker_phone is connected to a JavaScript that runs through another PHP page.

The script:

<script>
    function checker_phone(val)
    {
        $.ajax ({
          type:"POST",
          url:"check_phone.php",
          data:'phone='+val,
          success: function(data){
            $("#msg").html(data);
          }
        });
    }
</script>

The PHP page:

$phone = htmlentities($_POST['tbox_phone']);

$var_phone= mysqli_real_escape_string($connect,$phone);

$search= "SELECT * FROM users WHERE phone= '$var_phone' ";
$exec= mysqli_query($connect,$search);
$count = mysqli_num_rows($exec);

if($count==1) {      
  echo "that phone number is already registered";
}

The above code worked. Now I want to disable the submit button whenever the result from the php's count returns 1. Is there any way I could this?

Javascript is good, but I prefer simple ones, rather than long and complicated scripts.

Upvotes: 0

Views: 69

Answers (1)

George Dryser
George Dryser

Reputation: 322

Fist I'd suggest avoiding inline JS in this case just for better code maintenance second give your field and button some identifiers 

<form action = "" method = "post">
   <input id="userPhone" type = "text" name = "tbox_phone" placeholder = "phone">
   <div id = "msg"></div>
   <input id="submitAction" type = "submit" name = "button_submit" value = "submit">
</form>

Keep the JS code separate for reasons mentions above.

<script>
$( document ).ready(function() {
    // Event handler
    $('body').on("keyup", '#userPhone', function () {
         $('#submitAction').removeAttr('disabled'); // user is typing, reactivate the submit button
         checker_phone($('#userPhone').val());  
    });
    // Ajax handler
    function checker_phone(val)
    {
        $.ajax ({
          type:"POST",
          url:"check_phone.php",
          cache: false,
          data:{'phone':val}, // do not include parts of sql query in your JS!!!
          success: function(data){
            if(data.msg){
                $("#msg").html(data.msg);
            }
            if(!data.phoneIsUnique){
                 $('#submitAction').attr('disabled','disabled');
            }
          }
        });
    }
});
</script>

PHP Code

// connecting to db
$mysqli = new mysqli(
            $connectionData['DB_HOST'], // some array containing connection info
            $connectionData['DB_USER'],
            $connectionData['DB_PASSWORD'],
            $connectionData['DB_NAME']
        );
$mysqli->set_charset('utf8');

$resultData = ['msg'=>'','phoneIsUnique'=>true];

// parsing request
$phone = isset($_REQUEST['phone']) ? $_REQUEST['phone'] : '';

// avoid using 'SELECT *' to avoid unnecessary overhead
$stmt = $mysqli->prepare("SELECT `phone` FROM users WHERE phone=?");
$stmt->bind_param($phone); // never ever trust client input !!! so using bind.
$stmt->execute();
if($stmt->num_rows){
   $resultData = [
       'msg'=>'that phone number is already registered',
       'phoneIsUnique'=>false
   ];
}
// using Json to bounce data back to client
echo json_encode($resultData);

Upvotes: 1

Related Questions