Category Archives: tech

JQuery: submitting form using ajax

The below samples are from: http://hayageek.com/jquery-ajax-form-submit/

A simple HTML form:

<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
    First Name: <input type="text" name="fname" value =""/> <br/>
    Last Name: <input type="text" name="lname" value ="" /> <br/>
    Email : <input type="text" name="email" value=""/> <br/>
</form>

Using JQuery to submit it:

//callback handler for form submit
$("#ajaxform").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {
            //data: return data from server
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            //if fails      
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind(); //unbind. to stop multiple form submit.
});
 
$("#ajaxform").submit(); //Submit  the FORM

A HTML form with enctype=”multipart/form-data” (supporting file uploads):

<form name="multiform" id="multiform" action="multi-form-submit.php" method="POST" enctype="multipart/form-data">
    Name: <input type="text" name="name"  value="Ravi"/> <br/>
    Age :<input type="text" name="age"  value="1" /> <br/>
    Image :<input type="file" name="photo" /><br/>
</form>

Using JQuery to submit it in HTML5 browsers:

//Callback handler for form submit event
$("#multiform").submit(function(e)
{
 
    var formObj = $(this);
    var formURL = formObj.attr("action");
    var formData = new FormData(this);
    $.ajax({
        url: formURL,
    type: 'POST',
        data:  formData,
    mimeType:"multipart/form-data",
    contentType: false,
        cache: false,
        processData:false,
    success: function(data, textStatus, jqXHR)
    {
 
    },
     error: function(jqXHR, textStatus, errorThrown) 
     {
     }          
    });
    e.preventDefault(); //Prevent Default action. 
    e.unbind();
}); 
$("#multiform").submit(); //Submit the form

Using JQuery to submit it in non-HTML5 browsers:

$("#multiform").submit(function(e)
{
    var formObj = $(this);
    var formURL = formObj.attr("action");
 
    //generate a random id
    var  iframeId = 'unique' + (new Date().getTime());
 
    //create an empty iframe
    var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
 
    //hide it
    iframe.hide();
 
    //set form target to iframe
    formObj.attr('target',iframeId);
 
    //Add iframe to body
    iframe.appendTo('body');
    iframe.load(function(e)
    {
        var doc = getDoc(iframe[0]); //get iframe Document
        var docRoot = doc.body ? doc.body : doc.documentElement;
        var data = docRoot.innerHTML;
 
        //data is returned from server.
    });
 
}); 
$("#multiform").submit();

Using JQuery to submit it for both HTML5 and non-HTML5 browsers:

function getDoc(frame) {
     var doc = null;
 
     // IE8 cascading access check
     try {
         if (frame.contentWindow) {
             doc = frame.contentWindow.document;
         }
     } catch(err) {
     }
 
     if (doc) { // successful getting content
         return doc;
     }
 
     try { // simply checking may throw in ie8 under ssl or mismatched protocol
         doc = frame.contentDocument ? frame.contentDocument : frame.document;
     } catch(err) {
         // last attempt
         doc = frame.document;
     }
     return doc;
 }
$("#multiform").submit(function(e)
{
 
    var formObj = $(this);
    var formURL = formObj.attr("action");
 
    if(window.FormData !== undefined)  // for HTML5 browsers
    {
 
        var formData = new FormData(this);
        $.ajax({
            url: formURL,
            type: 'POST',
            data:  formData,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            success: function(data, textStatus, jqXHR)
            {
 
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
 
            }           
       });
        e.preventDefault();
        e.unbind();
   }
   else  //for olden browsers
    {
        //generate a random id
        var  iframeId = 'unique' + (new Date().getTime());
 
        //create an empty iframe
        var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
 
        //hide it
        iframe.hide();
 
        //set form target to iframe
        formObj.attr('target',iframeId);
 
        //Add iframe to body
        iframe.appendTo('body');
        iframe.load(function(e)
        {
            var doc = getDoc(iframe[0]);
            var docRoot = doc.body ? doc.body : doc.documentElement;
            var data = docRoot.innerHTML;
            //data is returned from server.
 
        });
 
    }     
});
$("#multiform").submit();

Freehostia: Install Disqus on free plan

Freehostia has a free hosting plan called Chocolate. Installing plugins for Disqus wouldn’t work on this plan, as this free hosting plan wouldn’t allow the outbound connection to get Disqus setup. Here’s a solution to get it setup:

  1. Login at Disqus and go to your Admin Settings
  2. On the Settings page on the right side, click Install
  3. From Universal Code, copy the code snippet
  4. In Wordpress, go to Dashboard > Appearance > Themes > Theme Editor, opening single.php
  5. Look for comments_template();
  6. Comment that line out and add in the php tags as shown below:
    //comments_template();
    ?>
    Paste that code snippet from step 3 here.
    <?

After you save it, you’ll now see the Disqus comments system actively working whenever you view a single post on the Wordpress blog.