[SOLVED] Disable Submit Button If Text Field Is Empty

[eRott]

Ok, heres my problem. I am unsure if this must be done with Ajax, or if it can be done with PHP. I have a simple search page where I want the submit button to be disabled if there is nothing entered in the text field, and once something IS entered, then the search button is enabled. I was thinking Ajax, because I am looking for it to be real time and I am not sure if its possible with PHP as I am just a novice when it comes to certain things. So the button is always disabled when there is nothing, and enabled when the user enters something. And lets say the user enters something and removes it, then the button disables again? Is this possible to do with PHP and if so, could someone please help me tackle this .

 

Thanks!

 

Code:

<form name="search" method="post" action="<?=$PHP_SELF?>">
Search for: <input type="text" name="find" size="15"/> in <select name="stype" id="stype">
<option selected value="All">All</option>
<option value="Action">Action</option>
<option value="Adventure">Adventure</option>
<option value="Arcade">Arcade</option>
<option value="Shooting">Shooting</option>
<option value="Sports">Sports</option></select><input type="hidden" name="searching" value="yes" /><input type="submit" name="search" value="Go" /></form>

<?
//This is only displayed if they have submitted the form
if ($searching =="yes")
{
echo "<br><h1>Results</h1>";

//If they did not enter a search term give them an error
if ($find == "")
{
echo "You forgot to enter a search term";
exit;
}

// Otherwise connect to our Database
include '_inc/db_config.php';
include '_inc/db_open.php';

// preform a bit of filtering
$find = strtoupper($find);
$find = strip_tags($find);
$find = trim ($find);

if($stype == "All"){
//if the user selects to search all game types then search all game types
$data = mysql_query("SELECT * FROM games WHERE name LIKE'%$find%'");
} else {
//else search for games only with the specified game type
$data = mysql_query("SELECT * FROM games WHERE name LIKE'%$find%' AND type='$stype'");
}

//display the results
while($result = mysql_fetch_array( $data ))
{
echo "{$result['name']} - {$result['type']}<br>";
}

//This counts the number or results - and if there wasn't any it gives them a little message explaining that
$anymatches=mysql_num_rows($data);
if ($anymatches == 0)
{
echo "Sorry, but we can not find an entry to match your query<br><br>";
}

//And remind them what they searched for
echo "<br><b>Searched For:</b> " .$find;
}

include '_inc/db_close.php';
?>

[fireice87]

having the button appear when text is being typed isnt possible with php, as it has to call to the server. where as java script/ajax could do this.

i know next to nothing of java script so thats all i can say im afraid

 

[eRott]

Ahh. Yea, i figured this couldn't be done with PHP.

[roopurt18]

It's not even AJAX, just javascript.

[eRott]

So, any idea how I would do this through Javascript?

[Lefos]

That script you had there you do know if I am correct will not work on all platforms of php, I cleaned that up(you forgot the $_POST)... that should work now though

 

onKeyUp='if(this.value==""){document.searchs.search.disabled="disabled";}else{document.searchs.search.disabled="";}' 

 

<form name="searchs" method="post" action="<?=$PHP_SELF?>">
Search for: <input type="text" name="find" size="15" onKeyUp='if(this.value==""){document.searchs.search.disabled="disabled";}else{document.searchs.search.disabled="";}' /> in <select name="stype" id="stype">
<option selected value="All">All</option>
<option value="Action">Action</option>
<option value="Adventure">Adventure</option>
<option value="Arcade">Arcade</option>
<option value="Shooting">Shooting</option>
<option value="Sports">Sports</option></select><input type="hidden" name="searching" value="yes" /><input type="submit" name="search" value="Go" /></form>

<?php
//This is only displayed if they have submitted the form
if ($_POST['searching'] =="yes")
{
echo "<br><h1>Results</h1>";

//If they did not enter a search term give them an error
if ($_POST['find'] == "")
{
echo "You forgot to enter a search term";
exit;
}

// Otherwise connect to our Database
include '_inc/db_config.php';
include '_inc/db_open.php';

// preform a bit of filtering
$find = strtoupper($_POST['find']);
$find = strip_tags($find);
$find = trim ($find);
$stype = $_POST['stype'];
if($stype == "All"){
//if the user selects to search all game types then search all game types
$data = mysql_query("SELECT * FROM games WHERE name LIKE'%$find%'");
} else {
//else search for games only with the specified game type
$data = mysql_query("SELECT * FROM games WHERE name LIKE'%$find%' AND type='$stype'");
}

//display the results
while($result = mysql_fetch_array( $data ))
{
echo "{$result['name']} - {$result['type']}<br>";
}

//This counts the number or results - and if there wasn't any it gives them a little message explaining that
$anymatches=mysql_num_rows($data);
if ($anymatches == 0)
{
echo "Sorry, but we can not find an entry to match your query<br><br>";
}

//And remind them what they searched for
echo "<br><b>Searched For:</b> " .$find;
}

include '_inc/db_close.php';
?>

[dj-kenpo]

"So, any idea how I would do this through Javascript?" there's a javascript section of the forum, but your best bet is to join a specific js forum.

 

also, you could simply have your php script allow the submt, but then return an error if it was left blank.

 

you will HAVE to (not must, but should) do this ANYWAYS. as some users disable javascript etc different browser incompatibilites (ie web browser on xbox, palm pilot, etc).

 

javascript isn't foolproof, so you should really always double check after submit

[eRott]

@Lefos:

Thank you very much! Ill let you know how that works in in a sec. As for the ($_POST), it was not forgotten, it works .

 

@dj-kenpo:

if you note this section:

//If they did not enter a search term give them an error
if ($find == "")
{
echo "You forgot to enter a search term";
exit;
}

 

It does show an error if the field is blank. However, this disable submit button thing really has no other purpose then to make it a little more.. flashy

[eRott]

Works like a charm. Thank you very much!!

 

EDIT: Just a quick note for those that may use this in the future, when the page first loads the button is enabled. Don't forget to make the button initially disabled.

 

<input type="submit" name="search" value="Go" disabled />

[eRott]

Actually, dj-kenpo got me thinking of something. If the user does have java disabled then the submit button will always be disabled. How would you detect if java is enabled or disabled? And if it is disabled, then just enable the submit button.

 

Would something like this work? (im just guessing here):

 

if (navigator.javaEnabled()==true) {
//whatever
} else {
//enable the submit button
}

[Scripts]

JAVA != JAVASCRIPT

[eRott]

Yes yes. I am aware. So shoot me

[Scripts]

 

 

[king arthur]

Actually, dj-kenpo got me thinking of something. If the user does have java disabled then the submit button will always be disabled. How would you detect if java is enabled or disabled? And if it is disabled, then just enable the submit button.

 

Would something like this work? (im just guessing here):

 

if (navigator.javaEnabled()==true) {
//whatever
} else {
//enable the submit button
}

 

Simply run a piece of javascript that disables the submit button, before your form. If javascript is not enabled the button will be left enabled.