Example Explained – The HTML page

Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008

0

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

  • <html>
    <head>
    <script src=”poll.js”></script>
    </head>
    <body>

    <div>
    <h3>Do you like PHP and AJAX so far?</h3>
    <form>
    Yes:
    <input value=”0″ onclick=”getVote(this.value)” />
    <br />No:
    <input value=”1″ onclick=”getVote(this.value)” />
    </form>
    </div>

    </body>
    </html>

The HTML form works like this:

  1. An event is triggered when the user selects the “yes” or “no” option
  2. When the event is triggered, the function getVote() is executed
  3. The data returned from the getVote() function will replace the form, in the <div> tag

Example Explained – The HTML page

Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008

0

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

  • <html>
    <head>
    <script src=”getrss.js”></script>
    </head>
    <body>

    <form>
    Select an RSS-feed:
    <select>
    <option value=”Google”>Google News</option>
    <option value=”MSNBC”>MSNBC News</option>
    </select>
    </form>

    <p><div>
    <b>RSS-feed will be listed here…</b></div></p>
    </body>
    </html>

The HTML form works like this:

  1. An event is triggered when a user selects an option in the drop-down box
  2. When the event is triggered, the function showRSS() is executed
  3. The <div> is a placeholder for the data returned from the showRSS() function.

Example Explained – The HTML page

Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008

0

The HTML page contains a link to an external JavaScript, some style definitions, an HTML form, and a div element:

  • <html>
    <head>
    <script src=”livesearch.js”></script>
    <style>
    #livesearch
    {
    margin:0px;
    width:194px;
    }
    #txt1
    {
    margin:0px;
    }
    </style>
    </head>
    <body>

    <form>
    <input size=”30″ onkeyup=”showResult(this.value)” />
    <div></div>
    </form>
    </body>
    </html>

The HTML form works like this:

  1. An event is triggered when the user presses, and releases a key in the input field
  2. When the event is triggered, the function showResult() is executed
  3. The <div> is a placeholder for the data returned from the showResult() function

Example explained – The HTML page

Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008

0

The HTML page contains a link to an external JavaScript, an HTML form, and several <span> elements:

  • <html>
    <head>
    <script src=”responsexml.js”></script>
    </head>
    <body>

    <form>
    Select a User:
    <select>
    <option value=”1″>Peter Griffin</option>
    <option value=”2″>Lois Griffin</option>

    <option value=”3″>Glenn Quagmire</option>
    <option value=”4″>Joseph Swanson</option>
    </select>
    </form>

    <h2><span></span>&nbsp;<span id=”lastname”></span></h2>
    <span></span>
    <div style=”text-align: right”>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div>

    </body>
    </html>

  • The HTML form contains a drop-down box called “users”, with id and names from the database table, as options
  • The <span> elements are placeholders for the values we will receive
  • When a user is selected, a function called “showUser()” is executed (triggered by the “onchange” event)

In other words: Each time a user changes the value in the drop-down box, the function showUser() is called, and outputs the result in the <span> elements.

Example explained – The HTML page

Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008

0

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

  • <html>
    <head>
    <script src=”selectuser.js”></script>
    </head>
    <body>

    <form>
    Select a User:
    <select>
    <option value=”1″>Peter Griffin</option>
    <option value=”2″>Lois Griffin</option>
    <option value=”3″>Glenn Quagmire</option>
    <option value=”4″>Joseph Swanson</option>
    </select>
    </form>
    <br />
    <div><b>Person info will be listed here.</b></div>

    </body>
    </html>

As you can see it is just a simple HTML form with a drop down box called “customers”.

The <div> below the form will be used as a placeholder for info retrieved from the web server.

When the user selects data, a function called “showUser()” is executed. The execution of the function is triggered by the “onchange” event. In other words: Each time the user change the value in the drop down box, the function showUser() is called.

Example explained – The HTML page

Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008

0

The HTML page contains a link to an external JavaScript, an HTML form, and a div element:

  • <html>
    <head>
    <script src=”selectcd.js”></script>
    </head>

    <body>

    <form>
    Select a CD:
    <select>
    <option value=”Bob Dylan”>Bob Dylan</option>
    <option value=”Bonnie Tyler”>Bonnie Tyler</option>
    <option value=”Dolly Parton”>Dolly Parton</option>
    </select>
    </form>

    <div><b>CD info will be listed here…</b></div>

    </body>
    </html>

As you can see it is just a simple HTML formĀ  with a simple drop down box called “cds”.

The <div> below the form will be used as a placeholder for info retrieved from the web server.

When the user selects data, a function called “showCD” is executed. The execution of the function is triggered by the “onchange” event. In other words: Each time the user change the value in the drop down box, the function showCD is called.

Example explained – The HTML page

Posted by admin | Posted in PHP Tutorial | Posted on 10-08-2010-05-2008

0

The HTML page contains a link to an external JavaScript, a simple HTML form, and a span element:

  • <html>
    <head>
    <script src=”clienthint.js”></script>
    </head>
    <body>

    <form>
    First Name: <input onkeyup=”showHint(this.value)” />
    </form>
    <p>Suggestions: <span id=”txtHint”></span></p>

    </body>
    </html>

The HTML form above has an input field called “txt1″. An event attribute for this field defines a function to be triggered by the onkeyup event.

The paragraph below the form contains a span called “txtHint”. The span is used as a placeholder for data retrieved from the web server.

When a user inputs data, the function called “showHint()” is executed. The execution of the function is triggered by the “onkeyup” event. In other words: Each time a user moves the finger away from a keyboard key inside the input field, the function showHint is called.