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 ;)
Related
I am very new to javascript and I can't set the text next to the Radio button to what I want, even after trying to find everything I can online. I am sure it something simple and I would really apprecitae it if someone could help me.
Here is my HTML Element for my radio group
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
And this is the Javascript I am trying to run to test just changing one
document.getElementById('answer0id').value = 'testing123';
I know it is probably an easy fix, but I would really appreciate anyone who could help me.
The text is just a rogue text node, as the input is self-closing and can't contain any inner text, but you can target the text node coming after the input with something like nextSibling
document.getElementById('answer0id').nextSibling.textContent = ' testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
You could also modify the HTML to wrap the text in either a span, label or some other element that is more easily selectable.
document.querySelector('#answer0id ~ label').innerHTML = 'testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0" />
<label for="answer0id">answer0</label>
<br />
<input type="radio" id="answer1id" name="answers" value="answer1" />
<label for="answer1id">answer1</label>
<br />
<input type="radio" id="answer2id" name="answers" value="answer2" />
<label for="answer2id">answer2</label>
<br />
<input type="radio" id="answer3id" name="answers" value="answer3" />
<label for="answer3id">answer3</label>
</form>
I believe that label is what you are looking for.
Note: Input doesn't have innerHTML/textContent attributes since it's a non-closing tag. That's why the inventor of HTML came up with labels. What's more - you are even able to check the radio button by clicking the corresponding text.
let elem = document.querySelector('label[for="answer0id"]');
elem.textContent = 'testing123';
<form class="description" action="">
<input type="radio" id="answer0id" name="answers" value="answer0">
<label for='answer0id'>answer0</label><br />
<input type="radio" id="answer1id" name="answers" value="answer1">
<label for='answer1id'>answer1</label><br />
<input type="radio" id="answer2id" name="answers" value="answer2">
<label for='answer2id'>answer2</label><br />
<input type="radio" id="answer3id" name="answers" value="answer3">
<label for='answer3id'>answer3</label>
</form>
document.getElementById('answer0id').value= 'testing123'; refers to <input type="radio" id="answer0id" name="answers"value="answer0"> answer0<br>. Therefore, it does not change the text.
In your case, you can select the text via .nextSibling.textContent (see below). An alternative would be wrapping the text in an extra element, say <span id="answer0-label">answer0</span> and select that one directly.
document.getElementById('answer0id').nextSibling.textContent = ' testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
I'm working on a customer survey where I ask the customer if they'd like to be contacted about their experience. If they select yes, additional questions follow asking them their preferred method of contact & the info for the selected method.
HTML
<b>May we contact you about your experience?</b>
<br/>
<input type="radio" name="Contact" id="ContactYes" value="Yes" required />
<label for="ContactYes">Yes</label>
<input type="radio" name="Contact" id="ContactNo" value="No" />
<label for="ContactNo">No</label>
<br />
<br />
<b>Select your preferred method of contact:</b>
<br/>
<input type="radio" name="FormOfContact" id="Phone" value="Phone" />
<label for="Phone">Phone</label>
<input type="radio" name="FormOfContact" id="Email" value="Email" />
<label for="Email">Email</label>
Basically, what I'd like to know is how can I make 'FormOfContact' a required field ONLY when the user selects "Yes" to being contacted?
If you create an onchange event for the radio buttons, you can check whether "yes" or "no" is selected. If "yes" is selected, add the attribute "required=true" to the second field.
ELEMENT.setAttribute("required",true)
A bit of javascript could help.
See plunker here: http://embed.plnkr.co/k3yIf0gh03JBACSeV6yA/
<!DOCTYPE html>
<html>
<script>
function onChange(required) {
document.getElementById('Phone').required = required;
document.getElementById('div1').style.display = required ? 'block' : 'none';
}
</script>
<body>
<b>May we contact you about your experience?</b>
<br/>
<input type="radio" name="Contact" id="ContactYes" value="Yes" required onChange='onChange(true)'/><label for="ContactYes">Yes</label>
<input type="radio" name="Contact" id="ContactNo" value="No" onChange='onChange(false)' /><label for="ContactNo">No</label>
<br />
<br />
<div id='div1' style='display:none'>
<b>Select your preferred method of contact:</b><br/>
<input type="radio" name="FormOfContact" id="Phone" value="Phone" /><label for="Phone">Phone</label>
<input type="radio" name="FormOfContact" id="Email" value="Email" /><label for="Email">Email</label>
</div>
</body>
</html>
I have the following idea. My view contains 3 input fields and radio buttons which need to work each other.
Firstly when the view is displayed you can see the input fields only. If the user clicks on one of the input fields the other fields disabled and the radio buttons to this input fields are showing. If the user want to use an other input field of these three then he needs to click on one of the radio buttons then the other two input field will disabled.
Here is the currently code:
...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = !disabled" ng-disabled="..." />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
How can I realise that? Currently the first input field works.
Try to give a value to disabled
...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />
this can certainly work, just make sure you are using different $scope variables for each control:
<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>
While this should work here, I recommend not to put so much JS-code into the HTML, better would be to add a method on $scope like $scope.radioClicked(buttonId) and then call this method on ng-click.
Also using ng-show instead of ng-hide helps readability - no double negation.
I've changed my input fields. It is a possible solution but only I need the interaction with radio buttons and the input fields.
<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />
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 a group of radio buttons on my page:
<form ...>
<input type="radio" name="people" checked> Student
<input type="radio" name="people"> Teacher
<input type="radio" name="people"> Assistant
<!-- Here is the dynamic content, which could be check boxes or radio buttons-->
</form>
The feature I would like to implement is:
Based on the selection of the radio buttons, the content after the radio buttons will change dynamically. (The radio buttons and the content are inside a form.)
For example:
If "student" is selected, the dynamic content part is (check boxes):
<input type="checkbox" name="name" /> Name <br />
<input type="checkbox" name="Age" /> Age <br />
<input type="checkbox" name="grade" /> Grade <br />
If "Teacher" is selected, the dynamic content part is (check boxes & radio buttons):
<input type="checkbox" name="subject" /> Subject <br />
<input type="radio" name="code" checked> 111
<input type="radio" name="code"> 222
<input type="radio" name="code"> 333
If "Assistant" is selected, the dynamic content part is other check boxes.
How to implement this dynamic content change in jQuery?
What I tried
I tried to create HTML elements dynamically in Javascript, but I feel it is not a good way since I have to write HTML elements in Javascript as strings.
Try this
Working demo
Markup change
<form ...>
<input type="radio" name="people" value="student" checked> Student
<input type="radio" name="people" value="teacher"> Teacher
<input type="radio" name="people" value="assistant"> Assistant
<div class="content student">
<input type="checkbox" name="name" /> Name <br />
<input type="checkbox" name="Age" /> Age <br />
<input type="checkbox" name="grade" /> Grade <br />
</div>
<div class="content teacher" style="display:none;">
Teacher content
</div>
<div class="content assistant" style="display:none;">
Assistant content
</div>
</form>
Js
$(function(){
$("input[name=people]").click(function(){
$("div.content").not("."+this.value).hide();
$("."+this.value).show();
});
});
put all three possible elements in your static html and wrap each part with a div. Then Show and hide the divs on click
If I understand your question correctly... I would create different divs that are hidden that contain the combinations that you are looking for. Then on the onclick of the radio button I would hide divs that you don't want shown and show the divs that you are looking for.