Tutorial

• start using PlainAjax
• send ajax request to the server
• post data from HTML input elements
• inplace editor
• autoresend (implement a web-chat)

Post data from HTML input elements

Task description

Submitting data from HTML input fields to the server. The server echoes the received posted data.

Working example

HTML inputs

Server response

Implementation steps

• Create a DIV to contain the HTML input elements, give it an ID
• Make a links to call a PlainAjax request when clicked
• In the PlainAjax request specify the server-side script to call, the id of the HTML element containing the input elements and where to put the server response

The HTML Code

<div id="myhtmlinputs">
  <input type="text" name="textinput" value="Some input text data" size="50" />
  <input type="checkbox" name="checkboxinput" value="Checkbox is checked" />
  <input type="radio" name="radioinput" value="radiooption1">
  <input type="radio" name="radioinput" value="radiooption2">
  <textarea name="textareainput"></textarea>
</div>
<a onclick="plainajax.request('respurl: dumppost.php; resultloc: myresult; paramloc: myhtmlinputs')">Click here to post HTML inputs to the server</a><br />
<div id="myresult"></div>

Note: the server-side scripts (defined in respurl attribute) can be implemented in any language, java, ruby, php, etc..

Check another example on how to

• send an Ajax request to the webserver and display its response
• post data from HTML input elements to the server using Ajax
• autoresend (implement a web-based chat)