I'm trying to modify the following code so the input element idEcho prints the value of the radio button being clicked, and instead of the current label display, i want to show W1, W2, W3 and W4 correspondingly.
and i want the values returned by the clicked radio buttons to be N1, N2, N3 and N4.
<body>
<label ng‐repeat="w in radioDetails">
{{w.what}}:
<input type="radio" ng‐model="$parent.mSelection" value={{w.what}}><br>
</label>
<input id="idEcho" type="text">
<script>
myModule=angular.module("appEX",[]);
myModule.controller("ctrl", function($scope){
$scope.mSelection="a1";
$scope.radioDetails=[
{what:"a1",yes:"W1",no:"N1"},
{what:"a2",yes:"W2",no:"N2"},
{what:"a3",yes:"W3",no:"N3"},
{what:"a4",yes:"W4",no:"N4"}
];
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
all that assuming proper angular js setup
thanks
<label ng‐repeat="w in radioDetails">
{{w.yes}}:
<input type="radio" ng‐model="$parent.mSelection" value={{w.no}}><br>
</label>
<input id="idEcho" type="text" ng‐model="$parent.mSelection">
Related
I am wanting to create the following using CSS, HTML and JavaScript
Course1 //dropdown selection//
....
Course2 //dropdown selection//
.....
WINNER
(RADIO checked for Course1) OR (RADIO clicked for Course2)
//automatically populated from either Course1 or Course2 depending on Radio checked//
but my dropdown selection and radio selection hamper each other.
When I have the name from the radio the same "winnerselected" the radio works, but the copying from the course1 or course2 doesn't work.
Maybe someone has created code like this somewhere else and knows how to get around it?
Any assistance will be appreciate.
code as follows:
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
Course 1
<input id="myInput" type="text" name="golfcoursename1" placeholder="Golf
Course">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
Course 2
<input id="myInput1" type="text" name="golfcoursename2" placeholder="Golf
Course">
</div>
<p>
WINNER
<p>
<input type="radio" id="Course1" name="winnerselected" value="Course1"
onclick="FillWinner(this.form)">
<label for="Course1">Course 1</label>
<input type="radio" id="Course2" name="winnerselected" value="Course2"
onclick="FillWinner2(this.form)">
<label for="Course2">Course 2</label><br>
<input type="text" id="winner" name="Winner" placeholder="Winner">
<p>
</p>
<input type="submit">
</form>
<script>
function FillWinner(f) {
if(f.winnerselected.checked == true) {
f.winner.value = f.golfcoursename1.value;
if(f.winnerselected.checked == true)
f.winner.value = f.golfcoursename2.value;
}}
</script>
First, your HTML is not valid as you have a second form, with no closing tag, nested in the first one. Also, while is is legal to not close a p element, you really should for clarity sake.
Next, remove inline styles and inline JavaScript from your HTML. It just clutters up the code, causes redundancy, and is harder to read and maintain. Instead break your work into HTML, CSS, and JavaScript sections.
It's not clear what you exactly want, but my guess is that whichever radio button is clicked should dictate which textbox value becomes the winner. Based on that, see the comments inline below for a description of how the code works.
.autocomplete { width:300px; }
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="courses">
<div class="autocomplete">
Course 1 <input id="myInput" name="golfcoursename1" placeholder="Golf Course">
</div>
<div class="autocomplete">
Course 2 <input id="myInput1" name="golfcoursename2" placeholder="Golf Course">
</div>
</div>
<p>WINNER</p>
<p id="radioContainer">
<input type="radio" id="Course1" name="winnerselected" value="Course1">
<label for="Course1">Course 1</label>
<input type="radio" id="Course2" name="winnerselected" value="Course2">
<label for="Course2">Course 2</label><br>
<input type="text" id="winner" name="Winner" placeholder="Winner">
</p>
<input type="submit">
</form>
<script>
// Don't use inline HTML event attributes like onclick.
// Separate your JavaScript from your HTML
// Get references to the element(s) you'll need to work with
// Get all the elements that have a name attribute that starts with "golfcoursename"
const courseNames = document.querySelectorAll("[name^='golfcoursename']");
// Get all the elements that have a name attribute that is exactly "winnerselected"
const radioButtons = document.querySelectorAll("[name='winnerselected']");
const winner = document.getElementById("winner");
// Here's how to set up events in JS
const radCont = document.getElementById("radioContainer").addEventListener("click", fillWinner);
function fillWinner(event) {
// Look at the radiobuttons collection and get the index of the selected radio button from it.
const indexOfTextbox = Array.from(radioButtons).indexOf(event.target);
// Set the value of the winner textbox to textbox with the same index as the clicked radio button
winner.value = courseNames[indexOfTextbox].value;
}
</script>
I am currently doing a project. I have 2 radio button,1) One way 2) Round trip. When the user tried to select the One way radio button, the return text field will hide.
I've saw a thread and someone comment regarding to this problem. Scenario: I chose the One way radio button, the return field will disappear, yes it is working but there's some problem. What if I change my mind, from one way radio button to Round trip? The problem is the return field didn't came back
**View **
// my radio button
<div class="pure-u-1-1 radiobtn">
<form action="">
<input type="radio" name="flight_type" value="one_way" class="onew" style="" >One Way
<input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
</form>
</div>
// the return field that will hide/show
<div class="pure-u-1-1 dr" id="try">
<label for="return" class="drr">Return</label>
<input type="text" id="return" name="return" class="departreturn"><br>
</div>
JS
<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function(){
$('div[id^="try"]').hide(); // hide all DIVs begining with "my_radio_"
$('#' + $(this).attr('id') + '_text').show(); // show the current one
});
</script>
Just use .toggle()
.toggle()
Description: Display or hide the matched elements.
With no parameters, the .toggle() method simply toggles the visibility of elements:
REF: http://api.jquery.com/toggle/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pure-u-1-1 radiobtn">
<form action="">
<input type="radio" name="flight_type" value="one_way" class="onew" style="">One Way
<input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
</form>
</div>
<div class="pure-u-1-1 dr" id="try">
<label for="return" class="drr">Return</label>
<input type="text" id="return" name="return" class="departreturn"><br>
</div>
<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function() {
$('div[id^="try"]').toggle(); // toggle all DIVs begining with "my_radio_"
$('#' + $(this).attr('id') + '_text').show(); // show the current one
});
</script>
I know this is probably very easy! I have two radio buttons that ng-show a div with an input field if the 'site' radio button has been selected. The text input field is set to a ng-model called 'sitePostcode'. What I am trying to achieve is that if the 'solution' radio button is selected then 'sitePostcode' model will have 'solution' in it. And if the 'site' radio button is selected, then 'sitePostcode' will contain what ever was entered into the input box.
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
I thought that the radio buttons should also be 'sitePostcode' model, but when I tried that and entered text into the input field the div would dissapear as the model value changes from 'site'. Cheers
You can watch changes of product.group and change sitePostcode in accordance to it.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body data-ng-app="app" data-ng-controller="MainController">
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
<script>
var app = angular.module('app', []);
app.controller("MainController", function($scope) {
var customPostcode = '';
$scope.$watch('product.group', function (newVal, oldVal) {
if (newVal === 'Solution') {
customPostcode = $scope.sitePostcode;
$scope.sitePostcode = 'Solution';
} else {
$scope.sitePostcode = customPostcode;
}
});
});
</script>
</body>
</html>
The radio buttons should belong to a group. Add 'name' attribute to the input fields and give them the same value.
<input name="group1" type="radio" ng-model="product.group" value="Solution">Solution
<input name="group1" type="radio" ng-model="product.group" value="Site">Site
Radio buttons can be tricky in Angularjs. Here is a great example of how they can work: http://jsfiddle.net/K9MLk/246/.
I think that the best way to do this is to check the product.group value in the controller and set the sitePostcode to Solution.
Another way to do this is as you suggested. You can set the ng-model of your radio buttons to sitePostcode and change your check to ng-show="product.group != 'Solution'". This is assuming that the user will not type Solution in the input field.
<div>
<input type="radio" ng-model="sitePostcode" value="Solution">Solution
<input type="radio" ng-model="sitePostcode" value="Site">Site
</div>
<div ng-show="product.group != 'Solution'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
But as I said it is best to do this in the controller.
I use the following code for my radio button and date field
<input type="radio" name="datefilter" value="all" checked>All sessions<br>
<input type="radio" name="datefilter" value="after" >
Changes take effect on:
<input type="text" name="date_filter" value="<? echo date('m-d-Y'); ?>">
When the user clicks on the text field, I would like the radio button with the value "after" to be selected, in case the forget to enter the value. I am a php hack, but don't know javascript much at all. If it will make it easier I can definitely add to the radio fields.
There is already a javascript function running that calls a date picking calendar popup when the user selects the text field. Don't imagine that will
Thanks!
Add some jQuery to it like this:
Example page on JSFiddle
Code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">
<script type="text/javascript">
$(document).ready(function () {
$('#date_filter').click(function () {
$("#after").attr('checked', true);
});
});
</script>
</head>
<body>
<input type="radio" name="datefilter" value="all" checked>All sessions<br>
<input type="radio" id="after" name="datefilter" value="after">
Changes take effect on:
<input type="text" id="date_filter" name="date_filter" value="2013-01-01">
</body>
</html>
<script type="text/javascript">
(function () {
var ButtonGroup = YAHOO.widget.ButtonGroup;
var onCheckedButtonChange = function (p_oEvent) {
};
YAHOO.util.Event.onContentReady("mediaFilterButtonsFieldset", function () {
var oButtonGroup = new ButtonGroup("mediaFilterButtons");
oButtonGroup.on("checkedButtonChange", onCheckedButtonChange);
});
}());
</script>
<div id="resultInfo">
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="mediaFilterButtonsFieldset">
<div id="mediaFilterButtons" class="yui-buttongroup ie7filter" style="z-index:11;">
<div id="mediaFilterLabel">Go to</div>
<input id="radio1" class="filter_but" type="radio" name="0" value="First" checked rel="0" >
<input id="radio2" class="filter_but" type="radio" name="2" value="Second" rel="2">
<input id="radio3" class="filter_but" type="radio" name="1" value="Third" rel="1">
</div>
</fieldset>
</form>
</div>
These are my YUI buttons. They're just 3 radio buttons turned into "buttons"--literally. My question is this:
After people click the third button, I cannot manually check the first button anymore. How can I manually check "radio1"?
Edit:
According to the official YUI website, there is a method called "set". But I don't know how to use that in this buttonGroup.
The radio buttons must all have the same name attribute in order for them to be grouped together.
Answering your question with the set method. Perhaps this does the trick:
YAHOO.one("#radio1").set("checked",true);
To manually check the radio buttons, it's necessary to have the same name of radio button. Put the same name of radio button and get your result.