Here is the HTML code of the two radio buttons and button
<body>
<input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
<label for="small"><span></span></label>
<div class="label">Small</div>
<input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2" >
<label for="green"><span></span></label>
<div class="label">Green</div>
<button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>
<div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>
</body>
Here is the script I have so far. I got it to work with just the radio buttons but when I added the button script it stopped working.
<script>
const sizeSelector = 'input:radio[name=size]';
const colorSelector = 'input:radio[name=color]';
const cartSelector = 'button[name=cart]';
$(function () {
// We can add the click event to all radio buttons by linking
// their selectors with commans.
$(`${sizeSelector}, ${colorSelector}, ${cartSelector}`).click(() => {
toggleWhenSmallAndGreenAndCartButton();
});
});
const SMALL = 20;
const GREEN = 0;
const CARTBUTTON = 5;
function toggleWhenSmallAndGreenAndCartButton(){
let size = $(`${sizeSelector}:checked`).val();
let color = $(`${colorSelector}:checked`).val();
let cart = $(`${cartSelector}:checked`).val();
$('#itemdv').toggle(size == SMALL && color == GREEN && cart == CARTBUTTON) && $('#itemdv2').toggle(size == SMALL && color == GREEN && cart == CARTBUTTON);
}
</script>
What I want to happen is for the textbox to show only when the id="small" radio AND the id="green" radio AND the id="cartbutton" are all clicked.
Also, is there a way for the textbox to stay visible after all these conditions are met and not hide again if another selection is made?
That's a lot of code for a validity check
const sizeSelector = 'input:radio[name=size]';
const colorSelector = 'input:radio[name=color]';
const cartSelector = 'button[name=cart]';
$(function() {
$(`${cartSelector}`).click(() => {
validityCheck();
});
});
const SMALL = 20;
const GREEN = 0;
const CARTBUTTON = 5;
function validityCheck() {
let $size = $(`${sizeSelector}`);
let $color = $(`${colorSelector}`);
let size_flag = $size.is(':checked');
let color_flag = $color.is(':checked');
$('#itemdv').toggle(size_flag && color_flag);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
<label for="small"><span></span></label>
<div class="label">Small</div>
<input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2">
<label for="green"><span></span></label>
<div class="label">Green</div>
<button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>
<div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>
</body>You could use the disabled attribute as follows
document.getElementById("small").addEventListener("click", function(){ document.getElementById("green").removeAttribute("disabled");});
document.getElementById("green").addEventListener("click", function(){ document.getElementById("cartbutton").removeAttribute("disabled");});
document.getElementById("cartbutton").addEventListener("click", function(){ document.getElementById("itemdv").style.display = "block";});<body>
<input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
<label for="small"><span></span></label>
<div class="label">Small</div>
<input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2" disabled="true" >
<label for="green"><span></span></label>
<div class="label">Green</div>
<button type="button" class="cart-btn" id="cartbutton" name="cart" value="5" disabled="true">Add To Cart!</button>
<div id="itemdv" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea" ></div>
</body>