2017-05-31 85 views
0

我有这样的形式:禁用提交按钮JavaScript时触发

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

checker_phone连接到通过其他PHP页面运行的脚本。

脚本:

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

PHP页面:

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

上面的代码工作。现在,我想要禁用提交按钮,只要php的计数结果返回1.有什么办法可以做到这一点?

Javascript是好的,但我更喜欢简单的,而不是长而复杂的脚本。

+1

开始ajax开机自检之前,加的残疾人属性按钮,然后在成功移除已停用的属性 – Akintunde007

+3

'$( '输入[名称= button_submit]') .prop('disabled',data ==“该电话号码已经注册了)' – guradio

+1

你在提交过程中使用了ajax吗? –

回答

1

拳我建议避免内联JS在这种情况下,只是为了更好的代码维护 第二给你的领域和按钮一些标识符

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

保持JS代码分开的原因上面提到。

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

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