Develop Reference

How to disable input fields on page load if a checkbox is not checked?

I want to disable all the user input fields in a form, if the 'Status Active' checkbox is unchecked. The target is to load the page with all the details but if the Status is not active then the checkbox will show as unchecked and the rest of the input fields will remain disabled, till the user checks the checkbox. He can then edit the data and save it.
However, if the record is active, then all the fields will be enabled for editing straight away.
I have already achieved this, but the only problem is even when the record is active, the input fields are getting disabled. Can anyone please point out where is the error in my code?
<script type='text/javascript'>
$(function(){
if($('#square').not(':checked')){
$('#prizename, #prizedesc, #comment').attr('disabled','disabled');
}
});
function checkDisable(){
var square = document.getElementById('square');
var prizename = document.getElementById('prizename');
var prizedesc = document.getElementById('prizedesc');
var comment = document.getElementById('comment');
if(square.checked){
prizename.disabled = false;
prizedesc.disabled = false;
comment.disabled = false;
}
if(!square.checked ){
prizename.disabled = true;
prizedesc.disabled = true;
comment.disabled = true;
}
}
</script>
<php codes here>
<div>
<table>
<tr>
<td>Prize Status - Active:</td>
<td><div class="square">
<input type="checkbox" name="status" id="square" value="1" onchange="checkDisable()" <?php if ($status == 1) echo 'checked'; ?> />
</div>
</td>
</tr>
</table>
<label>Prize Name <input type="text" name="prizename" id="prizename" value="<?php echo isset($_POST['prize']) ? $prizename : '' ?>" > </label>
<label>Prize Description <input type="text" name="prizedesc" id="prizedesc" value="<?php echo isset($_POST['prize']) ? $prize_description : '' ?>" > </label>
<label>Comment <textarea name="comment" id="comment" rows="4" ><?php echo $comment ?> </textarea> </label>
</div>
<div class="button-section">
<input id="save_button" type="submit" name="submit" value="Save">
</div>

$('#square').not(':checked')
this condition is not satisfied because it will return the object. You have to check with length. Please check in your code.
if($('#square').not(':checked').length > 0)
Or
if(!$('#square').is(":checked"))

I have altered your code - Working from my side.
HTML: (Just insert your variables again)
<table>
<tr>
<td>Prize Status - Active:</td>
<td>
<div class="square">
<input type="checkbox" name="status" id="square" value="1">
</div>
</td>
</tr>
</table>
<label>Prize Name <br><br><input type="text" name="prizename" id="prizename"
value="Juan" ></label>
<label>Prize Description <input type="text" name="prizedesc" id="prizedesc"
value="Description" ></label>
<label>Comment <textarea name="comment" id="comment" rows="4"
>Comment</textarea></label>
<div class="button-section">
<input id="save_button" type="submit" name="submit" value="Save">
</div>
JS: (The first bit executes on page load and the second part is listening for the change event on the checkbox)
if($('#square').not(':checked').length > 0){
document.getElementById('prizename').disabled = true;
document.getElementById('prizedesc').disabled = true;
document.getElementById('comment').disabled = true;
} else {
document.getElementById('prizename').disabled = false;
document.getElementById('prizedesc').disabled = false;
document.getElementById('comment').disabled = false;
}
const checkbox = document.getElementById('square');
checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
document.getElementById('prizename').disabled = false;
document.getElementById('prizedesc').disabled = false;
document.getElementById('comment').disabled = false;
} else {
document.getElementById('prizename').disabled = true;
document.getElementById('prizedesc').disabled = true;
document.getElementById('comment').disabled = true;
}
})

Autocheck all checkboxes within dynamic html div

I want to check all the check-boxes within a html div if the "parent checkbox" for that div is checked. I'm new at JavaScript/PHP/HTML. Can anyone provide an useful explanatory example?
Here's my code:
<form>
<?php
while(list($k, $v)=each($Aff))
{
if ($k == 0)
{
array_push($parentAff, substr($v, 0, 2));
$substring = $v;
echo ('<div id ="Div'.$v.'">');
}
if ((substr($substring, 0, 2) != substr($v, 0, 2)) && (strlen($substring) != 1))
{
echo ('</div>');
echo ('<div id ="'.$v.'">');
array_push($parentAff, substr($v, 0, 2));
$counter++;
$substring = $v;
echo "<hr>";
}
echo ('<input type="checkbox" name="Aff[]" id="'.$v.'" value="'.$v.'" /><label for="text'.$k.'">'.$v.'</label>');
$substring = $v;
}
echo ('</div>');
?>
</form>
The number of checkboxes within a div depend on what data comes out of the database to the array Aff[]. The parent checkbox for each div would be the one in the parentAff array which is identified by the div id.

See the following code pen for an example of how to accomplish this using JS.
https://codepen.io/psmith104/pen/gByKzx
I've also included the code here as well.
Here is the HTML
<div>
<input type="checkbox" class="parent" /> Parent Checkbox
<br/>
<input type="checkbox" /> Child 1
<br/>
<input type="checkbox" /> Child 2
<br/>
<input type="checkbox" /> Child 3
<br/>
<input type="checkbox" /> Child 4
</div>
And here is the JS
document.querySelectorAll("input[type=checkbox].parent").forEach(function(parent) {
parent.addEventListener("click", function(e) {
e.target.parentElement.querySelectorAll("input[type=checkbox]:not(.parent)").forEach(function(child) {
child.checked = true;
});
});
});

HTML Form Number Type Unique User Input with Javascript and PHP

This question is a follow up to what I previously asked (HTML Form Number Type Unique User Input) but now I'm making the form more dynamic.
The following form asks users to list there 3 favorite genres of music:
<form id="genre" name="genre" method="post" action="musicsell.php">
<input type="checkbox" name="genre[]" id="Rap" value="Rap"/>Rap<br />
<input type="checkbox" name="genre[]" id="HipHop" value="HipHop"/>HipHop<br />
<input type="checkbox" name="genre[]" id="RnB" value="RnB"/>RnB<br />
<input type="checkbox" name="genre[]" id="Rock" value="Rock"/>Rock<br />
<input type="checkbox" name="genre[]" id="Jazz"value="Jazz"/>Jazz<br />
<p>
<input type="submit" value="Next">
<br />
</p>
</form>
From there, I am using the following code to make sure that they only use numbers 1,2, and 3 and a foreach loop to list what they have checked but how can I make sure they do not use the same number twice?
<body>
The genre(s) you selected are: <br />
<form id="form1" name="form1" method="post" action="musicresults.php">
<?php
$name = $_POST['genre'];
if(isset($_POST['genre'])) {
foreach ($name as $genre) {
?>
<input type="number" required="required" id="<?php echo $genre ?>" name="music[<?php echo $genre ?>]" max="3" min="1" />
<?php echo $genre ?>
<br />
<?php
}
}
?>
<input type="submit" name="button" id="button" value="Submit" />
</form>
</body>
This was the old javascript code from the previous question but now the id="" is generated by PHP above:
<script type="text/javascript">
function item() {
cake = Number(document.getElementById('cake').value);
twizlers = Number(document.getElementById('twizlers').value);
taffy = Number(document.getElementById('taffy').value);
if (cake == twizlers) {
alert("Some alert cake or twizlers");
return false;
} else if (twizlers == taffy) {
alert("Some alert taffy or twizlers");
return false;
} else if (taffy == cake) {
alert("Some alert taffy or cake");
return false;
} else {
return true;
}
}
</script>
How can this be done now? Does it have to be in a foreach loop? Any suggestions will be appreciated.

Unless they hack the form or build their own POST submission, they can't "use" the same checkbox twice. But you can easily check for duplicate values:
$counts = array_count_values(array_values($_POST['genre']));
foreach($counts as $form_value => $cnt) {
if ($cnt > 1) {
echo "$form_value was entered more than once";
}
}

Javascript Hidden/Show data as input Radio

I created a code which displays an information by clicking on a RADIO and other information by clicking on another RADIO.
Works normally, but when I update the page, even CHECKED, shows no information. Then I have to click again on the RADIO that is already CHECKED information to appear.
Anyone know how to solve?
Follow the code below:
<script>
// COLOR BG OR IMG BG
$(document).ready(function(){
$("input[name$='userBgOrImg']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
</script>
<style type="text/css">
.desc { display: none; }
</style>
<div><label><input type="radio" name="userBgOrImg" value="1" <?php $id = $res_select["id"]; if ( $userBgOrImg == 1 ) { echo "checked=\"checked\"";} else { echo "";}?>>Cor de Fundo</label></div>
<div><label><input type="radio" name="userBgOrImg" value="2" <?php $id = $res_select["id"]; if ( $userBgOrImg == 2 ) { echo "checked=\"checked\"";} else { echo "";}?>>Imagem de Fundo</label></div>
<div> <br /> <br /> </div>
<div id="1" class="desc">
<label for="userBgBody">Cor do fundo do Site</label>
<input type="text" class="form-control bscp span12" value="<?php $id = $res_select["id"]; echo $userBgBody; ?>" id="userBgBody" name="userBgBody">
<hr />
</div>
<div id="2" class="desc">
<label for="userImgBody">Imagem de fundo do site</label>
<input type="text" class="span12" name="userImgBody" id="userImgBody" placeholder="Imagem do fundo do site" value="<?php $id = $res_select["id"]; echo $userImgBody; ?>" />
<hr />
<label for="userImgBodyRepeat">Repetir imagem de fundo</label>
<span> <input type="radio" name="userImgBodyRepeat" value="repeat"> Sim</span> <span> <input type="radio" name="userImgBodyRepeat" value="no-repeat" selected="selected"> Não
<hr />
</div>
Thank you in advance for your help.

Try this,
$(document).ready(function(){
var did=$("input[name$='userBgOrImg']:checked").val();
if(did)
{
$("#"+did).show();
}
// your remaining code
});// document.ready function close
Demo

You need to try
$(document).ready(function(){
$("input[name$='userBgOrImg']").change(function() {
var test = $(this).val();
$("div.desc").hide();
if(this.checked) {
$("#"+test).show();
}
}).filter(':checked').change();
});

Tr this..
$(document).ready(function () {
$("input[name$='userBgOrImg']").click(function () {
var value = $(this).val();
if(value)
{
$("#"+value).show();
}
});

How to button enable when all textbox has value in jQuery?

I am new in programming. Here I have given description of my problem
I have one pair of two text box. One text box is for URL and other is for instruction but all text-boxes created dynamically depending on what value comes from database.
For example $testing_type_id=2 so I get total two pair of text boxes, let it called bundle. $i is used to identify textbox uniquely.
<input type = "text" size="33" class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
<input type = "text" class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" /> <br/>
<input type="submit" name="checkout" id="checkout" class="graybtn1 ptr button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />
Here what I wanted to do that if all bundle has value, either in one textbox or both textbox so and so enable submit button. If I removed value so disable submit button using jQuery.

I think this will work
$(document).ready(function(){
$("input[class^='uploadtxt']").keyup(function(e){
var alltxt=$("input[class^='uploadtxt']").length;
var empty=true;
$("input[class^='uploadtxt']").each(function(i){
if($(this).val()=='')
{
empty=true;
$('#checkout').prop('disabled', true);
return false;
}
else
{
empty=false;
}
});
if(!empty) $('#checkout').prop('disabled', false);
});
});​
An example is here.

if($('.uploadtxt1').val() !='' && $('.uploadtxt2').val() !='')
{
$('#checkout').hide();
}
else
{
$('#checkout').show();
}

So assuming you want to show/ enable the button if the textareas / inputs have values. You could do something like this using jQuery.
$(window).ready(function(){
if( $('input, textarea').val().length >=0 ){
//run function to enable button
}
else if ( $('input, textarea').val().length <=0 ){
//run function to disable button
}
});
I think this is what you are sort of looking for. Let me know if I am way off or not understanding you correctly.

I am going to suggest a minor markup changes so that will be easy to handle the traversing.
Wrap the elements in a <div>
<div class="item">
<input type = "text" size="33" class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
<input type = "text" class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" /> <br/>
<input type="submit" name="checkout" id="checkout" class="graybtn1 ptr button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />
</div>
Then, Attach a snippet on the change event
$("input[type=text]", $(".item")).change(function() {
var allField = true;
$(this).closest(".item").find("input[type=text]").each(function() {
allField = allField && ($(this).val().length > 0)
});
if(allField) {
$(this).closest(".item").find("input[type=submit]").prop('disabled', false);
}
});
Demo of Working Solution