vendredi 24 juin 2016

Allow html tag to be visible only if user input is correct


I want to make a div tag appear only if the user input is acceptable. This is my index.php file <html> <head> <script type="text/javascript" src="../js/jquery.js"></script> <script> function validate_group_name(value){ $.post("validate_group_name.php",{group_name:value},function(data){ $(".validate_group_name").html(data); }); } </script> </head> <body> <input type="text" name="group_name" id="group_name" onkeyup="validate_group_name(this.value)"> <span class="validate_group_name"></span> <div id="display_sometimes" style="display:none;"> This text only displays sometimes. </div> </body> </html> This is my validate_group_name.php file <?php mysql_connect("servername ", "username", "password") or die(mysql_error()); mysql_select_db("database") or die(mysql_error()); $group_option = $_POST['group_name']; $len = strlen($group_option); $groups = mysql_query("SELECT name FROM groups"); $go = 0; while($group = mysql_fetch_array($groups)) { if(strtolower($group['name']) == strtolower($group_option)){ $go++; //check if group already exists } } if(!preg_match("/^[a-zA-Z0-9 ]*$/", $group_option)){ echo "<span style='color: red;'>" . "Invalid Group Name." . "</span>"; } else if($len < 3){ echo "<span style='color: red;'>" . "Your group name must be greater than 2 characters." . "</span>"; } else if($go != 0){ echo "<span style='color: red;'>" . "That group name already exists." . "</span>"; } else { echo "<span style='color: green;'>" . "That group name is available." . "</span>"; } ?> Is it possible to create a javascript function that detects the text outputted from the id "validate_group_name". I have been able to use this function to make the div tag visible, but it doesn't check whether the group name is available, and also doesn't detect change while typing. $(document).ready( function(){ $('#group_name').change( function(){ if ($(this).val()) { $('#display_sometimes').css('display','block'); $('#display_sometimes').css('width','100%'); $('#display_sometimes').css('height','200px'); } } ); }); Thanks for any help.

Aucun commentaire:

Enregistrer un commentaire