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.
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 &quot;Lucida Grande&quot;,&quot;Lucida&quot;,&quot;Arial&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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.