I have input radio list with custom values wich is loaded from the database. By default i have one item checked when window is loaded.
So when i try to grab that checked value i get NULL, but value of checked radio exist.
Loop:
<?php $first = true; ?>
<?php foreach ($prices as $item): ?>
<tr>
<td><input type="radio" name="price" value="<?= $item['price'];?>" class="price" <?= $first ? 'checked' : '' ?>> </td>
<td><input type="text" name="price" value=" <?= $item['price'];?>" class="price_field">€</td>
</tr>
<?php $first = false;?>
<?php endforeach; ?>
Whit this loop i get succesfull list of items and only first item is selected.
So now when page is loaded i want to get selected value and put him on other div like sum.
I try with jQuery but null
$(window).on("load", function(){
var price = $(".price");
var total = $(".total");
alert($(".price").val()); // null
});
Related
I have a function that monitors a list of checkboxes to detect if some are selected. If some are selected the button shows, otherwise the button hides. The checkbox lies within of a foreach in PHP to transform into a list of checkboxes.
The problem is that only the first checkbox shows the delete button.
agenda.php:
<tbody>
<form id="delTask" name="delTask" method="POST" action="">
<?php foreach ($tasks as $value): ?>
<tr>
<td>
<div class="checkbox">
<label>
<input name="excluir[]" value="<?php echo $value[0] ?>" id="taskSelect" type="checkbox">
</label>
</div>
</td>
<td><?php echo $value[1] ?></td>
<td><span class="label label-success">+50</span></td>
</tr>
<?php endforeach; ?>
</form>
</tbody>
app.js:
// Hide/Show button of del
$("#taskSelect").click(function () {
if( $("#taskSelect").is(':checked') ) {
$("#writeTask").hide();
document.getElementById("deleteTask").style.display = 'block';
} else {
$("#writeTask").show();
document.getElementById("deleteTask").style.display = 'none';
};
});
The problem is that you have many checkbox inputs with the ID taskSelect. Element IDs must be unique throughout the whole document. Instead you will want to use a class name, as the same class can be attached to multiple elements:
<input name="excluir[]" value="<?php echo $value[0] ?>" class="taskSelect" type="checkbox">
You then use a selector like .classname rather than #id in your jQuery click handler:
$(".taskSelect").click(function () {
...
});
As an aside, rather than doing document.getElementById("id").style.display to show and hide things, as your are using jQuery you can just use $("#id").show() and $("#id").hide() throughout.
I have following code to get the values of all checked checkboxes. Surprisingly last element of an array comes as a 'Array'.
var selected = [];
$('#checkboxes input:checked').each(function(){
selected.push($(this).attr('value'));
});
Even if only one checkbox is checked, it adds extra element in an array.
Array will be like this:
selected[0]=Dove
selected[1]=Array
What can be the issue with it? I'm unable to find any reason behind this. Can anyone help?
HTML Code
<ul id='checkboxes' class="list-style1">
<?php foreach($brands as $row){ ?>
<span class='checkbox-wrapper' id='<?php echo $brand; ?>'>
<li><input type='checkbox' value='<?php echo $row['brand']; ?>'>
<label for='<?php echo $row['brand']; ?>'><?php echo $row['brand']; ?></label>
</li></span>
<?php } ?>
</ul>
var checkedValues = $('#checkboxes input:checked').map(function() {
return this.value;
}).get();
it will return the selected value of the checkbox in array.
referrence link
I have following table
<tbody>
<?php
foreach($redeemSales as $sale)
{
?>
<tr value='<?php echo $sale['id']; ?>'>
<td><input type="checkbox" name="salesIds[]" value="<?php echo $sale['id']; ?>" /></td>
<td><?php echo $sale["ring"];?></td>
<td><?php echo formatFullDate($sale["soldDate"]) ?></td>
<td><?php echo $sale["saleType"]; ?></td>
<td>
<div class="col-lg-8">
<select name="claimTypes[]" class="form-control redeemOptions">
<option value="None">None</option>
<option value="CD">CherieDori Credit (CD)</option>
<option value="Amex">American Express Card (Amex)</option>
</select>
</div>
</td>
</tr>
<?php }?>
</tbody>
On Changing any value of redeemOptions, it should check the corresponding Checkbox. Now i do not want people to automatically click on checkboxes. So i have them disabled , the get checked when i change options in redeemOptions. Here is the javascript code
$('.redeemOptions').change(function()
{
var menuChanged = $(this);
parentForm = menuChanged.closest('form');
correspondingCheckbox = parentForm.find('input[name=salesIds]');
var status = (menuChanged.val() === 'None') ? false : true;
$(this).closest('tr').children()[0].childNodes[0].checked = status;
});
I have a button, that gets all the saleIds associated with only checked checkboxes
Here is the code
$('.redeemBtn').on('click', function()
{
$('input[name="salesIds[]"]').disabled = false;
var checked = $('input[name="salesIds[]"]:checked').serialize();
var cclaim = $('select[name="claimTypes[]"]').serialize();
if(checked !== '')
window.location.href = 'actions.php?j=4&' + checked + '&' + cclaim;
else
alert('No sales were selected');
});
It works fine if i remove the disabled from checkbox otherwise it gives "No sales selected" however i do not want to remove the disabled. I don't want users to interact with it. How can i get values of the checkBoxes that are displaying as being checked. What should be done
You can't do this, you'll need to enable it to see/get it server-side (otherwise the "client won't send it at all"). The browser "doesn't include disabled controls" in the " submission", since they "don't count as "successful" controls".
so better assign some value to this check box by default at the time of your submission.
see this article:http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
e.g.:enable/disable checkbox on button click
<html>
<head>
<title></title>
<script type="text/javascript">
function chk_control(str) {
if(str=='dsb'){document.getElementById('ck1').disabled=true;}
else {document.getElementById('ck1').disabled=false;}
}
</script>
</head>
<body >
<form name=form1 method=post action=check.php>
<table>
<tr ><td ><input type=checkbox name=ckb id=ck1 value=1></td><td >PHP</td></tr>
<tr ><td ><input type=button value='Disable' onClick="chk_control('dsb')";></td>
<td ><input type=button value='Enable' onClick="chk_control('enb')";></td></tr>
</table></form>
</body>
</html>
It's a pretty common case for webdev. You should add some hidden input in this case.
<input type="hidden" name="salesIds[]" value="smth">
and keep your checkboxes without name for "presentation" purposes.
$('#id of checkbox').prop("disabled", false);
This will enable the field. If you need to get the disabled field value just enable it after clicking the submit.This is the easiest way go get values.
I am creating a Data table with following code
<?php
foreach($redeemSales as $sale)
{
?>
<tr class='clickableRow<?php echo $isRead ? '' : ' newrow' ?>' href='#'>
<td><form><input type="checkbox" id="userSelection" name="userslection" ></form></td>
<td><?php echo $sale["ring"];?></td>
<td><?php echo formatFullDate($sale["soldDate"]) ?></td>
<td><?php echo $sale["saleType"]; ?></td>
<td>
<div class="col-lg-8">
<select name="type" id="redeemOptions" class="form-control">
<option value="None">None</option>
<option value="CD">(CD)</option>
<option value="Amex">American Express Card (Amex)</option>
</select>
</div>
</td>
</tr>
<?php }?>
I want to make it so if anyone change the option to any oe of CD Or Amex, it will set the selection to its row as checked.
jAVAScript code is here
<script language="javascript">
$(document).ready(function(e)
{
$('#redeemOptions').change(function(){
if($('#redeemOptions').val() == 'None')
{
document.getElementById("userSelection").checked = false;
}
else
{
document.getElementById("userSelection").checked = true;
}
});
});
</script>
As you can see that there is a for loop, so its rows getting added in a table. The above method works only for first row. If i change the options, it will set selection to Checked. But after first rows, no other row is showing that behavior. It is probably something to do with id of the elements.
How can one find out a solution so that other rows show same behavior. Secondly, if I have to get the ids or values of all rows that are "Checked" how will i do it in php
the problem is that an id has to identify one single element on the page, and you are generating multiple items with the same id. Change your select to something like the following:
<select name="type" class="form-control redeemOptions">
And then change your javascript function to the following, to take advantage of the fact that "this" will equal the object that the change event is being fired from:
$('.redeemOptions').change(function(){
var menuChanged = $(this),
parentForm = menuChanged.closest('form'),
correspondingCheckbox = parentForm.find('input[name=userSelection]');
if(menuChanged.val() == 'None')
{
correspondingCheckbox[0].checked = false;
}
else
{
correspondingCheckbox[0].checked = true;
}
});
Finally, remove the id="userSelection" from the checkbox and just leave the name. It won't hurt the functionality but it is technically invalid because again you can only have one element of a given id on the page.
As I can see for every $sale in $redeemSales you have a checkbox having id "userSelection" and a select box having id "redeemOptions". I advise you to use unique ids. So append $i=0...$i++ to the ids of both.
For Row 1: userSelection0 redeemOptions0
For Row 2: userSelection1 redeemOptions1
and so on..
In Select tag, use onchange event :-
<select name="type" id="redeemOptions<?php echo $i; ?>" class="form-control" onchange="foo(<?php echo $i; ?>)">
And write a javascript function :-
<script language="javascript" type="text/javascript">
function foo(id)
{
if($('#redeemOptions'+id).val() == 'None')
{
document.getElementById("userSelection"+id).checked = false;
}
else
{
document.getElementById("userSelection"+id).checked = true;
}
}
</script>
I am new to HTML and javascript. Was playing around with it and faced with this issue. I have a table and each row of this table has a dropdown box and a button. When I click on the button I try to extract the value from the corresponding dropdown box..but I always get the value from first dropdown box which is not what I want.
<tr>
<td><?php $version=$row->getVersionNumbers() ?>
<select id="drop1" name="version" class="temp">
<?php foreach($version as $ver): ?>
<option value="<?php echo $ver?>"><?php echo $ver?></option>
<?php endforeach; ?> </td>
</select>
<td style="text-align:center;">
<a class="btn" href="<?php echo
$view['router']->generate('ProjectMonstroTameBundle_view', array('versi'=>1 )) ?>"
onclick="viewSchema(this,pullVersion(document.getElementById('drop1')))">View Schema</a>
</td>>
</tr>
<script>
function pullVersion(dropdown)
{
return dropdown.options[dropdown.selectedIndex].value;
}
</script>
for onclick pullVersion always gets version number from first dropdown box...Could anyone help me as to how I should fix this
For a single select where the options all have a value, you can simply use the value property of the select element:
document.getElementById('drop1').value;
Where the element is a multiple select, you need to iterate over the options and get the value of those that are selected:
var sel = document.getElementById('drop1');
var values = [];
for (var i=0, iLen = sel.options.length; i<iLen; i++) {
if (sel.options[i].selected) {
values.push(sel.options[i].value);
}
}
This
document.getElementById("drop1").options[document.getElementById("drop1").selectedIndex].value
should do