preview form before submit jquery plugin

preview form before submit is a common idea. idea of making such a plugin comes in my mind when i was working on a cake project and client ask me to do it.developer needs such a plugin most of the time and don’t like to write the same code in php js or jquery again and again.

preview before submit preview form before submit jquery plugin

What is it ?

previewForm is a tool for displaying form content before it goes to the server for processing.This plugin provides users to confirm the data before they are going to sumit it.
It was built using the jQuery library. Licensed under both MIT and GPL licenses

Demo

Feature

  • Preview the value of textbox.
  • Preview the value of selectbox.
  • Preview the value of radiobox and checkbox.
  • Preview password field if option selected.

Example

Example 1 With password preview.

Example 2 with password disable.

How to Use

 

1. First, make sure you are using valid DOCTYPE and correct form structure.

Your form must contain for tag of label with corresponding id of the field.
sample is
clip image002 thumb preview form before submit jquery plugin

2. Include jQuery and previewForm JS files.

 

3. Add previewForm CSS file

4. Fire plugin using jQuery selector

 

API & Options

KeyDefault valueDescription
show_passwordtrueWhether you want to show the password field in preview
extratext‘Do You Want To submit’Extra text before confirmation buttons
yesyesButton Label for yes button
nonoButton Label for no button
titlePlease previewTitle of preview dialog

Demo

Download


  • Conor Dalton

    I have a php mailer file I would like to use it used to be [action="php/submit.php"] but now I have a working preview but no way to actually send the form. Could someone help? Thanks

    • buffernow

      Hi Conor,
      did you mean this plugin is not submitting the form ?

  • Conor Dalton

    I have a php mailer file I would like to use it used to be [action="php/submit.php"] but now I have a working preview but no way to actually send the form. Could someone help? Thanks

    • buffernow

      Hi Conor,
      did you mean this plugin is not submitting the form ?

  • Sreekanth

    Superb one. Thank You..:)

  • Sreekanth

    Superb one. Thank You..:)

  • Wasim

    hello Sir,
    I have successfully implement your code,
    Thanks for great thinking
    My problem that
    I have created database for submission
    when the preview is come and I am click on yes the data is not sent to database.
    please help me…………..

    • buffernow

      You mean to say form is not submitting ??

  • Wasim

    hello Sir,
    I have successfully implement your code,
    Thanks for great thinking
    My problem that
    I have created database for submission
    when the preview is come and I am click on yes the data is not sent to database.
    please help me…………..

    • buffernow

      You mean to say form is not submitting ??

  • Girish

    The plugin was awesome,
    I have a form and i am able to preview it. But i need few div in my form to be hidden while preview. What is the way i need to do it?

    • buffernow

      Hi Girish
      add code
      $(“#div_id”).hide();
      after the code
      $(renderTemplate).hide().appendTo(‘body’).fadeIn();

      in preview_form.js

      Thanks

  • Girish

    The plugin was awesome,
    I have a form and i am able to preview it. But i need few div in my form to be hidden while preview. What is the way i need to do it?

    • buffernow

      Hi Girish
      add code
      $(“#div_id”).hide();
      after the code
      $(renderTemplate).hide().appendTo(‘body’).fadeIn();

      in preview_form.js

      Thanks

  • Raj

    Submit is not working in PreviewForm

    • buffernow

      Please check the console with firebug
      if there is error then post it