I am sure this has been answered before but I am not able to find what I need. The jsfiddle below is a basic idea of what I am trying to do. I want the user to come to the page and the text/select fields are disabled.
If they select EITHER of the radio buttons in the 'radio' class, I want the disable attribute to be removed from all 3 fields in the 'fields' class. I have tried different onClick events and cannot seem to get it to work but I am not that familar with javascript and jquery.
Can anyone give me an idea of how I can make this happen?
http://jsfiddle.net/q5jqqgnt/
<input class="radio" name="radio" type="radio">Radio 1
<input class="radio" name="radio" type="radio">Radio 2
<br>Field 1
<input class="fields" disabled="disabled" name="field1" type="text">
<br>Field 2
<input class="fields" disabled="disabled" name="field2" type="text">
<br>Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
you need to remove the disabled attribute with the .removeAttr() function in jQuery
$('.radio').change(function(){
$('.fields').removeAttr('disabled');
});
JSfiddle demo
At its simplest, I'd suggest using prop(), rather than removeAttr():
$('.radio').on('change', function(){
$('.fields').prop('disabled', false);
});
$('.radio').on('change', function() {
$('.fields').prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" disabled="disabled" name="field1" type="text" />
<br />Field 2
<input class="fields" disabled="disabled" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
You could, in compliant browsers, also somewhat emulate the disabled property's presence, and removal, with just CSS:
.radio ~ input.fields {
pointer-events: none;
opacity: 0.4;
background-color: #ccc;
}
.radio:checked ~ input.fields {
pointer-events: auto;
opacity: 1;
background-color: #fff;
}
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" name="field1" type="text" />
<br />Field 2
<input class="fields" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
Unfortunately, while this works to prevent mouse-interaction (the user cannot focus the fields with via a mouse-click), they can still use the tab button to focus the field and enter text, and, of course, the form-elements would still be considered 'successful' (albeit with potentially empty-values), and would be submitted to the server when the form is submitted.
So, while potentially useful under some very specific circumstances, it's almost certainly not to be used for most situations.
References:
CSS:
pointer-events.
jQuery:
on().
prop().
Related
I would like to transfer radio button data from the first html to the second with Pure JavaScript Its ok if you use some jQuery.
jQuery used
1st HTML
<body>
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<button onclick="saveSession()">save</button>
<script type="text/javascript">
function saveSession(){
// I want to save the value of the radio button to sessionStorage here
}
</script>
</body>
In my second HTML I would like to retrieve this data and set the value of the radio buttons to the same.
2nd HTML
<body onload="type()">
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<script type="text/javascript">
function type(){
//I want to get the data with sessionStorage.getItem()
}
</script>
</body>
It would be better if you can also tell me how to disable the form
Thanks in advance for your time and effort!!
Adding my comments as an answer. To access the radio button value, since you're using jQuery, try this:
$('input[name="num"]:checked').val();
On the first HTML page,
sessionStorage.setItem("num", $('input[name="num"]:checked').val());
And then on the second page,
sessionStorage.getItem("num");
or, to set the value of the radio on the 2nd page with the stored value:
$('input[name="num"]').val([sessionStorage.getItem("num")]);
Here is a fiddle: https://jsfiddle.net/8or3chye/
You can add a change event handler to your radios and save a new value to the local storage on that event. Afterwards on page load you need to read the saved value of the radio from the local storage and if it exists - you find an element by id and set checked to true
<label for="1">
<input type="radio" name="num" id="1" value="1" onclick="handleClick(this);" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" onclick="handleClick(this);" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" onclick="handleClick(this);" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" onclick="handleClick(this);" >4
</label>
<script type="text/javascript">
function handleClick(radio) {
localStorage.setItem('numRadio', radio.value)
}
(function() {
const radioValue = localStorage.getItem('numRadio')
if(radioValue) {
const targetRadio = document.getElementById(radioValue)
targetRadio.checked = true
}
})()
</script>
i am using a single html5 required attribute for group of radio buttons as this
<td>
<label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" required value="english" />
<label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" value="arabic" />
</td>
but its not working as per the expectaions
i am not able to submit the result until i select english i.e even when i select arabic "the reqired field message is prompted on english"
You need to add a name attribute for your Radio Button Group:
<input type="radio" ng-model="Customer.language" id="input1" value="english" name="language" required />
<input type="radio" ng-model="Customer.language" id="input2" value="arabic" name="language" required />
Note: i added the Required Statement for the second input as well.
I see some "ng-" in your component, so i think you use AngularJS.
So, you can try this one for your required :
<td>
<label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" ng-required="!Customer.language" value="english" />
<label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" ng-required="!Customer.language" value="arabic" />
And name is not needed ;)
With that, your field will be required only if no value is selected ;)
I have been fumbling around with this problem for an hour now and I can't figure out why this strange behaviour in Radiobuttons occurs. The following is my code:
<label>Language
<input type="radio" id="de" value="de" onclick="switchRadioButtons(this);" >de
<input type="radio" id="en" value="en" onclick="switchRadioButtons(this);" >en
<input type="radio" id="other" value="other" onclick="switchRadioButtons(this);" >other
<input type="text" id="language" value="" /><br />
</label>
<script>
function switchRadioButtons(element) {
console.log(element.value);
</script>
So, in my opinion, whenever I click on either the value or the button itself, the value of the radiobutton should be written to the console. This works correctly for the button itself, but if I click on the label/description besides the button, it will always print "de" (the first item), no matter what I did (I also tried "switchRadioButtons(document.getElementById('other'));" with no effect).
Can anyone explain to my why this happens and maybe provide a solution?
You have all of your inputs inside the same label! If you click on it, it's gonna trigger the 1st element ('de'). It doesn't know that you wanted to trigger one of the other ones.
You need to have a separate label for each element.
add a group to your input
remove label enclosing inputs
autoclose input tags xHTML thingy...
Voilà it works :
http://jsfiddle.net/techunter/Z3fU7/
HTML
<label for="de">Deutch</label>
<input type="radio" name="lang" id="de" value="de" onclick="switchRadioButtons(this);" />
<label for="en">English</label>
<input type="radio" name="lang" id="en" value="en" onclick="switchRadioButtons(this);" />
<label for="other">Other</label>
<input type="radio" name="lang" id="other" value="other" onclick="switchRadioButtons(this);" />
<input type="text" id="language" value="" />
JS
function switchRadioButtons(element) {
console.log(element.value);
}
I have 2 radio groups: email and system.
I want it to display error message when there is no radio button selected for both of them.
This means, i want it at least 1 radio button is selected from one of the radio groups.
If radio_system button with Create value is selected, i want checkboxes of system and dept are all enabled.
If radio button with Change or Terminate value is selected in email or system group, i want the remark textarea to be enabled.
I know it sounds complicated. But how can i make it works? please help...
<script type="text/javascript">
$(document).ready(function()
{
$("#form").validate(
{
rules: {
radio_email: "required",
radio_system: "required",
remark: "required",
system: "required",
dept: "required",
}
});
});
</script>
<style type="text/css">
.block { display: block; }
form.form_class label.error { display: none; }
</style>
<form id="form" name="form" class="form_class">
<input type="radio" name="radio_email" value="Create" id="radio_email_0" />New
<input type="radio" name="radio_email" value="Change" id="radio_email_1" />Change
<input type="radio" name="radio_email" value="Terminate" id="radio_email_2" />Termination
<input type="radio" name="radio_system" value="Create" id="radio_system_0" />New
<input type="radio" name="radio_system" value="Change" id="radio_system_1"/>Change
<input type="radio" name="radio_system" value="Terminate" id="radio_system_2" />Termination
<label for="radio_system" class="error">Please select under either Email or System.</label>
<textarea name="remark" id="remark" cols="79" rows="3"></textarea>
<input type="checkbox" name="system[]" value="A" id="app_0" />A
<input type="checkbox" name="system[]" value="B" id="app_0" />B
<input type="checkbox" name="system[]" value="C" id="app_0" />C
<input type="checkbox" name="dept[]" value="A" id="app_0" />A
<input type="checkbox" name="dept[]" value="B" id="app_0" />B
<input type="checkbox" name="dept[]" value="C" id="app_0" />C
<input type="submit" name="submitted_form" id="Submit" value="Submit"/>
</form>
Add onClick() handler to all the Radio buttons. Write a javascript function which will be called from onclick() method of all Radio buttons.
Access the javascript id of all the other elements that you have on GUI and then you can decide what action to take. Hope am clear enough to you.
I am trying to get all class call Position $(".Position") and get then find the value that == 4 and then show the id.
<input type="Text" id="#34" value="1" class="Position">
<input type="Text" id="#22" value="2" class="Position">
<input type="Text" id="#37" value="3" class="Position">
<input type="Text" id="#41" value="4" class="Position">
Thanks
Use the Attribute Equals Selector
alert($("input.Position[value='4']").attr("id"));
First, you have to take off the '#' from your id's.
<input type="Text" id="34" value="1" class="Position">
Then you can find the input you are looking for with the following selector:
$('input.Position[value=4]').attr('id')