John John - 5 months ago 8
jQuery Question

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.

Answer

You can do that in the success callback function of your AJAX (.post()) method:

function validate_group_name(value){
    $.post("validate_group_name.php",{group_name:value},function(data){
        $(".validate_group_name").html(data);
        if (data=="Bob Smith"){
            $('#display_sometimes').show().css({'width':'100%', 'height':'200px'});
        }
    });
}