We Keep Coding

How to fix "A form label must be associated with a control" ? ESlint

I have read that htmlFor needs to be added to fix this error, but even with this piece of code, ESlint gives me an error. How can I fix this?
<input readOnly type="radio" name="slider-2" id="s1-2" checked />
<input readOnly type="radio" name="slider-2" id="s2-2" />
<input readOnly type="radio" name="slider-2" id="s3-2" />
<label type="text" htmlFor="s1-2" id="slide1-2">
<div className="slider-image">
<img src={SecendQadroFirst} alt="qadro" />
</div>
</label>
<label htmlFor="s2-2" id="slide2-2">
<div className="slider-image">
<img src={SecendQadroSecend} alt="qadro" />
</div>
</label>
<label htmlFor="s3-2" id="slide3-2">
<div className="slider-image">
<img src={SecendQadroThird} alt="qadro" />
</div>
</label>

You need to put the input between the label itself and ensure that you have the htmlFor attribute for the label.
<label type="text" htmlFor="s1-2" id="slide1-2">
<div className="slider-image">
<img src={SecendQadroFirst} alt="qadro" />
</div>
<input readOnly type="radio" name="slider-2" id="s1-2" checked />
</label>

The attribute you want in the <label> element is simply for, and the value must be the id of the <input> element it is associated with. The input should be after the </label> closing tag
<label type="text" for="s1-2" id="slide1-2">
<div className="slider-image">
<img src={SecendQadroFirst} alt="qadro">
</div>
</label>
<input readOnly type="radio" name="slider-2" id="s1-2" checked>
<label for="s2-2" id="slide2-2">
<div className="slider-image">
<img src={SecendQadroSecend} alt="qadro">
</div>
</label>
<input readOnly type="radio" name="slider-2" id="s2-2">
<label for="s3-2" id="slide3-2">
<div className="slider-image">
<img src={SecendQadroThird} alt="qadro">
</div>
</label>
<input readOnly type="radio" name="slider-2" id="s3-2">

How to get the value of various checkbox

I have created multiple checkbox with different names as seen in the code snippet and will like to get the values of each of them i.e if the user clicks on a checkbox the value 1 is stored and 0 if not clicked but I keep getting only the 0 value for all of them. It doesn't seem to be reading if I click it or not. I have tried various answers I have seen online and on this platform but to no avail.
My code snippet is:
<div class="col-xs-6 col-sm-4 border-pdf-td">
<div class="checkbox">
<label for="telecommunication">
<input name="telecommunication" type="hidden" value="0" />
<input type="checkbox" value="1" name="telecommunication" />
Telecommunication
</label>
</div>
</div>
<div class="col-xs-6 col-sm-5 border-pdf-td">
<div class="checkbox">
<label for="grocery">
<input name="grocery" type="hidden" value="0" />
<input type="checkbox" value="1" name="grocery" />
Grocery and Supermarkets
</label>
</div>
</div>
<div class="col-xs-6 col-sm-3 border-pdf-d">
<div class="checkbox">
<label for="petroleum">
<input name="petroleum" type="hidden" value="0" />
<input type="checkbox" value="1" name="petroleum" />
Petroleum
</label>
</div>
</div>
<div class="col-xs-12 col-sm-4 border-pdf-d">
<div class="checkbox">
<label for="ecommerce">
<input name="ecommerce" type="hidden" value="0" />
<input type="checkbox" value="1" name="ecommerce" />
E-Commerce
</label>
</div>
</div>
<div class="col-xs-12 col-sm-5 border-pdf-d">
<div class="checkbox">
<label for="mailorder">
<input name="mailorder" type="hidden" value="0" />
<input type="checkbox" value="1" name="mailorder" />
Mail order/telephone order (MOTO)
</label>
</div>
</div>
The current state of my JavaScript code to get the values is
var telecommunication = document.getElementsByName("telecommunication")[0].value;
var grocery = document.getElementsByName("grocery")[0].value;
var petroleum = document.getElementsByName("petroleum")[0].value;
var ecommerce = document.getElementsByName("ecommerce")[0].value;
var mailorder = document.getElementsByName("mailorder")[0].value;
I previously tried the code below but keep getting same results.
var telecommunication = document.querySelector('input[name="telecommunication"]:checked').value;
var grocery = document.querySelector('input[name="grocery"]:checked').value;
var petroleum = document.querySelector('input[name="petroleum"]:checked').value;
var ecommerce = document.querySelector('input[name="ecommerce"]:checked').value;
var mailorder = document.querySelector('input[name="mailorder"]:checked').value;
Please note that I have these checkbox and more on same form to get their values by their unique name.

I think you don't need this
<input name="telecommunication" type="hidden" value="0" />
So grab the value
var telecommunication = document.querySelector('input[name="telecommunication"]:checked') ? 1 : 0;

I think you are using a bad pattern of design for your form. If you want to send a 1 or a 0 then you should use radio buttons instead of checkboxes.
Checkboxes (and radios) are designed to be included in a request only when they are checked.
You can use a FormData object to get all the values from the form.
const form = document.querySelector('form');
form.addEventListener('change', event => {
const formData = new FormData(form);
for (const [ name, value ] of formData) {
console.log(`${name}:`, value);
}
});
.as-console-wrapper {
max-height: 100px !important;
}
<form>
<div class="form-group">
<h4>Telecommunication</h4>
<label>
Yes
<input type="radio" value="1" name="telecommunication" checked />
</label>
<label>
No
<input type="radio" value="0" name="telecommunication" />
</label>
</div>
<div class="form-group">
<h4>Grocery and Supermarkets</h4>
<label>
Yes
<input type="radio" value="1" name="grocery" checked />
</label>
<label>
No
<input type="radio" value="0" name="grocery" />
</label>
</div>
<div class="form-group">
<h4>Petroleum</h4>
<label>
Yes
<input type="radio" value="1" name="petroleum" checked />
</label>
<label>
No
<input type="radio" value="0" name="petroleum" />
</label>
</div>
<div class="form-group">
<h4>E-Commerce</h4>
<label>
Yes
<input type="radio" value="1" name="ecommerce" checked />
</label>
<label>
No
<input type="radio" value="0" name="ecommerce" />
</label>
</div>
<div class="form-group">
<h4>Mail order/telephone order (MOTO)</h4>
<label>
Yes
<input type="radio" value="1" name="mailorder" checked />
</label>
<label>
No
<input type="radio" value="0" name="mailorder" />
</label>
</div>
</form>

I want to dynamically get values of all checked radio buttons in certain div on a click of button

I want to dynamically get values of all checked radio buttons in certain div on a click of button .add
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
And here is .js function that should get the values of radio buttons and append it to list, but im not getting any response.
$('.add').click (function(){
$(this).siblings("fieldset").children("input[type=radio]:checked")
.each(function () {
var selectedOptions = $(this).parent().text();
$(".orderOptions").last().append("<li> +selectedOption+ </li>");
});
});
So whole process is: .click (get values of all checked radio buttons from html div) and save it to the list.

In your click event you wrote:
$(this).siblings("fieldset").children("input[type=radio]:checked")
this is wrong because this here is reference to the button not the div which you want to get the input inside it.
so you have to use the div itself :
$('#call1 fieldset input[type=radio]:checked')
then you can simply get the checked value by this.value and append it to any other div.
$('.add').click (function(){
$('#call1 fieldset input[type=radio]:checked')
.each(function () {
$('.orderOptions').append("<li>" +this.value+ "</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>

This is working
$(this).parent().children(".option1").children("fieldset").children("input[type='radio']:checked").each(function (index,element) {
var selectedOptions = $(element).prev("label").text();
$(".orderOptions").last().append("<li>" +selectedOptions+ "</li>");
});
Html
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<ul class="orderOptions">
</ul>
</div>

If you want to address a fieldset relative to your "add" button, then you can use something like this:
$('.add').click (function(){
...
$(this).siblings('div').find(':checked')
...
});
This works, because not your <fieldset> but the <div class="option1"> is the sibling of the pressed button. Once you have found the right div with the fieldset within, the selector for the checked options can be simplified to :checked, since it searches within the <div> ("write less do more ...").
$('.add').click (function(){
$('.orderOptions').append('<hr><ul>'+
$(this).siblings('div').find(':checked')
.map((_,e)=>"<li>"+e.value+"</li>").get().join('')+'</ul>'
)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>

update field on radio select

In a form I have a set of radio buttons with fixed donation amount and another field when a user can enter an amount of choice. For simplicity whilst processing the form I want a functionality where whatever is selected populates in the other field. I have the HTML/JS below:
$("input[id^='radio']").click(function() {
$("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-2" value="15.00">
<label for="amount-2">$15</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-3">$20</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-4">$25</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10"></div>
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">
I have also tried
<input type="radio" name="selamount" id="amount-3" value="20.00" onclick="document.getElementById('otheramount').value = this.value">
But when the first one changes it does not change anymore on subsequent clicks.

None of your IDs begin with "radio," which is what your [id^='radio'] selector is trying to match.
They begin with "amount" instead, so you should use:
$("input[id^='amount']").click(...
Also, here's a trick you can use with labels.
Instead of doing:
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
… you can put the input inside the label and avoid using the for attribute altogether:
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
Working Snippet
$("input[id^='amount']").click(function() { //CHANGE THIS
$("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-2" value="15.00">
$15
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$20
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$25
</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10">
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">

JQuery update input value based on another form input

I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item1" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item2" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item3" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item4" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>

Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:
<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/>
Notice how these both have a name of "item"?
Once you've done that, you can use jQuery like this:
$('[name="item"]').on('change', function() {
$('[name="itemValue"]').val($(this).val());
});
JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)

$("input[type=radio]").change(function () {
if ($(this).prop(":checked")) {
$('#yourId').val($(this).val())
}
});

<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
JQuery>
$(function(){
$("input[name='item']").change(function(){
$("input[name='itemValue']").val($(this).val());
alert($("input[name='itemValue']").val());
});
});

$('input:radio').change(function () {
if (this.checked) {
$('#hidfld').val($(this).val()));
}
});