This has been bugging me for a while now. I'm trying to prevent users from clicking on a radio button depending if the user has the access to do so. The first solution was to do the following:
Without disabled
<input type="radio" name="my_radio1" id="abc1" value="5">
<input type="radio" name="my_radio1" id="abc2" value="0">
<input type="radio" name="my_radio1" id="abc3" value="1" checked>
With disabled with pre-selection
<input type="radio" name="my_radio2" id="abc1" onclick="return false;" value="5">
<input type="radio" name="my_radio2" id="abc2" onclick="return false;" value="0">
<input type="radio" name="my_radio2" id="abc3" onclick="return false;" value="1" checked>
With disabled and no pre-selection
<input type="radio" name="my_radio3" id="abc1" onclick="return false;" value="5">
<input type="radio" name="my_radio3" id="abc2" onclick="return false;" value="0">
<input type="radio" name="my_radio3" id="abc3" onclick="return false;" value="1">
As shown here: http://jsfiddle.net/93CqR/6/
This works great for radio buttons ALREADY checked but doesn't work for boxes that haven't been checked (as shown in example 3 above). Are there any known workarounds to this?
Chrome and IE behave differently with this
You should add a 'disabled' attribute to the ones not selectable. You don't really need the javascript.
see http://jsfiddle.net/Ma6TA/
<input type="radio" name="my_radio2" id="abc1" value="5" disabled>
<input type="radio" name="my_radio2" id="abc2" value="0" disabled>
<input type="radio" name="my_radio2" id="abc3" value="1" checked disabled>
Update I don't know the actual use case here, but if you aren't already, the actual check for this should be done on the server. Disabling or hiding the input from the user with javascript will enhance the UX, but a nefarious user could get around these things.
I would use javascript to show/hide the elements that users have access to. For 2 reasons.
1) It's a better user experience if they can only see the form elements they can manipulate.
and more importantly
2) a disabled form field WILL NOT show up in the post/get array. I've had issues with this in the past and it is a very frustrating problem if you don't know why you're fields aren't coming through.
it could be as simple as wrapping js code in a php conditional ie...
<?php if($userCantSeeThese): ?>
<script>
$('.classOfElementsUserShouldntSee').hide();
</script>
<?php endif; ?>
Related
Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !
Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !
im making a website for this company and they have to go through this to make deliveries, for some reason my submit button won't work, sorry im new.
the code i pasted is in 2 different section, the script is on the top while the div class is on the body section.
Tried searching the web but cant seem to find a solution.
</script>
<div class="4u12u$(large)">
<input type="checkbox" id="hygiene" name="hygiene"><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety"><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan"><label for="pan">Pan/Wheel Chuck</label>
</div>
I want to do something like "Check all of this before proceeding" thingy.
You are missing the basics, ive chosen to GET the form here as it applies to the url
<form action="#" method="get">
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked="checked">
<input type="submit" value="submit">
</form>
You can learn about html (and other languages) over at https://www.w3schools.com/ they have some good resources to start from.
try this way
<div class="4u12u$(large)">
<form action="your url" method="post">
<input type="checkbox" id="hygiene" name="hygiene" required><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety" required><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan" required><label for="pan">Pan/Wheel Chuck</label>
</form>
</div>
I have a Questionnaire form which is break down in steps by using JQuery steps plugin. In the process of form submission there is a certain point where i need to remove steps. When i use "destroy" JQuery steps method, the values filled in the form are lost.
For example:
<form>
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
</form>
I am using following steps:
Convert form into Jquery steps
Opening this form in Simple modal dialog.
User fill this form and close modal dialog.
I am using "destroy" jQuery steps method after closing dialog.
When user re-open simple modal dialog again then i am converting this form into JQuery steps. At that point user see that all filled values in the form are lost.
The problem is at the 4th step. User have filled form at 3rd step. When i converted in back to original HTML, values given by user are lost.
Expected values at 4th step
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="Ishwar Lal" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" selected='selected' />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
but output is:
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
I need to remove JQuery steps from from with filled values. I have read JQuery documentation but not found any idea about this.
I think that you must to store data before you destroy the component. When you destroy a component it is destroyed, nothing else what to do.
If you store the data , then destroy object, and then initialize object with the data you stored. You can store in an array/object/variable, or you can store in sessionStorage / localStorage for use in other pages.
I have a form that has Two radio button and a text box that sends information to the database. Text box is initially disabled. When I click Yes it enables the text box and user can input into the text box. When I click no it disables the text box and uploads a pre determined value via hidden input.
Problem: When I click on yes it the text box is still disabled. Not sure what I am doing wrong
HTML code:
<input type="radio" name="TermLease" value="No" onclick="TermLeaseMonths.disabled=true"/>No
<input type="radio" name="TermLease" value="Yes" onclick="TermLeaseMonths.disabled=false"/>Yes |
How many months:<input type="hidden" name="TermLeaseMonths" value="0" />
<input type="text" name="TermLeaseMonths" id="TermLeaseMonths" size="1" disabled="disabled"/>
Tested in Safari. Works Fine:
<input type="radio" name="TermLease" value="No" onclick="TermLeaseMonths.disabled=true" />No
<input type="radio" name="TermLease" value="Yes" onclick="TermLeaseMonths.disabled=false" />Yes | How many months:
<input type="hidden" name="TermLeaseMonths" value="0" />
<input type="text" name="TermLeaseMonths" id="TermLeaseMonths" size="1" disabled="disabled" />
http://jsfiddle.net/justmake/wKFAy/
I'm making a phone gap query mobile iOS app for course evaluation at my uni. This app primary function will be a form that in it's original form uses radio buttons where each value also has a corresponding id - e.g.
<input name="q10" id="1" value="1" type="radio" />
<input name="q10" id="2" value="2" type="radio" />
<input name="q10" id="3" value="3" type="radio" />
<input name="q10" id="4" value="4" type="radio" />
<input name="q10" id="5" value="5" type="radio" />
<input name="q10" id="6" value="6" type="radio" />
But radio buttions aren't that intuitive on iOS devices so I'm using input type range instead.
This works great for changing the value between 1 and 6 but the problem is that one only specifies one id for the whole input, not one id per value.
<input type="range" name="q10" id="q10" value="0" min="0" max="6" />
Is there a way to change the id with the value? I think this should be doable through JavaScript but I lack the know-how. I also cannot change the way the database is set up (requiring both id and value) as this database belongs to the university's IT-department.
You can use the change event
<input type="range" onchange="this.id=this.value" name="q10" id="q10" value="0" min="0" max="6" />
Working example here - http://jsfiddle.net/aVHm8/
Note: I always feel uneasy about changing the ID of a DOM element .. perhaps you should investigate better options to resolve your issue
The database can't know what the id is unless you use JavaScript to send it to the server (standard form submission sends the name and the value). In which case find the bit of JS that pulls out the ID and just send the value twice instead.