Wie Sie die Übermittlungsschaltfläche deaktivieren, bis die Validierung im spezifischen Feld

Question

übergeben wurde. Ich möchte ein Formular senden. In der Form habe ich ein Feld namens sitename. Wenn der Benutzer einen Site-Namen eingibt, der bereits in der Datenbank vorhanden ist, wird die Meldung "Dieser Name wird bereits verwendet" angezeigt und einige Vorschläge gemacht. Bis zu diesem Punkt funktioniert es. Aber was ich will, ist, den Absenden-Knopf zu verbergen, bis der Benutzer einen gültigen Wert in dieses Feld eingibt.

Hier ist mein Code:

form.php:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#sitename").keyup(function() { 
      var sitename = $('#sitename').val(); 
      if(sitename=="") 
       { 
       $("#disp").html(""); 
      } 

      else 
       { 
       $.ajax({ 
        type: "POST", 
        url: "check_name.php", 
        data: "sitename="+ sitename , 
        success: function(html){ 
         $("#disp").html(html); 
        } 
       }); 
       return false; 
      } 
     }); 
    }); 
</script> 

<div class="form-group col-sm-3 col-xs-12"> 
<button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup">Submit</button> 
</div> 

check_name.php:

include('dbconnect.php'); 
if(isset($_POST['sitename'])) 
{ 
    $sitename=mysql_real_escape_string($_POST['sitename']); 
    $query=mysql_query("select * from template_users where sitename='$sitename'"); 
    $row=mysql_num_rows($query); 
    if($row==0) 
    { 
     /*echo "<span style='color:white;'>Available</span>";*/ 
    } 
    else 
    { 

     $msg = $sitename.rand (1 , 10000); 
     $msg1 = $sitename.rand (1 , 100); 

     echo "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>"; 
    } 
} 

Answer 1

diesen Code Versuchen Sie,

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#sitename").keyup(function() { 
      var sitename = $('#sitename').val(); 
      if(sitename=="") 
      { 
       $("#disp").html(""); 
      } 

      else 
      { 
       $.ajax({ 
        type: "POST", 
        url: "check_name.php", 
        data: "sitename="+ sitename , 
        success: function(html){ 
         if(html != 'success') 
         { 
          $("#disp").html(html); 
          $("#btn-signup").hide(); 
         } 
         else 
         { 
          $("#btn-signup").show(); 
         } 
        }, 

       }); 
       return false; 
      } 
     }); 
    }); 
</script> 

<div class="form-group col-sm-3 col-xs-12"> 
    <button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup" style="display:none;">Submit</button> 
</div> 

Und in Ihrem check_name .php

<?php 

include('dbconnect.php'); 
if(isset($_POST['sitename'])) 
{ 
    $sitename=mysql_real_escape_string($_POST['sitename']); 
    $query=mysql_query("select * from template_users where sitename='$sitename'"); 
    $row=mysql_num_rows($query); 
    if($row==0) 
    { 
     echo "success"; 
    } 
    else 
    { 

     $msg = $sitename.rand (1 , 10000); 
     $msg1 = $sitename.rand (1 , 100); 

     echo "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>"; 
    } 
    die; 
} 

?> 

Answer 2

    $.ajax({ 
         type: "POST", 
         url: "check_name.php", 
         data: "sitename="+ sitename , 
         success: function(html){ 
          if(html !== "") { 
           $("#btn-signu").attr("disabled", true); 
          } 
          else { 
           $("#btn-signu").removeAttr("disabled"); 
          } 

          $("#disp").html(html); 

         } 
        }); 

Überprüfen Sie die HTML-param in Erfolg Callback-Funktion.

Answer 3

In form.php Änderung Javascript:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //get the button by its ID 
     var $button = $('#btn-signup'); 
     $("#sitename").keyup(function() { 

      //hide the button always 
      $button.hide(); 

      var sitename = $('#sitename').val(); 
      if(sitename=="") 
      { 
       $("#disp").html(""); 
      } 

      else 
      { 

       $.ajax({ 
        type: "POST", 
        url: "check_name.php", 
        data: "sitename="+ sitename , 
        success: function(html){ 
         $("#disp").html(html); 

         if(!html.length){ 
          //show the submit button if no error html 
          $button.show(); 
         } 
        } 
       }); 
       return false; 
      } 
     }); 
    }); 
</script> 

sollte Der Button versteckt initial sein. Wenn das Feld vorgefüllt werden kann, müssen Sie prüfen, ob der Wert nicht leer ist, bevor Sie die Schaltfläche ausblenden.

<div class="form-group col-sm-3 col-xs-12"> 
    <button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup" style="display:none">Submit</button> 
</div> 

Answer 4

Sie müssen das Ergebnis Ihres PHP-Skripts verfolgen. Code ändern zu:

PHP

<?php 

include('dbconnect.php'); 
if(isset($_POST['sitename'])) 
{ 
    $sitename=mysql_real_escape_string($_POST['sitename']); 
    $query=mysql_query("select * from template_users where sitename='$sitename'"); 
    $row=mysql_num_rows($query); 
    if($row==0) 
    { 

     echo json_encode([ "status" => 1, "html" => "<span style='color:white;'>Available</span>" ]); 
    } 
    else 
    { 

     $msg = $sitename.rand (1 , 10000); 
     $msg1 = $sitename.rand (1 , 100); 
     echo json_encode([ "status" => 0, "html" => "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>" ]);  
    } 
} 

?> 

HTML

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#btn-signup").hide(); 
     $("#sitename").keyup(function() { 
      $("#btn-signup").hide(); 
      var sitename = $('#sitename').val();    
      if (sitename == "") 
      { 
       $("#disp").html(""); 
      } 

      else 
      { 
       $.ajax({ 
        type: "POST", 
        url: "check_name.php", 
        data: "sitename=" + sitename, 
        dataType: "json", 
        success: function (result) { 
         if (result.status == 1) { 
          $("#btn-signup").show(); 
         } 
         $("#disp").html(result.html); 
        } 
       }); 
       return false; 
      } 
     }); 
    }); 
</script> 

<div class="form-group col-sm-3 col-xs-12"> 
    <button class="btn btn-1 btn-fill" type="submit" id="btn-signup" name="btn-signup">Submit</button> 
</div> 

Das, blenden Sie die Taste am Start ist, wenn ein Benutzer etwas eingibt, blenden Sie die Taste und warten bis der Text validiert ist. Wenn es gültig ist, zeigen Sie es an. Wenn der Benutzer den Text ändert, wird die Schaltfläche wieder ausgeblendet.

Bitte beachten Sie:

1) mysql_* Funktionen seit Version veraltet sind 5.5 und haben in der Version 7. Dies allein ist genug Anzeichen dafür, dass Sie benötigen, entfernt sich zu bewegen und etwas sicherer und aktiv unterstützt verwenden.

2) mysql_real_escape_string und mysqli_real_escape_string sind nicht sicher, da sie Servercodierung nicht zuverlässig berücksichtigen. Wenn Sie sicher sein wollen, verwenden Sie richtig vorbereitete Anweisungen (d. H. Vorbereitete Anweisungen, die auf dem MySQL-Server erstellt werden).

Answer 5

Ich würde Ihnen vorschlagen, json zu verwenden, um die Daten wie folgt zurück:

{ 
    "status": "success", 
    "html" : "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>" 
} 

und hier ist der Javascript-Code:

$(document).ready(function() 
{ 
    /** Hide the button first */ 
    $('button').hide(); 

    $('#sitename').on('input', function() 
    { 
     var sitename = $('#sitename').val(); 

     if(sitename == '') 
     { 
      $("#disp").html(""); 
     } 
     else 
     { 
      $.ajax(
      { 
       type : "POST", 
       dataType: "json" 
       url  : "check_name.php", 
       data : "sitename=" + sitename , 
       success : function(data) 
       { 
        /** When the data is invalid */ 
        if(data.status === 'error') 
        { 
         $('button').hide(); 
         $("#disp").html(data.html); 
        } 
        else 
        { 
         $('button').show(); 
         /** Hide the html when the data is valid */ 
         $("#disp").html(''); 
        } 
       }, 
      }); 
     } 
    }) 
}); 

Und Ihre PHP-Code:

<?php 
include('dbconnect.php'); 
header('Content-Type: application/json; charset=utf-8'); 

if(isset($_POST['sitename'])) 
{ 
    $sitename = mysql_real_escape_string($_POST['sitename']); 
    $query = mysql_query("select * from template_users where sitename='$sitename'"); 
    $row  = mysql_num_rows($query); 

    if($row == 0) 
    { 
     echo json_encode(['status' => 'success', 
          'html' => "<span style='color:white;'>Available</span>"]); 
    } 
    else 
    { 
     $msg = $sitename.rand (1 , 10000); 
     $msg1 = $sitename.rand (1 , 100); 

     echo json_encode(['status' => 'error', 
          'html' => "<span style='color:antiquewhite;' ><b>Already exist please Use different Site Name such as<br/> $msg<br/>$msg1<br/><b/></span>"]); 
    } 
} 
?>