$(document).ready(function(){
$('#update2').click(function(){
var checkboxes = $('input[name="checkbox1"], input[name="checkbox2"]');
checkboxes.on("change", function(e){
checkboxes[0].setCustomValidity(checkboxes.filter(":checked").length ? '' : 'please select at least one option to procees')
}).change
});
});
$(document).ready(function(){
$('#select2').click(function(){
var checkboxes2 = $('input[name="choose1"], input[name="choose2"]');
checkboxes2.on("change", function(e){
checkboxes2[0].setCustomValidity(checkboxes2.filter(":checked").length ? '' : 'please select at least one option to procees')
}).change
});
});
<form>
<input type="radio" id="update" name="update-button" value="1">
<input type="radio" id="update2" name"update-button" value="2">
<input type="checkbox" id="check1" name="checkbox1" value="3">
<input type="checkbox" id="check2" name="checkbox2" value="4">
<input type="submit" name="submit-button">
</form>
<form>
<input type="radio" id="select" name="select-button" value="10">
<input type="radio" id="select2" name"select-button" value="11">
<input type="checkbox" id="box1" name="choose1" value="12">
<input type="checkbox" id="box2" name="choose2" value="13">
<input type="submit" name="submit-select">
</form>
Im trying to set custom validation to the checkboxes. so when i select the radio button with the id "select2", the checkboxes with diffrent name "choose1" and "choose2" one of them is required before submitting the form. it is working perfieclty in the first example with "update2" and "checkbox1","checkbox2" checkboxes. but i have no idea why it is not working in the second example with the "select2" and "choose1", "choose2" checkboxes.
Related
So what I am trying to do is create a radio button of, say 5 options. Because it's a radio button, obviously only one option can be selected. I want this array button to insert five values to an array where the selected gives the value of 1, and the others 0.
Let's say I have five options: A, B, C, D, E
<form method="POST">
<input type="radio" id="html" name="fav_language" value="1">A<br>
<input type="radio" id="html" name="fav_language" value="1">B<br>
<input type="radio" id="html" name="fav_language" value="1">C<br>
<input type="radio" id="html" name="fav_language" value="1">D<br>
<input type="radio" id="html" name="fav_language" value="1">E<br>
<button type="submit" value="Submit">Submit</button>
</form>
If select option B, how can I put it in an array so that it equals [0,1,0,0,0].
Is there a simple way to do this?
Thank you so much
add an eventListener to the form submit
cast a querySelectorAll to array and map the truthyness of the checked attribute
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // remove if you want the form to submit
const arr = [...document.querySelectorAll("[name=fav_language]")]
.map(rad => +rad.checked);
console.log(arr)
})
<form method="POST" id="myForm">
<input type="radio" id="html" name="fav_language" value="1">A<br>
<input type="radio" id="html" name="fav_language" value="1">B<br>
<input type="radio" id="html" name="fav_language" value="1">C<br>
<input type="radio" id="html" name="fav_language" value="1">D<br>
<input type="radio" id="html" name="fav_language" value="1">E<br>
<button type="submit" value="Submit">Submit</button>
</form>
Added an onSubmit function to the form which gets executed when the button is pressed. The function then assigns the values in the array according to the option selected by the user.
let arr = [];
const createArray = (e) => {
radios = document.getElementsByName("fav_language");
for (var i = 0, length = radios.length; i < length; i++) {
arr[i] = +radios[i].checked;
}
console.log(arr);
}
<form method="POST" onsubmit="createArray()">
<input type="radio" id="html" name="fav_language" value="1">A<br>
<input type="radio" id="html" name="fav_language" value="1">B<br>
<input type="radio" id="html" name="fav_language" value="1">C<br>
<input type="radio" id="html" name="fav_language" value="1">D<br>
<input type="radio" id="html" name="fav_language" value="1">E<br>
<button type="submit" value="Submit">Submit</button>
</form>
I have modal popup window which open on button click for each row in data table. On modal window I have 4 dropdowns and out of these I want one dropdown to be disabled for every row data. When user selects the radio button value as "Yes" it should be enabled.
Here is my script:
$(document).ready(function(){
$('.action').attr('disabled', 'disabled');
var $checkBox = $('.check');
$checkBox.on('change', function(e) {
//get the previous element to us, which is the select
var $select = $(this).prev();
if (this.checked) {
$select.removeAttr('disabled');
} else {
$select.attr('disabled', 'disabled');
}
});
});
This is my html:
<div class="form-group">
<label>Action Taken:</label>
<input type="radio" class="check" id="check" name="check" value="Yes">Yes
<input type="radio" class="check" id="check" name="check" value="Yes">No
<select name="action" id="action" class="form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
If I am adding the radio buttons after select tag its's working for one row, but after submit when I am selecting second row data it stops working then I have to refresh page again, but I want radio button selection before the select tag also it should work for each row. Can someone help me out what I am doing wrong here
first of all you need 2 different values for your radio button , you have Yes for both buttons
<input type="radio" class="check" name="check" value="Yes">Yes
<input type="radio" class="check" name="check" value="No">No
you can put your radio buttons and select in a parent div and use that parent to get to access to selectbox instead of using next , prev ... like <div class="form-group">
$('.check').change(function(){
let select = $(this).parents('.form-group:first').find('select') ;
if( $(this).val() == 'Yes')
select.attr('disabled' , false );
else
select.attr('disabled' , true );
})
https://jsfiddle.net/ns5g3rqe/
There's several issues here, and each need to be corrected for your code to work properly:
The 'No' checkbox has a value of 'Yes'. This needs to be changed in order for your JS to determine which box has been checked.
.action is a class selector, yet the select has that id. As your question suggests there may be multiple clones of this HTML, remove the id on the select and use the class instead
The select is not the prev() element to either radio. Fix this by retrieving the closest() common parent and find() from there.
You're repeated the same id of #check on the radio buttons, when they must be unique. Either change or remove them.
With that corrected, the code works:
jQuery($ => {
$('.action').prop('disabled', true);
let $checkBox = $('.check').on('change', e => {
var $select = $(e.target).closest('.form-group').find('.action');
$select.prop('disabled', e.target.value !== 'Yes' && e.target.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Action Taken:</label>
<label>
<input type="radio" class="check" name="check" value="Yes" />
Yes
</label>
<label>
<input type="radio" class="check" name="check" value="No" checked />
No
</label>
<select name="action" class="action form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group">
<label>Action Taken:</label>
<label>
<input type="radio" class="check" name="check" value="Yes" />
Yes
</label>
<label>
<input type="radio" class="check" name="check" value="No" checked />
No
</label>
<select name="action" class="action form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
I'm currently getting some weird functionality with radio buttons and forms.
Basically I have a form with 4 radio buttons. Right now: When I click a radio button it is permanently enabled. I can thus have all 4 options selected. Clicking the option does not deselect the radio option.
I would like it to switch between the options, so I can only have 1 option selected at a time. What am I missing?
my Code:
<form [formGroup]="answer" (submit)="saveAnswer()">
<input formControlName="answer" id="option1" type="radio" />
<input formControlName="answer2" id="option2" type="radio" />
<input formControlName="answer3" id="option3" type="radio" />
<input formControlName="answer4" id="option4" type="radio" />
<button type="submit">Submit</button>
</form>
constructor(
private movieService: MovieService,
private formBuilder: FormBuilder
) {
this.answer = this.formBuilder.group({
'answer': '',
'answer2': '',
'answer3': '',
'answer4': ''
});
}
If you want radio buttons that are "grouped" together (so you can select only one of them) you should give all of them the same name:
<form [formGroup]="answer" (submit)="saveAnswer()">
<input formControlName="answer" value="answer1" id="option1" type="radio" />
<input formControlName="answer" value="answer2" id="option2" type="radio" />
<input formControlName="answer" value="answer3" id="option3" type="radio" />
<input formControlName="answer" value="answer4" id="option4" type="radio" />
<button type="submit">Submit</button>
</form>
You can distinct between them using their value
I would like to pass multiple value with check box,is any provision to pass multiple value using
check box in html.
<input type="checkbox" name="service_id[]" value="1">
please suggest me how should be it is possible
It can be done this way:
HTML
<form method="post">
<input type="checkbox" name="service_id[0][]" value="1">
<input type="checkbox" name="service_id[0][]" value="2">
<input type="checkbox" name="service_id[1][]" value="3">
<input type="checkbox" name="service_id[1][]" value="4">
<input type="checkbox" name="service_id[1][]" value="5">
<input type="submit">
</form>
PHP
<?php
if(!empty($_POST['service_id']))
var_export($_POST['service_id']);
You can only have one value per input. If you want to have multiple values, then either:
give each set of values a unique identifier and resolve it on the server
encode the data in a format like JSON or CSV and then parse it on the server
If you want to have multiple inputs with different values, then just create multiple elements in the HTML.
PHP will discard all but one of them if they come from inputs which share a name and that name doesn't end with [], but your name does:
<input type="checkbox" name="service_id[]" value="1">
<input type="checkbox" name="service_id[]" value="2">
<input type="checkbox" name="service_id[]" value="3">
<input type="checkbox" name="service_id[]" value="4">
<input type="checkbox" name="service_id[]" value="5">
<input type="checkbox" name="service_id[]" value="6">
I'm trying to come up with a form comprised of radio buttons group where a user must select one of the options and if he doesn't there's a custom validity message.
So the logic will be:
A user forgets to select an option and the validity message shows up.
He goes back and selects any option to go proceed.
The problem is, the way things are it only goes ahead if the selected option is the one with the onclick event as shown below. If it isn't then the message will keep showing up.
I have tried to juggle around with the required, oninvalid and onclick thingies but to no avail. Any ideas?
Thanks!
<form>
<input type="radio" name="test" value="0" required oninvalid="this.setCustomValidity('Click me')" onclick="setCustomValidity('')">Zero<br>
<input type="radio" name="test" value="1" class="wrapper">One<br>
<input type="radio" name="test" value="2" class="wrapper">Two<br>
<input type="submit">
</form>
<form>
<input type="radio" id="test" name="test" value="0" oninvalid="this.setCustomValidity('Click me')" onclick="clearValidity();" required >Zero<br>
<input type="radio" name="test" value="1" onclick="clearValidity()" class="wrapper">One<br>
<input type="radio" name="test" value="2" onclick="clearValidity()" class="wrapper">Two<br>
<input type="submit">
</form>
<script>
function clearValidity()
{
document.getElementById('test').setCustomValidity('');
}
</script>
This can be written as a function to make it work on any type of <input>:
document.querySelectorAll('form *[data-custom-validity]').forEach(el => {
const firstInput = el.querySelector('input:first-of-type')
// set custom validity if first input is invalid
firstInput.addEventListener('invalid', () => firstInput.setCustomValidity(el.dataset.customValidity))
// listen on all inputs for a change
el.querySelectorAll('input').forEach(input =>
input.addEventListener('change', () => firstInput.setCustomValidity('')))
})
<form>
<div data-custom-validity="Click me.">
<input type="radio">
<input type="radio">
</div>
</form>
This worked for me, I'm leaving it here in case it helps anyone.
<div class="genero">
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="M">Masculino
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="F">Femenino
</div>