0
I have created a calendar for meal appointments. The date and meal types are being saved in the same column of the database table.
When I place the amount of meals automatically selects the checkbox of this type of meals, as shown in the image:
I now intend that when placing the value in the input, we select the checkbox of this type of meal and also automatically select the checkbox of the date according to the date where I place the quantity. For that I am using this script:
var inputs_ = [...document.querySelectorAll("[type='number'][name^='arrachar']")];
for(var x=0; x<inputs_.length; x++){
inputs_[x].addEventListener("input", function(){
var box = this.parentNode.previousElementSibling.querySelector("[type='checkbox']");
box.checked = !getValuesLessorEqualZero([this]);
var firstBox = document.getElementById('firstCB');
firstBox.checked =true;
var valueAllLessOrZero = getValuesLessorEqualZero(inputs_);
if(valueAllLessOrZero) firstBox.checked = false;
});
}
const getValuesLessorEqualZero = (inputs) => {
var lengthInputs = inputs.length;
var valueLessOrZero = true;
for(let i = 0; i < lengthInputs && valueLessOrZero; i++) {
valueLessOrZero = inputs[i].value <= 0 ? true : false;
}
return valueLessOrZero;
};but it only works if it’s the first of the month, I’ll show you:
If it’s the first of the month it’s all right:
But if you do the same for any other day of the month, always select the checkbox of day 1, where you have to select the day according to the fill, I will show:
How can I solve this problem?
HTML
$calendar .= "<td bgcolor='$color' data-semana=''><font size='2px'/>
<input id='firstCB' type='checkbox' name='arrachar[$year, $month, $day][dia]' value='$year-$month-$day' $marcado_data $disabled> <strong style='color:#5ca2df'>$year-$month-$day</strong> <br />
<div style='width:60%;position:relative;float:left'><input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled> <strong style='color: #000000'>Peq. Almoço</strong></div> <div style='width:40%;position:relative;float:left'><input $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' /> <br /> </div>
<div style='width:60%;position:relative;float:left'><input type='checkbox' name='arrachar[$year, $month, $day][opcaoB]' value='Almoço' $marcado_almoco $disabled> <strong style='color: #000000'>Almoço</strong></div> <div style='width:40%;position:relative;float:left'><input $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd1]' value='$marcado_almoco_qtd' style='width:65px; height: 22px' /> <br /> </div>
<div style='width:60%;position:relative;float:left'><input type='checkbox' name='arrachar[$year, $month, $day][opcaoC]' value='Almoço_(Dieta)' $marcado_dieta $disabled> <strong style='color: #000000'>Almoço (Dieta)</strong></div> <div style='width:40%;position:relative;float:left'><input $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd2]' value='$marcado_dieta_qtd' style='width:65px; height: 22px' /> <br /></div>
<div style='width:60%;position:relative;float:left'><input type='checkbox' name='arrachar[$year, $month, $day][opcaoD]' value='Lanche' $marcado_lanche $disabled> <strong style='color: #000000'>Lanche</strong></div> <div style='width:40%;position:relative;float:left'><input $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd3]' value='$marcado_lanche_qtd' style='width:65px; height: 22px' /><br /> </div>
</font></center></td>";
Hello your doubt is actually javascript and html and not php. Also post the html code so we can evaluate better.
– Rodrigo Bezerra Rodrigues
@Rodrigo Bezerra Rodrigues already edited the question with html
– user130631
you are marked by the id firstCB, which is fixed. If your code is being mounted by a loop in php, Voce would also need to have a unique ID
– aa_sp
@aa_sp, yes the problem is there, but how do I create this unique id in this case?
– user130631
uses some variable that modifies every time you pass the loop, a counter, a bank id,... something that distinguishes them. Or else you can do something via js even but then have to work with selectors.
– aa_sp
@aa_sp, can put an example of a counter for my case?
– user130631
@Bruno, Voce can add a qq ID that comes from the bank, getting firstCB1, firstCB2, firstCB3,...
– aa_sp