jQuery Form - How To Display List Items Only, Not All Input Values

Posted on 2011-10-04
Last Modified: 2012-05-12

In short, what is the best way to use/display or ignore specific inputs per form for displaying in a <div> and later within a table? In this example I want to ignore the hidden input and use those in the list only. Other forms will differ.

Also I'm currently using "Results" <div> with the output value. That is only for testing, later I want to add individual values to <td> in a table. I wondering how much that has to be taking into considering when deciding how to display the inputs I want and ignore the rest.

If you can, please give me some direction on this. You will see I have a hidden input in my form, I would want to avoid showing that in the "Results" div, also avoid it when I change this script to add the values to a table.

Thanks a lot, been a lot of great help on here recently.

<!DOCTYPE html>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src=''></script>
  <script type="text/javascript" src=""></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    legend {
font-size: 17px;

fieldset {
border: 0;

.checklist {
list-style: none;
margin: 0;
padding: 0;

.checklist li {
float: left;
margin-right: 10px;
background: url( no-repeat 0 0;
width: 105px;
height: 150px;
position: relative;
font: normal 11px/1.3 &amp;quot;Lucida Grande&amp;quot;,&amp;quot;Lucida&amp;quot;,&amp;quot;Arial&amp;quot;,Sans-serif;

.checklist li.selected {
background-position: -105px 0;

.checklist li.selected .checkbox-select {
display: none;

.checkbox-select {
display: block;
float: left;
position: absolute;
top: 118px;
left: 10px;
width: 85px;
height: 23px;
background: url( no-repeat 0 0;
text-indent: -9999px;

.checklist li input {
display: none;

a.checkbox-deselect {
display: none;
color: white;
font-weight: bold;
text-decoration: none;
position: absolute;
top: 120px;
right: 10px;

.checklist li.selected a.checkbox-deselect {
display: block;

.checklist li label {
display: block;
text-align: center;
padding: 8px;

.sendit {
display: block;
float: left;
top: 118px;
left: 10px;
width: 115px;
height: 34px;
border: 0;
cursor: pointer;
background: url( no-repeat 0 0;
text-indent: -9999px;
margin: 20px 0;
  body, select { font-size:14px; }
  form { margin:5px; }
  p { color:red; margin:5px; }
  b { color:blue; }

  <script type='text/javascript'>
      function showValues() {
      var fields = $("#testform_id :input").serializeArray();
      jQuery.each(fields, function(i, field){
        $("#resultstest").append(field.value + " ");

$(document).ready(function() {

    //$(":checkbox, :radio").click(showValues);

            /* see if anything is previously checked and reflect that in the view*/
            $(".checklist input:checked").parent().addClass("selected");

            /* handle the user selections */
            $(".checklist .checkbox-select").click(
                    function(event) {

            $(".checklist .checkbox-deselect").click(
                    function(event) {

                var form_id = "testform_id";
        var form_name = "testform_name";
        var dialogue_id = "div_id_1";

        // display dia logue box function
            autoOpen: false,
            modal: true,
            width: 800,
            resizable: true,
            buttons: {

                "Cancel": function() {

        // prevent form submission, display dialogue box instead


    $(".checkbox-select").click(function() {
    $(".checkbox-deselect").click(function() {



  <form id="testform_id" method="post" name="testform_name" action="">

      <input type="hidden" name="myhiddentest" value="hiddenvalue" />

    <!--   checkboximages    -->
            <legend>Choose some stuff...</legend>
            <ul class="checklist">
                    <input name="jqdemo" value="value1" type="checkbox" id="choice1" checked="checked"/>
                    <label for="choice1">CheckBox One</label>
                    <a class="checkbox-select" href="#">Select</a>
                    <a class="checkbox-deselect" href="#">Click To Exclude</a>

<input id="choice2" name="jqdemo" type="checkbox" value="value2"> <label for="choice2">Choice two</label>
<input id="choice3" checked="checked" name="jqdemo" type="checkbox" value="value3"> <label for="choice3">Choice three</label>
<input id="choice4" name="jqdemo" type="checkbox" value="value4"> <label for="choice4">Choice four</label>


    <br />
    <div class="jquerybutton"><button id="button_id">Submit</button></div>

    <div><p><b>Results:</b> <span id="resultstest"></span></p></div>

<!-- ##################  DIALOGUE BOX START  ################## -->
<div id="divid1" title="div_name_1">
    <h4>The following option records will be re-installed...</h4>
    <table class="widefat">
            <td><strong>Value Submitted</strong></td>
        <tr><td>Checkbox One</td><td id="tabletd_checkbox_id_1"></td></tr>
<!-- ##################  DIALOGUE BOX END  ################## -->



Open in new window

Question by:Ryan Bayne
    1 Comment
    LVL 19

    Accepted Solution

    if your question is just that you don't want to get hidden inputs in that serialize function, just change line 104 to this:

     var fields = $("#testform_id :input").not('[type=hidden]').serializeArray();

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Article by: DanRollins
    This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (, we'll extend the program by adding a depth-…
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now