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

Hi

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>
<html>
<head>
  <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; }
  </style>

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



$(document).ready(function() {

    //$(":checkbox, :radio").click(showValues);
    $(":checkbox").click(showValues);
    $("select").change(showValues);
    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) {
                            event.preventDefault();
                            $(this).parent().addClass("selected");
                            $(this).parent().find(":checkbox").attr("checked","checked");
                    }
            );

            $(".checklist .checkbox-deselect").click(
                    function(event) {
                            event.preventDefault();
                            $(this).parent().removeClass("selected");
                            $(this).parent().find(":checkbox").removeAttr("checked");
                    }
            );


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

        // display dia logue box function
        $("#divid1").dialog({
            autoOpen: false,
            modal: true,
            width: 800,
            resizable: true,
            buttons: {

                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });


        // prevent form submission, display dialogue box instead
        $("#button_id").click(function(e){
            e.preventDefault();

            $("#divid1").dialog('open');
        });

    $(".checkbox-select").click(function() {
        $(this).closest("li").find(":checkbox").attr("checked",true);
        showValues();
    });
    $(".checkbox-deselect").click(function() {
        $(this).closest("li").find(":checkbox").attr("checked",false);
        showValues();
    })

    });

  });
  //]]>
  </script>

</head>
<body>
  <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    -->
    <fieldset>
            <legend>Choose some stuff...</legend>
            <ul class="checklist">
                <li>
                    <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>
                </li>
            </ul>


<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>

</fieldset>


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

    <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">
        <tr>
            <td><strong>Option</strong></td>
            <td><strong>Value Submitted</strong></td>
        </tr>
        <tr><td>Checkbox One</td><td id="tabletd_checkbox_id_1"></td></tr>
    </table>
</div>
<!-- ##################  DIALOGUE BOX END  ################## -->

</body>


</html>

Open in new window

LVL 2
Ryan BayneWordPress DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

moagriusCommented:
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();
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.