Is there any good way to put "All-cheked" button on Blade PHP?
I've tried to control it by JavaScript. However, Each checkbox name is different.
Even I am aware this way seems not a good method.
<script language="JavaScript" type="text/javascript">
function AllChecked(){
var all = document.form.all.checked;
for (var i=0; i<document.form.test.length; i++){
document.form.test[i].checked = all;
}
}
function　DisChecked(){
var checks = document.form.test;
var checksCount = 0;
for (var i=0; i<checks.length; i++){
if(checks[i].checked == false){
document.form.all.checked = false;
}else{
checksCount += 1;
if(checksCount == checks.length){
document.form.all.checked = true;
}
}
}
}
</script>
#for ($i = 0; $i < 10; $i++){{$i}}
<div>
{{date('m-d',strtotime($i." day"))}}
<input type="checkbox" name="available_date" value="<?php echo date("Y-m-d", strtotime("{{$i}} day")) ?>">
<button onClick="AllChecked();">ALL Checked </button>
#for ($j = 0; $j < 25; $j++)
<input type="checkbox" name="{{date('Y-m-d',strtotime($i." day"))}}" value="{{$j}}">{{ $j }}:00
#endfor
</div>
Actually you can't control dynamic users behavior by PHP, because PHP works only on server, so all such things are managing by javascript (if I understood you correctly)
Not 100% sure, but seems you don't need both checkbox and button for All Checked
In javascript you can select all checkboxes using a class (will show example with jquery for simplicity)
// html
<input type="checkbox" class="all_checked" name="available_date" value="<?php echo date("Y-m-d", strtotime("{{$i}} day")) ?>">
#for ($j = 0; $j < 25; $j++)
<input type="checkbox" class="checkbox" name="{{date('Y-m-d',strtotime($i." day"))}}" value="{{$j}}">{{ $j }}:00
#endfor
// js
$('.all_checked').on('click', function () {
const allCheckedCheckbox = $(this);
$('.checkbox').each(function () {
$(this).prop('checked', allCheckedCheckbox.prop('checked'));
});
});
You can do this using jquery.
Simply add a common class to each of the checkboxes
ex :- class="checkbox"
And write a js function
function AllChecked(){
$('.checkbox').attr("checked");
}
Related
I have to write inputbox inner a looping statement.
let say I have 3 times loop
<?php
for($i = 0; i<3;i++){
?>
<input type="number" id="numb" onkeyup="getvalue(this.value)"/>
<span id="result"></result>
<?php
}
?>
<script>
function getvalue(val){
var res= parseInt(val)*10;
if(isNaN(res) == true){
res = 0;
}
document.getElementById('result').value = res;
}
</script>
the question is, how to set every value I type in inputbox only settbthe result
inner span from its row index only
You can access the input that the user is typing in it bye getting the event object and the target property of that. That event.target (input element) has a property called nextElementSibling.
Use the nextElementSibling to access the next element after the input which here it is the span.
No need to use id or other methods
Change the input element to:
<input type="number" class="numb" onkeyup="getvalue(event)"/>
Change the script tag content to:
function getvalue(event) {
var input = event.target;
var val = input.value;
var res = parseInt(val) * 10;
if (isNaN(res) == true) {
res = 0;
}
input.nextElementSibling.textContent = res;
}
You might have more luck trying an approach like this. Remove the ID attributes from the elements - you can replace with class names if you like or remove entirely from the span element as it should not necessarily be required to allow you to target it programmatically. If you use sibling selectors you can use the target attribtute of the event ( in this case keyup within the number element ) and then traverse the DOM to find the span...
<?php
for($i = 0; $i<3; $i++){
?>
<input type="number" class="numb" onkeyup="getvalue(event)"/>
<span class="result"></span>
<?php
}
?>
<script>
function getvalue(e){
var node=e.target.nextElementSibling;
var res=parseInt(e.target.value) * 10;
if( isNaN(res) )res=0;
node.textContent=res;
}
</script>
function getvalue(e){
var node=e.target.nextElementSibling;
var res=parseInt(e.target.value) * 10;
if( isNaN(res) )res=0;
node.textContent=res;
}
<input type="number" onkeyup="getvalue(event)" />
<span></span>
<input type="number" onkeyup="getvalue(event)" />
<span></span>
<input type="number" onkeyup="getvalue(event)" />
<span></span>
You can set an id for each input and it related result span. The id will just be the $i of the for loop. This will help to easily access the specified result span in the getvalue function:
<?php
for ($i = 0; $i < 3; $i++) {
?>
<div>
<input type="number" data-input-id="<?php echo $i; ?>" onkeyup="getvalue(this)" >
<span class="result-<?php echo $i; ?>"></span>
</div>
<?php
}
?>
<script>
function getvalue (element) {
const inputId = element.dataset.inputId;
const val = element.value;
let res = parseInt(val) * 10;
res = isNaN(res) ? 0 : res;
document.querySelector(`.result-${inputId}`).innerText = res;
}
</script>
I have this function for my computation that whenever the text fields are populated, it will add a stack to a variable and whenever a checkbox is checked on the text field, the text field wont add a value.
everything is working except the checkbox function, I already tried onchange and onclick but nothing happens. Can you check my codes?
Script:
function submission(){
x = 19;
ctr = 1;
ctr2 = 0;
days = ('<?php echo $query[0]->totaldays; ?>') - 1;
$('#payment').html('');
for(i = 1; i<=x ; i++){
if($('#guest'+i).val() != ""){
ctr++;
}
if(document.getElementById('kid'+i).checked){
ctr2++;
}
}
totalCount = 0;
totalCount = parseInt(ctr) - parseInt(ctr2);
totalCount = parseInt(ctr) * parseInt(days);
totalCount = parseFloat(totalCount) * 100;
$('#totalPayment').val(totalCount);
$('#payment').html(totalCount);
}
HTML:
<div class="row">
<div class="col-sm-10">
<label for="exampleInputtext1"><a style = "color:black; font-size: 10px;" ><input onchange="submission()" type="checkbox" name="kid1" id="kid1" > </a>Guest 1:</label>
<input type="text" class="form-control" onblur="submission()" name="guest1" id="guest1"/>
</div>
</div>
The onclick event handler will work for checkbox,you can try this code,
HTML:
<input onclick="submission(this)" type="checkbox" name="kid1" id="kid1" >
JS:
And you can check and see whether the checkbox is checked or not using the following code,
function submission(click){
....
var clicked=click.checked;
...
}
if it is true that means the checkbox has been checked and if it is false it has not been checked.
$("#guest1").change(function() {
if(this.checked) {
//Do this.
}
else{
// Do this.
}});
don't need to mention onclick function on html. just add this code in JS.
its calling auto based on id.
let me know if you need any help in understanding.
Ajay
thanks for your answers, it seems like I just messed up a little bit on my mathematical equation.
totalCount = 0;
totalCount = parseInt(ctr) - parseInt(ctr2);
totalCount = parseFloat(totalCount) * parseInt(days);
totalCount = parseFloat(totalCount) * 100;
$('#totalPayment').val(totalCount);
$('#payment').html(totalCount);
I have an array of data on which each row has a checkbox which the user can check to select a row.
I want to make it so that if no row is selected, the "delete" button will be disabled.
The button gets disabled on page load, and the checkbox on row 1 works as planned, but if the table contains 2 or more rows the rest don't.
This is what I have so far:
<button class="btn btn-default modal-opener" id="chkboxdelbtn" onchange="toggle();" type="button" type="submit">Delete Selection</button>
<?php
$row = get_member_tskey_info($mysqli);
$i = 0;
foreach ($row as $r){
echo '<tr><td style="padding-right:0px;">';
if (($i<=2) && ($r['status'] == 1)){
echo '<input type="checkbox" name="keyselect[]" id="keyselect[]" value="' . $r['uid'] . '" /></td>';
}else{
echo '<input type="checkbox" disabled="disabled" value="" /></td>';
}
...
Javascript:
document.getElementById('chkboxdelbtn').disabled = true;
function toggle() {
if (document.getElementById('keyselect[]').checked == true) {
document.getElementById('chkboxdelbtn').disabled = false;
} else {
document.getElementById('chkboxdelbtn').disabled = true;
}
}
IDs have to be unique. Use a class instead.
foreach ($row as $r){
echo '<tr><td style="padding-right:0px;">';
if (($i<=2) && ($r['status'] == 1)){
echo '<input type="checkbox" name="keyselect[]" class="keyselect" value="' . $r['uid'] . '" /></td>';
}else{
echo '<input type="checkbox" disabled="disabled" value="" /></td>';
}
Javascript:
document.getElementsById('chkboxdelbtn').disabled = true;
function toggle(){
var keyselects = document.getElementsByClassName('keyselect');
for (var i = 0; i < keyselects.length; i++) {
if (keyselects[i].checked == true) {
document.getElementById('chkboxdelbtn').disabled = false;
break;
}
}
}
Be aware for the duplicate ID's on your checkbox. It cannot happen. Actually, you wouldn't even need an id to the checkbox, as you can make your toggle() function much simpler with querySelectorAll():
function toggle() {
document.getElementById('chkboxdelbtn').disabled =
( document.querySelectorAll("input[type='checkbox']:checked").length <= 0 );
}
This will look for all input checkboxes that are checked, and see if there's at least one. If not, it get's disabled.
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
i have a form that includes several text inputs and checkboxes (the checkboxes comes from a DB), so... i know how to validate them separetly but i need to validate them together, the way i'm doing this only validate checkboxes, i know why its happening but i don't know how to write the right way... ¿can you help me? here is the code:
<form action="sendreq.php" name="contact" onsubmit="return valida_frm(this)" method="post">
<label>Name</label>
<input name="name" type="text" />
<label>Email</label>
<input name="email" type="text"/><!-- And Severeal inputs then the checkboxes-->
<?php $list3 = mysql_query("SELECT * FROM products ORDER BY id ASC LIMIT 20");
while($row = mysql_fetch_object($list3)){ ?>
<input id="product" name="product[]" class="label" type="checkbox" value="<?php echo $row->name?>"><label class="label"><?php echo $row->name?></label>
<?php }?>
The Validation doesn't work fine its evident why, i just need the right way to write and unify the return of the alert:
function valida_frm(form){
var alerta="Ooops:\n";
if (form.name.value == "") {alerta+="Name.\n";}
if (form.email.value == "") {alerta+="Email.\n";}
for(var i = 0; i < form.product.length; i++){
if(form.product[i].checked)return true;}
alert('Oooops');
return false;
if (alerta!="Error:\n"){
alert(alerta);
return false;
}else{
return true;
}
}
Thanks for your time!
Do not call a field for "name" and then test form.name since it already has a .name
Then test form["product[]"] and not form.product - you cannot have id="product" since ID has to be unique!
I suggest you give id="product<?echo $somecounter; ?>" />...<label for="product<? echo $somecounter; ?>">...</label>
Also test against Error (or nothing as in my suggesion) and not Oops
Also more issues fixed
DEMO
function valida_frm(form){
var alerta="";
if (form.name.value == "") {alerta+="Name.\n";} // Please use FullName or such
if (form.email.value == "") {alerta+="Email.\n";}
var chks = form["product[]"],
checked = false;
for(var i = 0; i < chks.length; i++) {
if(chks[i].checked) {
checked = true;
break;
}
}
if (!checked) {
alerta+='Product.\n';
}
if (alerta){
alert("Error:\n"+alerta);
return false;
}
return true;
}
What is want is - when the checkbox is checked option no. 5 in select list will be selected and when the checkbox is unchecked option no. 0 will be selected in the select list.
The select list and the checkboxes are generated dynamically in the php code as below :
echo "<select name='coupons".$i."' id='coupons".$i."'>";
------- All Options --------
echo "</select>";
<input type='checkbox' name='myCheckbox[]' value='<?php echo $i."_".$row->id; ?>' onclick='setCCode("myCheckbox[]",<?php echo $i;?>)'>
-----------------------------------------------------------------------------
Solved the second requirement on my own now ..... thanks to all for your inputs
just added the following line in the checkAll() within the for loop
setCCode(children[i],i+1);
The javascript function :
function setCCode(checkbox_name,i)
{
var form_object = document.getElementsByName(checkbox_name+"["+i+"]");
var selname = document.getElementsByName("coupons"+i)[0];
if(form_object.checked) {
selname.selectedIndex = 5;
}
else {
selname.selectedIndex = 0;
}
}
The above issue is solved....... thanks to all
Now what i need to do is when a user checks a checkbox to select or deselect all the dynamically generated checkboxes on the form the above logic should work.
<input type='checkbox' name='checkall' onChange="checkAll(this, 'myCheckbox[]')">
<span class="chkall">Check / Uncheck All</span>
<input type='checkbox' name='myCheckbox[]' value='<?php echo $i."_".$row->id; ?>' onclick='setCCode(this,<?php echo $i;?>)'>
The javascript code i am using to select/deselect all checkboxes on form is as below :
function checkAll(parent, field)
{
var children = document.getElementsByName(field);
var newValue = parent.checked;
for (i = 0; i < children.length; i++){
if (children[i].disabled == false) {
children[i].checked = newValue;
}
}
}
function setCCode(Sender,i)
{
document.getElementsByName("coupons"+i)[0].selectedIndex = Sender.checked ? 5 : 0;
}
getElementsByName returns an array of objects. Replace the line with:
var form_object = document.getElementsByName(checkbox_name+"["+i+"]")[0];
You can pass refference to the checkbox itself as a parameter
<input type='checkbox' name='myCheckbox[]' value='<?php echo $i."_".$row->id; ?>' onclick='setCCode(this,<?php echo $i;?>)'>
function setCCode(Sender,i)
{
document.getElementsByName("coupons"+i)[0].selectedIndex = Sender.checked ? 5 : 0;
}
If you have a reference to the form that the checkbox is in, and it has a unique name in the form, then you can access it as:
form_object = form.elements[ checkbox_name + "[" + i + "]" ];
and you can also use the ternary operator to make the code more concise:
selname.selectedIndex = form_object.checked? 5 : 0;
Edit
Sorry, missed the obvious. If you pass a refereference to the checkbox in the handler, then you can also get the form (all form controls have a form property that references the form they are in). So as Jan Pfeifer suggested (abbreviated markup):
<input ... onclick='setCCode(this, <?php echo $i;?>)'>
then the script is just:
function setCCode(checkbox, i)
{
checkbox.form.elements['coupons' + i].selectedIndex = checkbox.checked? 5 : 0;
}