title: How to get all form elements values using jQuery?
body: <p>Here is the HTML code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html xmlns='http://www.w3.org/1999/xhtml' &gt;
  &lt;head&gt;
      &lt;title&gt;HTML Form Builder&lt;/title&gt;
      &lt;link href='css/font1.css' rel='stylesheet' type='text/css'&gt;
      &lt;link href='css/font2.css' rel='stylesheet' type='text/css'&gt;
      &lt;link rel='stylesheet' href='css/style.min.css' type='text/css' media='all' /&gt;
      &lt;link rel='stylesheet' href='css/form.min.css' type='text/css' media='all' /&gt;
      &lt;link rel='stylesheet' href='css/style1.css' type='text/css' media='all' id='css-theme'/&gt;
      &lt;link type='text/css' href='css/redmond/jquery-ui-1.8.23.custom.css' rel='stylesheet' /&gt;
      &lt;link rel='stylesheet' href='css/tipsy.css' type='text/css' media='all' /&gt;
      &lt;script type='text/javascript' src='js/jquery-1.8.0.min.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/jquery.metadata.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/jquery.validate.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/jquery.tipsy.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/jquery.json-2.3.min.js'&gt;&lt;/script&gt;
  
      &lt;script type='text/javascript' src='js/main.min.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript'&gt;
      $(function(){
          changeInnerHTML('doctor_id');
          changeInnerHTML('hospital_id');
          changeInnerHTML('clinic_id');
          changeInnerHTML('stockist_id');
          changeInnerHTML('chemist_id');
          changeInnerHTML('bloodbank_id');
          changeInnerHTML('dialysis_id');
          
      });
      function changeInnerHTML(id)
      {
          if($('#dialog_box_'+id).length)
          {
              var tmp=id.split('_');
               $.get('getDataValues.php?ref='+tmp[0],function(data,status){
                  $('#dialog_box_'+id).html(data);
              });
          }
      }
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id='container'&gt;
      
  
          &lt;h1 id=&quot;form-name&quot; style=&quot;background-color: rgb(255, 255, 255); box-shadow: none; border: none; margin: 8px 15px;&quot;&gt;New Form&lt;/h1&gt;
          &lt;form method=&quot;POST&quot; id=&quot;preview_form&quot; novalidate=&quot;novalidate&quot;&gt;
              
              
          &lt;div class=&quot;row&quot; style=&quot;display: block;&quot;&gt;&lt;label class=&quot;field&quot; for=&quot;textarea_1&quot;&gt;textarea_1&lt;/label&gt;&lt;span class=&quot;textArea&quot; data=&quot;&quot;&gt;&lt;textarea id=&quot;dialog_box_textarea_1&quot; name=&quot;textarea_1&quot; data=&quot;{&amp;quot;validate&amp;quot;:{&amp;quot;required&amp;quot;:false,&amp;quot;messages&amp;quot;:{}}}&quot;&gt;&lt;/textarea&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;row&quot; style=&quot;display: block;&quot;&gt;&lt;label class=&quot;field&quot; for=&quot;radiobutton_1&quot;&gt;radiobutton_1&lt;/label&gt;&lt;span class=&quot;radioButton&quot; data=&quot;&quot; id=&quot;radiobutton_1&quot;&gt;&lt;label class=&quot;option&quot; for=&quot;radiobutton_1_option_1&quot;&gt;&lt;input class=&quot;radio&quot; id=&quot;dialog_box_radiobutton_1_option_1&quot; type=&quot;radio&quot; name=&quot;radiobutton_1&quot; value=&quot;Option 1&quot; data=&quot;{&amp;quot;validate&amp;quot;:{&amp;quot;required&amp;quot;:false,&amp;quot;messages&amp;quot;:{}}}&quot;&gt;Option 1&lt;/label&gt;&lt;label class=&quot;option&quot; for=&quot;radiobutton_1_option_2&quot;&gt;&lt;input class=&quot;radio&quot; id=&quot;radiobutton_1_option_2&quot; type=&quot;radio&quot; name=&quot;radiobutton_1&quot; value=&quot;Option 2&quot;&gt;Option 2&lt;/label&gt;&lt;label class=&quot;option&quot; for=&quot;radiobutton_1_option_3&quot;&gt;&lt;input class=&quot;radio&quot; id=&quot;radiobutton_1_option_3&quot; type=&quot;radio&quot; name=&quot;radiobutton_1&quot; value=&quot;Option 3&quot;&gt;Option 3&lt;/label&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;row&quot; style=&quot;display: block;&quot;&gt;&lt;label class=&quot;field&quot; for=&quot;checkboxgroup_1&quot;&gt;checkboxgroup_1&lt;/label&gt;&lt;span class=&quot;checkBoxGroup&quot; data=&quot;&quot; id=&quot;checkboxgroup_1&quot;&gt;&lt;label class=&quot;option&quot; for=&quot;checkboxgroup_1_option_1&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;checkbox&quot; name=&quot;checkboxgroup_1[]&quot; id=&quot;dialog_box_checkboxgroup_1_option_1&quot; value=&quot;Option 1&quot; data=&quot;{&amp;quot;validate&amp;quot;:{&amp;quot;required&amp;quot;:false,&amp;quot;messages&amp;quot;:{}}}&quot;&gt;Option 1&lt;/label&gt;&lt;label class=&quot;option&quot; for=&quot;checkboxgroup_1_option_2&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;checkbox&quot; name=&quot;checkboxgroup_1[]&quot; id=&quot;checkboxgroup_1_option_2&quot; value=&quot;Option 2&quot;&gt;Option 2&lt;/label&gt;&lt;label class=&quot;option&quot; for=&quot;checkboxgroup_1_option_3&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;checkbox&quot; name=&quot;checkboxgroup_1[]&quot; id=&quot;checkboxgroup_1_option_3&quot; value=&quot;Option 3&quot;&gt;Option 3&lt;/label&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;row&quot; style=&quot;display: block;&quot;&gt;&lt;label class=&quot;field&quot; for=&quot;dropdown_1&quot;&gt;dropdown_1&lt;/label&gt;&lt;span class=&quot;dropDown&quot; data=&quot;&quot;&gt;&lt;select id=&quot;dialog_box_dropdown_1&quot; name=&quot;dropdown_1&quot; data=&quot;{&amp;quot;validate&amp;quot;:{&amp;quot;required&amp;quot;:false,&amp;quot;messages&amp;quot;:{}}}&quot;&gt;&lt;option value=&quot;Option 1&quot;&gt;Option 1&lt;/option&gt;&lt;option value=&quot;Option 2&quot;&gt;Option 2&lt;/option&gt;&lt;option value=&quot;Option 3&quot;&gt;Option 3&lt;/option&gt;&lt;/select&gt;&lt;/span&gt;&lt;/div&gt;&lt;input type=&quot;button&quot; class=&quot;button blue&quot; value=&quot;Submit&quot; id=&quot;submit-form&quot;&gt;&lt;input type='hidden' id='tname' name='tname' value='surveyForm_2' /&gt;&lt;/form&gt;&lt;/div&gt; &lt;!--container--&gt;
  
  &lt;script type='text/javascript' src='js/form.min.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here the code which will get all form field values:</p>
  <pre><code> $(&quot;#hidAll&quot;).append($(&quot;#preview_form :input&quot;).map(function () {
       if ($(this).val() != 'Submit') {
           if ($(this).is('select')) {
               var aa = $(this).children('option').map(function () {
                   return $(this).val();
               }).get().join(&quot;|&quot;);
               return $(this).attr('name') + '|' + aa;
           } else if ($(this).is('input:checkbox')) {
               return $(this).attr('name').substring(0, $(this).attr('name').length - 2) + '|' + $(this).val();
           } else {
               return $(this).attr('name') + '|' + $(this).val();
           }
       }
   }).get().join(&quot;,&quot;));
   alert($(&quot;#hidAll&quot;).html());
  </code></pre>
  <p>From this I am getting the output value as follows:</p>
  <pre><code>textfield_1|dgdfg,
  checkboxgroup_1|Option 1,
  checkboxgroup_1|Option 2,
  checkboxgroup_1|Option 3,
  radiobutton_1|Option 1,
  radiobutton_1|Option 2,
  radiobutton_1|Option 3,
  dropdown_1|Option 1!Option 2!Option 3
  </code></pre>
  <p>I want the out as following:</p>
  <pre><code>textfield_1|dgdfg,
  checkboxgroup_1|Option 1!Option 2!Option 3,
  radiobutton_1|Option 1!Option 2!Option 3,
  dropdown_1|Option 1!Option 2!Option 3
  </code></pre>