QuickEdit

Demo

Submitted script - Author: Burak Yigit KAYA(Homepage)

Download script

You can download the entire script from this Zip file

Setup

Step 1: Create your HTML

Here I have created a standard HTML form:

<form>
  <h1>Click on the names and adresses </h1>
  <table id="personalCard">
    <tr>
      <td>First name:</td>
      <td><span id="firstname">Alf Magne</span></td>
    </tr>
    <tr>
      <td>Last name:</td>
      <td><span id="lastname">Kalleland</span></td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><div id="address">Somewhere<br>In Norway</div></td>
    </tr>
    <tr>
      <td>Country:</td>
      <td><span id="country">Norway</span></td>
    </tr>
    <tr>
      <td>Gender:</td>
      <td><span id="gender">Male</span></td>
    </tr>
  </table>
</form>

Step 2: Specify how to edit data

This is done inside a <style> block. The type of this block is set to "text/aVquickEdit".

Attributes:

Here are some of the available attributes you can specify inside the <style> block:

action: Path to file to execute after a modification has been made
type: Example: select, textarea, text
selectValues: Possible select box values, example: ['Female','Male']
fade: Fade effect
params: Params attached to the url and sent to the server. Example: 'var=' + element.id + '&val=something'