deaktivieren Absenden-Button, wenn Sie Javascript

Question

ausgelöst Ich habe diese 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> 

Die checker_phone mit einem JavaScript verbunden ist, die durch eine andere PHP-Seite ausgeführt wird.

Das Skript:

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

Die PHP-Seite:

$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"; 
} 

Der obige Code funktioniert. Jetzt möchte ich den Submit-Button deaktivieren, wenn das Ergebnis aus der PHP-Zahl 1 zurückgibt. Gibt es einen Weg, wie ich das könnte?

Javascript ist gut, aber ich bevorzuge einfache, anstatt lange und komplizierte Skripte.

Answer 1

Faust Ich würde vorschlagen, nur für eine bessere Code Wartung in diesem Fall Inline JS vermeiden zweite geben Sie Ihrem Feld und Taste einige Kennungen

<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> 

Halten Sie die JS-Code getrennt aus Gründen oben erwähnt.

<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);