Controlling Inputfields with radio buttons in AngularJS - javascript

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" />

Related

required on radio buttons

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 ;)

Javascript if radio button selected, additional input required

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>

Change value of textbox based on radio box selection

I am trying to change the value of a textbox based on the selection a group of 4 radio buttons. This is not the actual html code, but a simplified version:
<input type="radio" name="radiogroup" id="radiogroup" value="5" />
<input type="radio" name="radiogroup" id="radiogroup" value="10" />
<input type="radio" name="radiogroup" id="radiogroup" value="15" />
<input type="radio" name="radiogroup" id="radiogroup" value="20" />
<input type="text" name="amount" id="amount" />
So what I am trying to do is fill the textbox named "amount" with either 5, 10, 15 or 20 based on which radio button is selected.
I am new to jquery and everything I tried did not work.
Thank you in advance for any help.
cdr6545
You can easily do this by adding class.
Working Fiddle
HTML:
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="20" />
<input type="text" name="amount" id="amount" />
JS:
$('.radiogroup').change(function(e){
var selectedValue = $(this).val();
$('#amount').val(selectedValue)
});
ID's are unique, and an ID can only be used on one element in the current document, so change it to classes.
Then attach a change event handler to the radios, get the checked one, and set the value of the text input to the checked radios value
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
Something like:
$('input[name="radiogroup"]').click(function()
{
$('#amount').val($(this).val())
})

Recording user preferences and writing them to a database

I need to record user preferences on a range of five projects by having them select from one of five radio buttons (5 for each project) which will be marked as 'first choice', 'second choice', etc... but I don't know how to go about recording this on the server (node.js express).
In case I'm not making myself clear, in an ideal world I'd have something like...
//Student Project Preferences
app.get('/api/studentPrefs', function (req, res) {
console.log("Route API/studentPrefs");
console.log(req.query.name);
var project_1 = req.query.project_1,
project_2 = req.query.project_2,
project_3 = req.query.project_3,
project_4 = req.query.project_4,
project_5 = req.query.project_5;
SUPER-pseudo-code...
----------
if(project_1 || project_2 || project_3 || project_4 || project_5 == 'choice_1') {
INSERT INTO db (choice_1) VALUES (relevant topic)
}
else if(project_1 || project_2 || project_3 || project_4 || project_5 == 'choice_2') {
....etc
}
});
<fieldset>
<legend> Please choose your prefered project </legend>
<form id="studentPrefsForm" action="api/studentPrefs" method="get">
<label for="projectChoice_1">Project Choice 1</label>
<input type="radio" name="project_1" value="choice_1" />
<input type="radio" name="project_1" value="choice_2" />
<input type="radio" name="project_1" value="choice_3" />
<input type="radio" name="project_1" value="choice_4" />
<input type="radio" name="project_1" value="choice_5" />
<br />
<label for="projectChoice_2">Project Choice 2</label>
<input type="radio" name="project_2" value="choice_1" />
<input type="radio" name="project_2" value="choice_2" />
<input type="radio" name="project_2" value="choice_3" />
<input type="radio" name="project_2" value="choice_4" />
<input type="radio" name="project_2" value="choice_5" />
<br />
<label for="projectChoice_3">Project Choice 3</label>
<input type="radio" name="project_3" value="choice_1" />
<input type="radio" name="project_3" value="choice_2" />
<input type="radio" name="project_3" value="choice_3" />
<input type="radio" name="project_3" value="choice_4" />
<input type="radio" name="project_3" value="choice_5" />
<br />
<label for="projectChoice_4">Project Choice 4</label>
<input type="radio" name="project_4" value="choice_1" />
<input type="radio" name="project_4" value="choice_2" />
<input type="radio" name="project_4" value="choice_3" />
<input type="radio" name="project_4" value="choice_4" />
<input type="radio" name="project_4" value="choice_5" />
<br />
<label for="projectChoice_5">Project Choice 5</label>
<input type="radio" name="project_5" value="choice_1" />
<input type="radio" name="project_5" value="choice_2" />
<input type="radio" name="project_5" value="choice_3" />
<input type="radio" name="project_5" value="choice_4" />
<input type="radio" name="project_5" value="choice_5" />
<br />
<br />
<input type="submit" value="Send my Choices">
</form>
</fieldset>
(Sorry if the above JS explanation is a little too pseudo, I hope it's understandable)
I know there are some issues with my 'ideal' solution, such as the IF statement not returning which project value is 'choice_1/2/3/4/5' so that I can write the project name into the relevant choice_x column in the db, but at this point I'll take anything.
As previously mentioned, I am a first year student so if you can see a better way of doing this, I am very much open to suggestions or critisism, and thanks again.
Even though your JS code could be optimized it will do fine.
What you wrote is the client-side of the page. Depending on the platform/language you are using you need to pass these values to the server-side where the saving will happen.
Let us know what language you are using on the server side - php, .NET, etc.

How to check if all input (text, email, number and radio) of a div are checked?

Looking for a way to enable the submit button of a form when all its inputs are checked/not empty.
I have stumbled upon snippets in both google and other SO questions, where a similar thing is done, but always only for the same type of input, not considering different kinds as it's the case here. Any ideas how to do this?
Below, an example of where I would use such snippet and its link to http://jsfiddle.net/bRKuV/.
P.S Looking for a solution other than the required HTML5 attribute.
EDIT: grouped radios with name attr.
<div id="first">
<form>
<label>Name</label>
<input type="text">
<label>Email</label>
<input type="email">
<label>Age</label>
<input type="number" maxlength="2">
<label>Gender</label>
<input type="radio" name="gender" value="m">Male</input>
<input type="radio" name="gender" value="f">Female</input>
<input type="submit" disabled>
</form>
</div>
<div id="second">
<form>
<label>Question 1</label>
<input type="radio" name="q1" value="y">Yes</input>
<input type="radio" name="q1" value="n">No</input>
<label>Question 2</label>
<input type="radio" name="q2" value="y">Yes</input>
<input type="radio" name="q2" value="n">No</input>
<input type="submit" disabled>
</form>
</div>
Hmm, nothing simpler than this:
$("form").on("change", function() {
$("input").each(function() {
var test = {radio:1, checkbox:1}[this.type] ? $(this).is(":checked") : !!this.value;
if(this.type !== "submit") console.log(test);
});
});
http://jsfiddle.net/bRKuV/3/

Categories