Check if INPUT value Exists

[jonnypixel]

Hi,

i have two scripts,

One holds the form and the other the php Query process.

Im using a small piece of javascript to POST the value to my php Query process script
but im finding it difficult to display a result by fading in a div based on the query response.

For example if i type in a tag and the tag already exists i want the php to check the table and the return a fadeIN div to say it "already exists" otherwise fadeIN a div to say "Tag inserted into database"

But i also am using a little more JS to clear the input field value as well.
All this is done without reloading the page.

So basically if the tag "People" exists in the MYSQL table then i want the div #i2 to fade in and say "Already exists!"

My code is below:

The HTML

<form method="post">
<div>
<strong>Keyword: </strong> <input type="input" id="tag" name="tag"/> <input type="button" id="send" value="Add"  /> </div>

<div id="i1"><br>
<p><strong>Success:</strong> Add another keyword and press Add.</p>
</div> 

<div id="i2"><br>
<p><strong>Failed:</strong> The keyword already exists.</p>
</div>

</form>

The Javascript

<script type="text/javascript"> 

$('#i1').hide();  
$('#i2').hide(); 

$("#send").click(function() { 

var txt = $.ajax({
url: 'process.php',
async: true, // or false, depends on your needs
type:'POST',
data:({
tag:$('input#tag').val(),  
}) 

}).success;	

//processed in the php file??

}); 

</script>

and this is the PHP processing page

process.php

<?php
$tagname = mysql_real_escape_string($_POST['tag']);
$sqll = "SELECT COUNT(tag_name) FROM Tags WHERE tag_name = '$tagname'";
$result = mysql_query($sqll) or die(mysql_error());
$status = mysql_fetch_row($result);

if($status[0] > 0) { ?>

<script type="text/javascript">

// Not successfull div
//For IE - this removes the value in the input field
$("#tag").replaceWith($("#tag").clone(true));
//For other browsers - this removes the value in the input field
$("#tag").val("");

// this should fadein a div called i2 and then fade it out 
$('#i2').show('slow');
setTimeout(function(){ 
$('#i2').fadeOut('slow');	}, 3000);

</script>


<?php } else { ?>

// This is where i would process my INSERT query and also run the javascript below to fade in my success DIV

<script type="text/javascript">

// Successful div
//For IE - this removes the value in the input field
$("#tag").replaceWith($("#tag").clone(true));
//For other browsers - this removes the value in the input field
$("#tag").val("");

// this should fadein a div called i1 and then fade it out 
$('#i1').show('slow');
setTimeout(function(){ 
$('#i1').fadeOut('slow');	}, 3000);

</script>


<?php }} ?>

I hope the above makes sense.

Thank you in advance :-)

John

[hielo]

process.php

<?php
//here you need to connect to the db first
//...


$tagname = mysql_real_escape_string($_POST['tag']);
$sqll = "SELECT COUNT(tag_name) as total FROM Tags WHERE tag_name = '$tagname'";
$result = mysql_query($sqll) or die(mysql_error());
$status = mysql_fetch_assoc($result);

if($status['total'] > 0)
{
	echo 'OK';
}
else 
{
	echo '!OK';
}
exit;
?>

The Javascript:

<script type="text/javascript"> 

$('#i1').hide();  // this is my div that says tag inserted!
$('#i2').hide();  // this is my div that says tag already exists

$("#keyword").click(function() { 

	$('#i1').hide();  // this is my div that says tag inserted!
	$('#i2').hide();  // this is my div that says tag already exists

	var txt = $.ajax({
				url: 'process.php',
				async: true, 
				type:'POST',
				data:{
						tag: $('input#newtag').val()
					} ,
				success:function(data){
						if( data=='OK' )
						{
							$('#i1').show();
						}
						else
						{
							$('#i2').show();
						}
					}
				});	

}); 

</script>

[jonnypixel]

Thank you hielo,

thank you for your response in both this post and the recent one regarding this script.

I have implemented your updated script and for some reason i am now getting only the second response even when the tag isn't in the database. ( Tag is already there )

I'm certain i have everything the same..

The Javascript

<script type="text/javascript"> 

$('#i1').hide();  // this is my div that says tag inserted!
$('#i2').hide();  // this is my div that says tag already exists

$("#keyword").click(function() { 

	$('#i1').hide();  // this is my div that says tag inserted!
	$('#i2').hide();  // this is my div that says tag already exists

	var txt = $.ajax({
				url: 'process.php',
				async: true, 
				type:'POST',
				data:{
						tag: $('input#newtag').val()
					} ,
				success:function(data){
						if( data=='OK' )
						{

							$('#i1').show();
			
						}
						else 
						{
			
							$('#i2').show();
				
						}
					}
				});	

}); 

</script>

The process.php

<?
//connect to database

$dbhost = '';
$dbuser = '';
$dbpass = '';
$db = '';


$conn = mysql_connect("$dbhost","$dbuser","$dbpass") or trigger_error("SQL", E_USER_ERROR);
$db = mysql_select_db("$db",$conn) or trigger_error("SQL", E_USER_ERROR);

if(!empty($_POST) && isset($_POST))
{
	
$tagname = mysql_real_escape_string($_POST['tag']);
$sqll = "SELECT COUNT(tag_name) as total FROM tags WHERE tag_name = '$tagname'";
$result = mysql_query($sqll) or die(mysql_error());
$status = mysql_fetch_row($result);

if($status['total'] > 0) { 

echo "OK";

} else {

echo "!OK";

}
exit;

} ?>

[hielo]

look at line 9 of MY process.php and look at the equivalent line of what you posted.

[jonnypixel]

Hi hielo,

thanks again... I have fixed line 9 ( I missed that bit )

But i am still getting the second return in firebug?

!OK

The database is not inserting the new tag either.

The process.php file

<?php
//connect to database


if(!empty($_POST) && isset($_POST))
{
	
$tagname = mysql_real_escape_string($_POST['tag']);
$sqll = "SELECT COUNT(tag_name) as total FROM tags WHERE tag_name = '$tagname'";
$result = mysql_query($sqll) or die(mysql_error());
$status = mysql_fetch_assoc($result);

if($status['total'] > 0)
{
	echo 'OK';
}
else 
{
	echo '!OK';
}
exit;
 
 
 } ?>

The JS code

<script type="text/javascript"> 

$('#i1').hide();  // this is my div that says tag inserted!
$('#i2').hide();  // this is my div that says tag already exists

$("#keyword").click(function() { 

	$('#i1').hide();  // this is my div that says tag inserted!
	$('#i2').hide();  // this is my div that says tag already exists

	var txt = $.ajax({
				url: 'process.php',
				async: true, 
				type:'POST',
				data:{
						tag: $('input#newtag').val()
					} ,
				success:function(data){
						if( data=='OK' )
						{
							$('#i1').show();
						}
						else
						{
							$('#i2').show();
						}
					}
				});	

}); 

</script>

What in earth am i doing wrong here?

unless of course its in the html form??

THE HTML FORM

<form method="POST" action="#">

<div>

<strong>New Keyword: </strong> <input type="text" id="newtag" name="tag" /> <input type="button" id="keyword" value="Add" /> </div>

<div id="i1">
<p><strong>Success:</strong> Type another keyword and press Add.</p>
</div> 

<div id="i2">
<p><strong>Failed:</strong> The keyword already exists. Use Step 2 to add it.</p>
</div>

</div>

</form>

[jonnypixel]

process.php

{
	echo 'OK';
}
else 
{
	echo '!OK';
}

hielo,

I have just noticed that if i switch the above code to this..

{ 
	echo '!OK';
} 
	else 
{ 
	echo 'OK';
}

Then the php part works fine - firebug returns correct response.

But the JS still seems to just show div2 - which is the entry exists response only.

[hielo]

actually, it should be: if($status['total'] == 0)

[hielo]

I have just noticed that if i switch the above code to this..

NO, That doesn't fix anything. All it will do now is to always show div2. Put it back the way it was and update your php to have equal instead of greater than (as suggested above)

[jonnypixel]

Hey hielo,

i have done what you said and am now using the code exactly as you posted.

But for some reason i still only get div2?

The php part is returning the correct response, it just seems that the success:function(data) part is doing it.

here is the exact code

<!-- ***************** js update ****************-->

<script type="text/javascript"> 

$('#i1').hide();  // this is my div that says tag inserted!
$('#i2').hide();  // this is my div that says tag already exists

$("#keyword").click(function() { 

$('#i1').hide();  // this is my div that says tag inserted!
$('#i2').hide();  // this is my div that says tag already exists

	var txt = $.ajax({
				url: 'process.php',
				async: true, 
				type:'POST',
				data:{
						tag: $('input#newtag').val()
					} ,
				success:function(data){
						if( data=='OK' )
						{
							$('#i1').show();
						}
						else
						{
							$('#i2').show();
						}
					}
				});	

}); 

</script>

[hielo]

i have done what you said and am now using the code exactly as you posted.

If that is true, then why did you post your javascript code? The code I posted (where you need to use equal sign) is in process.php. Take my ORIGINAL post and change line 11 of process.php FROM greater than zero TO equal to zero

[jonnypixel]

Im so sorry hielo, i know this must be getting annoying,
i have exactly what you have posted.
But i still only get div2. Even though the php is returning correct responses below

See the code i have below.

process.php

<?
//connect to database


if(!empty($_POST) && isset($_POST))
{
	
$tagname = mysql_real_escape_string($_POST['tag']);
$sqll = "SELECT COUNT(tag_name) as total FROM tags WHERE tag_name = '$tagname'";
$result = mysql_query($sqll) or die(mysql_error());
$status = mysql_fetch_assoc($result);

if($status['total'] == 0)

{ 
	echo "OK";
} 
	else 
{ 
	echo "!OK";
}

}?>

the JS

<script type="text/javascript"> 

$('#i1').hide();  // this is my div that says tag inserted!
$('#i2').hide();  // this is my div that says tag already exists

$("#keyword").click(function() { 

$('#i1').hide();  // this is my div that says tag inserted!
$('#i2').hide();  // this is my div that says tag already exists

	var txt = $.ajax({
				url: 'data.php',
				async: true, 
				type:'POST',
				data:{
						tag: $('input#newtag').val()
					} ,
				success:function(data){
						if( data=='OK' )
						{
							$('#i1').show();
						}
						else
						{
							$('#i2').show();
						}
					}
				});	

}); 

</script>

I dont understand why its not working..
Sorry for dragging this on hielo.

[jonnypixel]

I have also tried the response OK inside '' and also ""

[hielo]

Look at my first post again. Where's the exit statement in YOUR code?

If your php has spaces and/or a new line AFTER the final ?> then the output that the server sees is NOT just OK, but OK PLUS whatever extra blank spaces exist after the ?> . That's the purpose of the exit - it quits immediately without sending those extra blanks.

If the problem persist, put an alert inside the success ajax function to see EXACTLY what your php script is returning:

success:function(data){ 
  alert(data);
  ...
  }

[jonnypixel]

Thank you :-)

Your point about the exit statement and the spaces at the closing php tags is very well noted for future troubleshooting. Thank you for sharing your knowledge and giving me real time examples too.

It works now that i have added the exit; statement and made shure there was no spaces before it.

Thanks again hielo

John