title: Preview form in javascript
body: <p>I need your help pls. I'm almost there.. :)</p>
  
  <p>I want to preview my form before submission. But <strong>form.submit()</strong>; does not work.</p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form action="" method="post" name="frmaction" onSubmit="return preview(this);"&gt;
  &lt;label&gt;First Name:&lt;/label&gt;
  &lt;input name="fname" type="text" size="40" value="" /&gt;
  &lt;label&gt;Last Name:&lt;/label&gt;
  &lt;input name="lname" type="text" size="40" value="" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script&gt;
    function preview(form){
    var dia_log;
    $( "label" ).each(function(i,val) { 
    dia_log +=$(this).text() + " " + $(this).next().val()+"&lt;br/&gt;";
       });
    dia_log =dia_log.replace('undefined', '');
  
      $.confirm({
          'title'     : 'Are all these information is correct?',
          'message'   : dia_log,
          'buttons'   : {
              'Yes'   : {
                  'class' : 'blue',
                  'action': function(){
                  form.submit();
                  }
              },
              'No'    : {
                  'class' : 'gray',
                  'action': function(){}  
              }
          }
      });
  
      return false;
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>(function($){
  
  $.confirm = function(params){
  
      if($('#confirmOverlay').length){
          // A confirm is already shown on the page:
          return false;
      }
  
      var buttonHTML = '';
      $.each(params.buttons,function(name,obj){
  
          // Generating the markup for the buttons:
  
          //buttonHTML += '&lt;a href="#" class="button '+obj['class']+'"&gt;'+name+'&lt;span&gt;&lt;/span&gt;&lt;/a&gt;';
          buttonHTML += '&lt;input type="submit" class="button '+obj['class']+'" value="'+name+'"/&gt;';
  
          if(!obj.action){
              obj.action = function(){};
          }
      });
  
      var markup = [
          '&lt;div id="confirmOverlay"&gt;',
          '&lt;div id="confirmBox"&gt;',
          '&lt;h1&gt;',params.title,'&lt;/h1&gt;',
          '&lt;p&gt;',params.message,'&lt;/p&gt;',
          '&lt;div id="confirmButtons"&gt;',
          buttonHTML,
          '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
      ].join('');
  
      $(markup).hide().appendTo('body').fadeIn();
  
      var buttons = $('#confirmBox .button'),
          i = 0;
  
      $.each(params.buttons,function(name,obj){
          buttons.eq(i++).click(function(){
  
              // Calling the action attribute when a
              // click occurs, and hiding the confirm.
  
              obj.action();
              $.confirm.hide();
              return true;
          });
      });
  }
  
  $.confirm.hide = function(){
      $('#confirmOverlay').fadeOut(function(){
          $(this).remove();
      });
  }
  
  })(jQuery);
  </code></pre>
  
  <p>Hope I get responses from you.</p>
  
  <p>Thank you very much.</p>