Get values of checked checkbox to Javascript? - javascript

My code is
<div class="textbox_pizza" id="pizza" disabled="true" onchange="controlinfo(); return false;">
<span><label>Margherita</label><input type="checkbox" name="pizza" id="margherita" value="12"></span>
<span><label>Quattro Formaggi</label><input type="checkbox" name="pizza" id="quattroformaggi" value="12.5"></span>
<span><label>Capricciosa</label><input type="checkbox" name="pizza" id="capricciosa" value="13"></span>
</div>
Is there any way to get checked check-box values and subtotal all numbers in Javascript, but not to use event boxes?

Related

select checkbox and display pats of form accordingly

.Like for two checkboxes there is true or false but what should I do for 3 checkoxes ?to display parts of form according to the checkbox selection.
You can make use of multiple values (by setting distinct values in the value="…" argument, and update the conditions in the ng-show="…" argument accordingly, for example:
<input type="radio" name="test" ng-model="modelname" value="1">1</input>
<input type="radio" name="test" ng-model="modelname" value="2">2</input>
<input type="radio" name="test" ng-model="modelname" value="3">3</input>
<div ng-show="modelname=='1'">form1</div>
<div ng-show="modelname=='2'">form2</div>
<div ng-show="modelname=='3'">form3</div>
Set value from the input checkbox using "value=", and change the conditions in the ng-if="…" argument accordingly, as shown below:
<input type="radio" ng-model="variable" value=1>your content</input>
<input type="radio" ng-model="variable" value=2>your content</input>
<input type="radio" ng-model="variable" value=3>your content</input>
<div ng-if="variable==1">your form</div>
<div ng-if="variable==2">your form</div>
<div ng-if="variable==3">your form</div>

PrintThis Not Capturing Checked Checkboxes

So I am using the PrintThis JQuery plugin in order to print a form field, but for some reason I am unable to have the plugin print out any changes made to the checkboxes. When I click "Print", the only checkbox that appears to change is one that has a "checked" property by default. Any ideas on how to fix this?
HTML:
<body>
<div id="print">
<form>
<input id="option" type="checkbox" checked>
<label class="checkbox" for="option"> You are 18 years or older</label>
<br><br>
<input id="option2" type="checkbox">
<label class="checkbox" for="option2"> You have tested positive for something in your blood</label>
<br><br>
<input id="option3" type="checkbox">
<label class="checkbox" for="option3"> You have health-related kidney problems</label>
<br><br>
<input id="option4" type="checkbox">
<label class="checkbox" for="option4"> You have health-related skin problems</label>
<br><br>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5"> You have a low platelet count</label>
</form>
</div>
<br>
<br>
<input id="printButton" type="button" value="Click here to download and print this checklist to review with your doctor." />
</body>
JSFiddle: http://jsfiddle.net/Hybridx24/bxtpv26x/
Not sure what the problem might be here, but you can get around it by explicitly setting the checked attribute for the checkboxes that are checked.
$("input:button").click(function () {
$('input[type="checkbox"]').each(function() {
var $this = $(this);
if($this.is(':checked')) {
$this.attr('checked', true);
} else {
$this.removeAttr('checked');
}
});
$("#print").printThis({'importStyle': true});
});
Check Fiddle
So after skimming through the plugin's source. Looks like there's a property for form values. I added it in and it seems to work.
$('#selector').printThis({formValues:true});
http://jsfiddle.net/wzp0e9r9/

How to show text besides input tags in jquery

I want to show the text next to radio buttons in another element when the buttons are clicked.
My HTML:
<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>
I want to show the result in an element with the class display, so something like:
$('.display').val();
I tried this:
$('.display').val($('input[type=radio]:checked').closest('p').html());
I'm going to guess that what you want to do is put the text associated with the selected radio button in the .display element. If so, with your current HTML, you can use .text on the parent element to get the text, and then probably .text (not .val) on the .display element to show it (it would be .val if .display were a form field):
$("input[name=General]").on("click", function() {
var text = $(this).closest('p').text();
$(".display").text(text);
});
<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>
<p class="display"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But, it's better to use label elements so the user can click on the words as well as the actual radio button:
$("input[name=General]").on("click", function() {
var text = $(this).closest('label').text();
$(".display").text(text);
});
<p>
<label>
<input type="radio" value="1" name="General">
I need a simple template
</label>
</p>
<p>
<label>
<input type="radio" value="2" name="General">
I need a simple template based
</label>
</p>
<p>
<label>
<input type="radio" value="3" name="General">
I need a simple template based type
</label>
</p>
<p class="display"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This is the solution of the problem with getting the associated text of check Box in separate Line when the name is same.
HTML Code-
<p><input name="SiteLayoutDesign" value="5" type="checkbox"> I do not need any unique graphics designed (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="6" type="checkbox"> I will supply images (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="7" type="checkbox"> I have a template but it needs minor customization (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="8" type="checkbox"> I need a template customized (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="9" type="checkbox"> I would like a custom design created for my site (0 Hours)</p>
jQuery Code-
$(document).ready(function(){
$('input').click(function(){
var $check = $('input[type=checkbox]:checked');
$check.each(function(){
var id = $(this).val();
var did = $('input[type=checkbox][value='+id+']:checked').closest('p').text();
});
});
});
The did variable store the associated text with respect to value of that checkBox.

Checkbox is always "checked"

I have an HTML form and defined an checkbox for that.
My sample code for this:
<label class="checkbox inline" >
<input type="checkbox" id="http" name="HTTP" <%=transport_http%>/>
<input type="hidden" id="http_checked" name="http_checked" value= <%if(transport_http == "checked"){%>"http"<%}else{%>""<%}%>/>
</label>
Here I always get the value as "checked" even if I uncheck the box. What might be the wrong?
I read my hidden variable parameter in a javascript like;
var transport =request.getParameter("http_checked")
For this varibale i always get value as "http". (even if i checked or not checked the box) why is that?
I corrected as follows:
<div class="checkbox">
<label class="checkbox inline" >
<input type="checkbox" id="transport_http" name="transport_http" value="http" />
</label>
<label class="checkbox inline" >
<input type="checkbox" id="transport_https" name="transport_https" value="https"/>
</label>
</div>
And reading the value in a javascript like
request.getParameter("transport_https"),request.getParameter("transport_http")
works

Javascript - formular - nested dynamic appendchild functions

I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this
i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)

Categories