JavaScript and PHP do not play well together. JavaScript is client side, PHP server side. This makes it difficult to get things to play together. One way to get them to play together, is to have your PHP script build your JavaScript. Now, what if you need to have an external JavaScript file get some stuff from your database and run some things in PHP? Something like this widget:
This is a widget that I wrote. It pulls a list from a database and then displays it. I want people on other websites to be able to display it, so I need a way for them to include it on their site. To do that, I use the <script> tag:
I want you to notice a couple of things that are different about this than normal JavaScript includes. First, notice that the file extension is .php, not .js. If I called it .js, then it would not run as a PHP file, and I need it to run as PHP. Second, notice that I included two variables. This allows us to pass variables, just like you would in any PHP script.
OK. Not that we have the hosting site set to call it, how do we make it display something? Well, if I was doing it in HTML/PHP it would have code something like:
echo "<a href='" . $url . "'>" . $title . "</a>";
This is all fine and dandy, if I am calling it as a PHP script, but I'm calling it as a JavaScript. Since it is JavaScript, it does not know the HTML tags as commands, so the script fails. We need to make it JavaScript, so we have to add in a document.write. Now, this line gets longer and more confusing. We have to remember to close the HTML tag, we have to close the JavaScript command, and we have to close the PHP command. This is what we end up with:
In PHP, you can stop your PHP script and display some HTML. ie:
?>
<a href="http://shabamdevelopment.com">Shabam Development Rocks
//more php here
We can do something like this, but remember, that we are doing JavaScript, so we can't bail out, use HTML and then go back. We can bail out of the PHP, but not the JavaScript. We still need the document.write. This will work:
?>
document.write('<a href="http://shabamdevelopment.com">Shabam Development Rocks');
//more php here
One last thing. We have to set the header of our file to be JavaScript. At the top of the page include a header, like this:
In the script:
<? Header('Content-Type: application/x-javascript')?>
document.write('<a href="http://shabamdevelopment.com">Shabam Development Rocks');
//more php here
In the last article I showed you how to clear an input box after a user selects it. Now we are taking that one step further and if they leave the form blank, we are returning the default value. Alternatively some other text can be added there as well.
Again this is a simple addition. This is the box we are after:
The code is as follows:
Add this to the script section you created before:
function returnMe(formfield){
if (formfield.value=="")
formfield.value = formfield.defaultValue
}
and this to the input box:
onblur="returnMe(this)"
The entire thing looks like this now:
<script type="text/javascript">
function clearMe(formfield){
if (formfield.defaultValue==formfield.value)
formfield.value = ""
}
function returnMe(formfield){
if (formfield.value=="")
formfield.value = formfield.defaultValue
}
In the input box, we added the onblur attribute. This tells us that when the item's focus is lost, ie the user click out of the box, or tabs out of it, then the returnMe function is run.
The returnMe function is much like the clearMe function. Now, it says that if the current value is blank, we change the current value to match the default value.
Alternatively, we could have different text be put there. Say we change it so that it says "Use Me, Man!" We would simple change the line that says
formfield.value = formfield.defaultValue
to
formfield.value = "Use Me, Man!"
But that does not really draw attention to the box. Lets make the font red, and the background yellow. This will draw attention to their mistake.
function returnMe(formfield){
if (formfield.value==""){
formfield.value = "Use Me, Man!"
formfield.style.color = "red";
formfield.style.background = "yellow";
}
}
Now, notice that we have three lines following the if statement. Because there are more than one, we wrap them in { }. Otherwise the browser will assume it is just the one line and the other two will be run whether the if statement is true or false. Lets look at the two new lines.
The first style refers to the font color. The second the background color. You can put most CSS styles here. You could also change the font-size, border, width and more with this attribute.
[Updated per comment below]
Thanks John for pointing out an error. Once the form is correctly entered, the form should return it's color to normal.
A simple way to do this is to just add a else statement, like this:
Have you seen how sometimes text boxes will have some default text in them that when you click on them goes away. Would you like that for your site, but don't know how? This brief tutorial will give you the details you need to get it done. It is a fairly simple piece of JavaScript to do it.
For an example of what we are trying to do:
First, I'll show you the code, then if you are interested, you can read on to get an explanation of what it all means.
Put this in the head section of your page (it can go in the page itself, but the head is a better place:
<script type="text/javascript">
function clearMe(formfield){
if (formfield.defaultValue==formfield.value)
formfield.value = ""
}
</script>
And this is the input box that goes into you form:
With our input box, we need a name to reference it by. In this case, it is called searchbox. The value tells us what the default value will be. Finally, onfocus tells us that when this box is made active, by clicking on it or tabbing to it, or some other means, then the function clearMe is called and sent the value of this. this is a special JavaScript property that sends a reference to the html property it is laid in. In other words, it means "This HTML piece".
The script is really simple, just an if statement. You could just include it directly in the onfocus, but that does not lend to reusability, so it is best to stick a function in the head. We will dissect it line by line.
<script type="text/javascript"> - Tells the browser that the following script is in JavaScript. It ends with </script>. So everything between the two must be in JavaScript.
function clearMe(formfield){ - This starts the function. The name of the function is give and then in parenthesis are any variables that are passed to the function. In this case the function is named "clearMe" and it is passed one variable called "formfield".
if (formfield.defaultValue==formfield.value) - Is a simple if statement. This simple says that if the form field (passed from the input box) has the same default value and current value then we proceed. If not, we skip the next line of code. Since there is no { after the statement, only one line will be used. If you wanted to have multiple lines used for the if, then you would enclose them in { and }, just like the function.
formfield.value = "" - If the if statement above was true then this line changes the current value of the form field to be blank.
} - ends the function. The function is surrounded in { and } so the browser knows where it begins and ends.
</script> - As I mentioned above, this tells the browser that we no longer are using a scripting language and to go back to HTML.
by email 
by RSS
