[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2011-10-04
Medium Priority
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='http://code.jquery.com/jquery-1.6.3.js'></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></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(http://aaronweyenberg.com/demos/jqueryform/i/checkboxbg.gif) 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(http://aaronweyenberg.com/demos/jqueryform/i/select.gif) 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(http://aaronweyenberg.com/demos/jqueryform/i/sendit.gif) 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" />

    <!-- http://aaronweyenberg.com/demos/jqueryform/demo.html   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

moagrius earned 2000 total points
ID: 36934131
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();

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

872 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