Html Form submit using Ajax


Its not easy to submit HTML forms through Ajax. Forms input parameters are not send automatically during form submission. We manually collect all input parameters and send it separately as query string. The below example shows how to do it. I have written below a temporary solution for sending parameters. Later we will see a common method to send all input type tags(text, textarea, select, option, check box, ..) in the forms.

The file you have to submit form with ajax.

form.html – client side view page

<html>
<script src="ajax.js" language="javascript"></script> <!--load the js file.-->
<script src="ajaxform.js" language="javascript"></script> <!-- load the below js file.-->
<body>
<form name="productform" action="product.jsp" >
<table>
<tr>
<td>Enter product name : <input type="text" name="productname" value=""/></td>
</tr>
<tr>
<td>Enter product price : <input type="text" name="productprice" value=""/></td>
</tr>
<tr>
<td><input type="button" name="submitform" value="Save" onclick="javascript:sendAjaxFormSubmit('product.jsp', 'showdetails', document.productform)"/></td>
</tr>
<tr>
<td><input type="button" name="cancel" value="Cancel"/></td>
</tr>
</table>
</form>
<div id="showdetails"></div>
</body>
</html>

ajaxform.js – the following scripts are written in separate file and named as ajaxform.js

/* method to send a ajax request, and write the response text to given divid.
url - action url
divid - to show the response.
formobj - html form object used to get input parameters value.
*/

function sendAjaxFormSubmit(url, divid, formobj)
{
url = url + <a title="See code of getNoCacheValue() method" href="https://manikandanmv.wordpress.com/2008/09/29/ajax-example/" target="_blank">getNoCacheValue</a>(url);
var req = <a title="See code of getXMLHttpRequest() method" href="https://manikandanmv.wordpress.com/2008/09/29/ajax-example/" target="_blank">getXMLHttpRequest()</a>;
req.onreadystatechange = function(){ processResponse(req, divid) };
req.open('POST', url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var params = "<span style="font-family:Verdana;">productname="+</span>formobj.<span style="font-family:Verdana;">productname.value+ "&</span><span style="font-family:Verdana;">productprice=" + formobj.</span><span style="font-family:Verdana;">productprice.value;</span>
req.setRequestHeader("Content-length", params.length);
req.setRequestHeader("Connection", "close");
req.send(params);
}

product.jsp – write some logics here for storing and showing data to client.

in this file, get the product name and price value from request and save into the database. The area which your own logic/business logic comes here.

for example, i simply write the logical steps of storing product details.

  • get the product name, product price value from request. using method request.getParameter(“productname”);
  • store the values in to product database.
  • design your own way to show the product details.

Are you new to Ajax technology, read the below links to know the basics.

Ajax Basics – https://manikandanmv.wordpress.com/2008/09/23/ajax-asynchronous-javascript-and-xml/

Ajax Example – https://manikandanmv.wordpress.com/2008/09/29/ajax-example/

Advertisements

Tags: , , , , , ,

8 Responses to “Html Form submit using Ajax”

  1. Richard Sampson Says:

    Neat ajax solution, thanks!

    Collection of the parameter values from sendAjaxFormSubmit() deletes white space in values, e.g., productname: Red Apples is collected in product.jsp as RedApples.

    Is it possible to preserve white space in collected values, e.g., Red Apples instead of RedApples?

    • manikandanmv Says:

      Thnx for ur compliments.!

      I had tried the code, it works well for me.
      It seems to be some mistakes while u implementing this, pls check it.
      possible, send ur code i will check it n get back to u.

  2. Richard Sampson Says:

    Regarding earlier July 10, 2009 comment re “deletes whitespace”:

    i. ajax.js code OK to get input string values, e.g., Red Apples

    ii. problem occurs during collection of string ‘params’ using request
    object in .asp page, –> output like ‘RedApples’. (whitespace lost)

    iii. my solution is to add code to ajax.js to replace white space in each value using reg expn like this:

    var params = “productname=” + formobj.productname.value.replace(/(\s)/g, ‘*q*’); // use *q* as placeholder for spaces (” “) between words

    iv. then collect parameter values in .asp page using
    v. and then replace ‘*q*’ with ” ” to restore white space between each word:

    Does your .jsp page keep white space between words in string?

  3. Richard Sampson Says:

    My October 16 message included some vbscript as follows:


    iv. then collect parameter values in .asp page using:
    request.form(“productname”)

    and

    v. … each word:
    responseText = replace(request.form(“productname”), “*q*”, ” “)

  4. manikandanmv Says:

    Richard Sampson,

    I didn’t handled anything special for deleting white spaces. It works perfectly.
    Can you check the request parameters with some tools(firebug/Live http headers) and ensure the parameter values are passed correctly.?

  5. Richard Sampson Says:

    Regarding earlier October 22, 2009 comment re “deletes whitespace”:

    Checked the parameter values passed using a document.write() in javascript file… values were passed correctly including white space in text string. Something about my request object seems to have caused loss of white space …. no problem. I have a fix.

    Thanks.

  6. Richard Sampson Says:

    Do you have a code example that passes text and files… is there a special way to incorporate multipart/form-data with xmlHttpRequest?

  7. manikandanmv Says:

    I don’t have code but this can be achievable using iframe.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: