[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery SerializeArray With Image Styled Checkboxes

Posted on 2011-10-03
12
Medium Priority
?
597 Views
Last Modified: 2012-05-12
Hello, attaching what I'm working on.

 index.html

Problem is that the checkbox with styling applied does not display in the <div> where the other checkboxes output is displayed.

This line has something to do with what inputs we include I know that much so I tried extending it to take into account the fact that the styled item is in a list, the others from the example from the web are not...

    $(":checkbox").click(showValues);

Also considered this needing ol and li adding to it in some way but I've not figured it out...

      var fields = $("#testform_id :input").serializeArray();

I then realised there are multiple places that may need changing and I could be going in circles so I would love some help.

0
Comment
Question by:Ryan Bayne
  • 8
  • 3
12 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 36904837
you have this

checklist li input {
display: none;
 }
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36904843
look fine for me : http://jsfiddle.net/AKEzs/1/
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36906039
Thanks for the reply and effort.

Slight problem in the script giving, the image paths are not correct. If you hover your mouse below the text "CheckBox One" you will find a link. That is the styled checkbox and the problem is when clicking it, it does not change the "Results".

Just going to sort out a copy of the script with paths to images hosted online but you can still see the issue without them.

Thanks again, I'm working on the same form for the last 3 days try to perfect an approach to this.
0
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!

 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36906158
Here is the script again with the original images.

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

 <style>
  body, select { font-size:14px; }
  form { margin:5px; }
  p { color:red; margin:5px; }
  b { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<form id="testform_id" method="post" name="testform_name" action="">
    <!-- 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>


<script>

    function showValues() {
      var fields = $("#testform_id :input").serializeArray();
      $("#resultstest").empty();
      jQuery.each(fields, function(i, field){
        $("#resultstest").append(field.value + " ");
      });
    }

    //$(":checkbox, :radio").click(showValues);
    $(":checkbox").click(showValues);
    $("select").change(showValues);
    showValues();
</script>

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





    <script>
    $(document).ready(function() {

            /* 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");
                    }
            );
    });
    </script>


    <script>
    $(function(){
        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');
        });
    });
    </script>

</body>
</html>

Open in new window


HainKurt, where do I have that code I don't see it?
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36906172
HainKurt sorry I didn't realise it was the styling your talking about. You've miss understood the problem because of the lack of images I think. The checkbox is meannt to be hidden so that is fine.

Eventually they will all be hidden but styled with images with a link that behaves in the same way instead.
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 36906540
check this one : http://jsfiddle.net/AKEzs/7/
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();
    })
    
    });

Open in new window

0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36906606
Ah great. That is a nice little function...

closest("li")

Thank you very much. Next step will be a challenge for me. I need to figure out how to put the "Results" in different  <td> each on its own row. The idea is that a small explanation of what the users selection will actually do will be displayed.

I need to log off but I'm guessing tomorrow I need to change $("#resultstest") to point to many <td>. I'm guessing serializeArray has a way of accessing each value in order and I could loop through them.

function showValues() {
      var fields = $("#testform_id :input").serializeArray();
      $("#resultstest").empty();
      jQuery.each(fields, function(i, field){
        $("#resultstest").append(field.value + " ");
      });
    }

Anyway thank you for your help leakim971, I hope your around tomorrow if I get stuck on the above :)
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36908910
Turns out I cannot get this to work. I even coped everything from here...

http://jsfiddle.net/AKEzs/7/

The styled checkbox has no effect at all at my end. I'm using the latest jQuery. No idea

Error console shows this error, but I had that before you made changes, it is regarding the dialogue box...

Error: $("#divid1").dialog is not a function
Source File: file:///C:/Users/Ryan/Desktop/Form%20Confirmation%20Dialogue%20With%20Styled%20Checkboxes/index.html
Line: 144
<html>
    <head>

<style>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 src="http://code.jquery.com/jquery-latest.js"></script>

    </head>
    <body>
        
<script>
    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>

<form id="testform_id" method="post" name="testform_name" action="">
    <!-- 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

0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36908933
OK I copied the source straight from the frame and that works so I'll see if I can go from there in Wordpress.

Thanks again.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36909077
nice! see you later
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36912853
Hi again.

This solution is still flawed, it displays the value for any form objects. I tried adding ID to the others, tried putting them in their own list but that never worked.

Opened a new question...

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27379943.html

Thanks again for your time,
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36913150
I want to mention that I said flaw because your solution is perfect. It reads the checkboxes so the aware here is correct for sure.

I also thought the script focuses on the list, I now realize it simply takes it into consideration more. In the other question I'm asking how best to select or ignore specific inputs per form for displaying in a <div>
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

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

830 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