my problem is to get a dynamic total for each checkbox group coming from a PHP loop
unique array-items comes from mysql database loop
<?php
$price_list = array(1, 7, 8, 10, 12, 15);
foreach($price_list AS $price){ ?>
<div>
<span>Price-Group <?php echo $price;?></span>
<form method="post" action="">
<input type="text" value="20.50" id="price<?php echo $price;?>"><br>
Option 1<input type="checkbox" value="1.50" data-id="<?php echo $price;?>"><br>
Option 2<input type="checkbox" value="2.50" data-id="<?php echo $price;?>"><br>
Option 3<input type="checkbox" value="3.50" data-id="<?php echo $price;?>"><br>
<input type="text" id="total<?php echo $price;?>" value="20.50">
</form>
</div>
<hr>
<?php } ?>
and here is my problem jquery-code (i need a dynamic total)
<script>
$('input:checkbox').change(function(){
var id = $(this).attr('data-id');
var total = parseFloat($('#price'+id).val());
$('input:checkbox:checked').each(function(){
total += isNaN(parseFloat($(this).val())) ? 0 : parseFloat($(this).val());
});
$('#total'+id).val(total);
});
</script>
OK, I spotted a problem in your Javascript. In the middle you do:
$('input:checkbox:checked').each(function () {....});
and this function is therefore applied to all checked checkboxes. You only want to apply the function to checked checkboxes in the pricegroup, to which the checkbox that changed belongs. Something like this:
$('#form' + id + ' input:checkbox:checked').each(function () {....});
Now you don't have a form id, so I had to add that. See: code example.
Note that you don't have to give each checkbox an individual data-id, because from them you can access the form id. For instance, when a checkbox changed:
var id = $(this).parent().attr('id');
would give you the whole form id.
Related
I got a loop of checkboxes. I put a hidden field inside with different value and different id:
<form>
<?php
for($y=0;$y<$len;$y++)
{
echo "<div class='proc'> <pre>";
echo "<h6 >Process: ".$proc[$y]." " ;
echo "People required: ".$num[$y].". ";
echo "<span class='assigned' name='assigned[]' >People Assigned: 0. </span> <input id='unchecked' type='hidden' name='link[]' value='0'/><input id='checked' type='checkbox' name='link[]' value='1'><i title='Activate Process' class='fi-link'></i>Link Process</input></h6></pre>";
?>
<div class="procLeader">
<label>Leader:</label>
<ol>
<li class="placeholder"><div class="adding">Drop Here</div></li>
</ol>
</div>
<?php
echo "</div>";
}
?>
<input type = "submit" style="margin-left:300px; width:150px;" id="savebutton" name ="submit" class="button" value = "Create Project" onclick="userSubmitted = true;"/>
</fieldset>
</form>
What I want is to submit empty checkboxes also. and if user doesnt tick it set process column to 0 in database, and if ticks to 1. The problem is form sending both variables 1 and 0 if i tick the box. I tried to disable the one boxes which are ticked in javascript:
$(document).ready(function () {
if(document.getElementById("checked").checked) {
document.getElementById('unchecked').disabled = true;
}
});
But I still got both values. Is there a way to disable hidden inputs if checkboxes are checked?
we have list employees with email id using below code
<tbody>
<?php
$sqlquery = mysql_query("select * FROM employee");
while($row=mysql_fetch_object($sqlquery)){
?>
<tr class="gradeA">
<td><input type="checkbox" name="eid" value="<?php echo $row->emailid;?>" onclick="send_email_form_test()"><?php echo $row->name;?></td>
</tr>
<?php }?>
</tbody>
when checkbox is clicked following function call,
function send_email_form_test(){
var selected = new Array();
$("input:checkbox[name=eid]:checked").each(function() {
if($(this).val() !=""){
selected.push($(this).val());
}
});
alert(selected.join(','));
var final_email = selected.join(',');
document.getElementById("to").value =final_email;
}
after click the checkbox,email ids are appears in "to" textarea field .when i will go to second page of the employee list, i cant able to get "to" textarea field,it will empty on the second page
<div>
<label for="required">TO</label>
<textarea name="to" cols="5" rows="10"></textarea>
</div>
<div>
<label for="email">Subject</label>
<input type="text" size="80" id="subject" name="subject" >
<input type="submit" name="submit" value="submit">
</div>
how to add and remove the email ids with comma separated,when i click the checkbox.I have issue on when i will go on next page of the pagination
You can add 'this' parameter to the Javascript function as onclick="send_email_form_test(this)"> then you will get the clicked checkbox object. Then you will be able to retrieve the value of the clicked check box
I did not test it, but I think this is how you could collect emails from all pages
<?php
//...
echo '<script>window.tablePage = ', $paginator->currentPage, ';</script>';
?>
<script type="application/javascript">
//...
pageSelected = selected.join(',');
//get emails selected on other pages
allSelected = JSON.parse(localStorage.getItem('emails'));
//add currently selected emails
allSelected[tablePage] = pageSelected;
localStorage.setItem('emails', JSON.stringify(allSelected));
//output emails from all pages
document.getElementById("to").value = allSelected.join(',');
//...
</script>
(JSON library is here: https://github.com/douglascrockford/JSON-js/blob/master/json2.js )
I have 4 groups of data that are tied to a click-bind event. I'm trying to add the value from a hidden field contained within each group to a paragraph later in the page, so that when the checkbox is clicked from one or more groups of data, the value from the hidden field displays within the paragraph area.
I'd also like to get it so that when the checkbox is unclicked, it removes the value from the paragraph, but for now I'm just trying to get the value to display when the checkbox is clicked.
Here's what I've tried:
This is the hidden field within the group of data that stores the value:
<input id="servicename_<?php echo $i;?>" name="servicename_<?php echo $i;?>"
type="hidden" value="<?php echo $service->PRODUCT;?>"></input>
This is the click-bind event:
$('input[id^=ckNow_]').each(function(){
$(this).bind('click',function(){
if($(this).prop('checked'))
{
var servicename = '#servicename_'+$(this).attr('value').split("_");
ServiceName += servicename;
$('#lblServiceName').append($(ServiceName));
EDIT to add the checkbox that is within each group:
<input type="checkbox" id="ckNow_<?php echo $i;?>" name="ckNow[<?php echo $i;?>]">
</input>
And then the paragraph text:
<p id="lblServiceName">Service Name
<input type="hidden" id="servicename" value="0"></input>
</p>
What am I doing wrong and how can I fix it? All responses are very appreciated and I'm completely open to any and all suggestions. Thank you.
Try
<p id="lblServiceName">Service Name
<span></span>
<input type="hidden" id="servicename" value="0"></input>
</p>
then
jQuery(function ($) {
var $checks = $('.group-data input[name^="ckNow["]').change(function () {
var vals = $checks.filter(':checked').map(function () {
return $(this).closest('.group-data').find('input[id^=servicename_]').val()
}).get();
$('#lblServiceName span').text(vals.join(', '))
})
})
Demo: Fiddle
This is my continuation of my previous question: Modifying $i inside a form
So now I created the code like this:
<form method="post" action="actionhere">
<div id='clone_me'>
<?php
for($i=1; $i<=1;$i++) {
?>
<span id="title">Line <?php echo $i;?></span>
<input type='checkbox' name='ck[]'/>
<input type='text' name='tx[]'/>
<?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>
<script>
$(document).ready(function() {
$('.addrow').click(function(){
var n= $("#clone_me").length;
var new_n=n+1;
var new_line= $('#clone_me div:first').clone().append();
$("span#title", new_line).text("Line bet "+new_n+" ");
new_line.appendTo('#clone_me');
alert(new_n);
});
});
</script>
So I can add new row when I click the button, but I want to change the title inside span element, but I can't make it work. The 1st cloned, yes, the title is changed correctly (from 1 to 2), but the 2nd cloned still display "2", not "3".
What is the correct way?
EDIT
I only put $i=1 for testing purposes. In actual application I need to change it to 10 (so will loop 10 rows)
I have the following code,
...
<input type="hidden" name="unchecked" id="unchecked" value="" />
<?php
$ind = 1;
foreach($array as $v){
?>
<input class="checkbox checked" id="checked_<?php echo $ind; ?>" type="checkbox" value="<?php echo $value['id']; ?>"/>
<?php
$ind++;
}
?>
...
I want to store checkbox values as comma seperated in hidden box. so i tried with the following jquery ,
<script type="text/javascript">
$(function(){
$("input.checked").click(function(){
//alert($(this).val());
$("input#unchecked").val($.map($("input[id^='checked_']"), function( item ) {
return $(item).val();
}).join(","));
});
});
</script>
The above script stores all values of checkbox when i click any one of check box. what i done wrong on this. kindly advice
Change
$("input[id^='checked_']")
to
$("input[id^='checked_']:checked")
Or use the below:
Select the checked: $("input[id^='checked_']").is(':checked')
Select the unchecked: $("input[id^='checked_']").not(':checked')