Combining Javascript And PHP Programming In Web Pages

PHP Programmers will discover that combining Javascript and PHP Programming can be a challenge. The first thing they discover is that PHP tags do not work inside Javascript tags. The general purpose of combining Javascript and PHP is to control the structure and variables that Javascript is intended to handle on the client side. Following some basic principles will allow programming Javascript and PHP nicely

New PHP Programmers start learning PHP by using a Salt And Pepper method, which comprises the vast majority of PHP Programming on the Internet. This is a valid and efficient way to develop eCommerce Web Sites and retain GUI editing efficiency. The alternative is 100% PHP-Generated web pages, which is an advanced and tricky method for developing web content. The latter method dictates that PHP shall control every chunk of code and object passed to the web server for distribution. Everything is contained inside the PHP tags including static HTML and plain text. The big drawback to this method is that GUI programs like Adobe’s Dreamweaver and GoLive cannot interpret the code and cannot display the layout. When the layout cannot be adjusted easily, the web page appearance suffers and the result is usually great functionality with poor presentation.

That said, we can look at how to combine Javascript and PHP using the latter method of PHP-Generated code. Since PHP Programming tags cannot be contained by Javascript Programming tags, we reverse the order and contain the Javascript Programming inside the PHP Programming tags. The Javascript should have been well tested before entering this stage, so we know the Javascript Code is valid, and reliable. PHP Programmers must beware their use of double and single quotes and semicolons. Remember, a single invalid character can defunct your script, and often the entire web page.

Our example is an eCommerce web page design that connects to a MySQL eCommerce Database to retrieve product information, which will dictate how the Javascript operates inside the page for the client. A dropMenu will act as our modifier and an ordering form as our target for Javascript control. There are various methods to achieve the same result, including using AJAX Programming to retrieve variable-value sets on demand. When using AJAX Programming, the number of PHP Server connections and eCommerce Database connections will increase, possibly affecting server performance in higher traffic volume scenarios.

The form needs a dropMenu populated by the MySQL Database with some identifier value. We can name the dropMenu and call its value or selectedIndex value and have our Javascript start evaluating, or we can simply pass the dropMenu’s value to our Javascript on each onChange event of the dropMenu.

<select name="myMenu" id="myMenu" onChange="formhandler(this.value)">
  <option value="10">Milk</option>
  <option value="10">Soda</option>
  <option value="UT">Salt</option>
  <option value="UT">Nuclear Dust</option>
</select>

Now we need the Javascript to receive our dropMenu’s value, evaluate it, and modifu our form based on the results of the evaluation.

<script type="text/JavaScript">
<!--
function formHandler(menuVar) {
 if (menuvar == 10) {
 	document.myForm.stateLocation.value = 'CA';
 } else if (menuvar == 20) {
 	document.myForm.stateLocation.value = 'UT';
 }
}
//-->
</script>

The simple Javascript example is intended to receive a value from the dropMenu and evaluate it. The values passed and evaluated can be whatever meets your specific needs. If the value is met, the Javascript will update the value of the form field by name as defined in the Javascript.

There are plenty of ways to skin the proverbial Javascript cat, but the important thing to take note of is wrapping your Javascriptwith PHP tags so it can operate. The point of this article relates to combining Javascript and PHP Programming. The <script> tags must be treated like text inside of <?php> tags, and the variable names and values managed by PHP. The result is an HTML page with the expected Javascript format, but the functionality and quality of the code is up to the PHP Programmer.

Leave a Reply