How can I use radio buttons to change the name of the text area tag below. Im trying to allow users to choose if they want to enter in an item_id or a upc, and based on this selection, the param for the text area should change.
What I have so far:
<label for="item_ids">Item Ids</label>
<input type="radio" name="=type_radio" id="item_ids" value="<%=params['item_ids']%>">
<label for="upcs">Upc Numbers </label>
<input type="radio" name="type_radio" id="upcs" value="<%=params['upcs']%>">
<textarea rows="3" type="text" name="<either item_ids OR upcs" class="text ui-widget-content ui-corner-all" placeholder="separated by space or comma"><%=params['item_ids_upcs']%></textarea>
Try this:
$(function() {
$('input[type="radio"]').click(function() {
$('textarea').attr('name', $(this).attr('id'));
});
});
Related
first post.. graphics person becoming a coder here. (Coding is more fun, but harder!)
2 radio groups each with 2 buttons. I have got it working where if either #client or #agent is selected from Radio 1, and #companyClient is selected from radio 2, the result is the text fields beneath the radio groups stay Readonly except #companyName. I also have it working where if #agent is selected from Radio 1, and #individualClient is selected from radio 2, the result is the text fields beneath the radio groups become editable to collect input except #companyName which stays Readonly.
What I need though is if #client is selected from Radio 1, and #individualClient is selected from radio 2, the text fields beneath the radio groups (except #companyName) stay Readonly; currently they are editable which I don't want. And I need to copy the text field values from #firstnameContact, #lastnameContact, and titleContact to them (ie to firstnameClient, lastnameClient and titleClient).
Thanks
JS
$(function(){
$("#companyClient, #individualClient").change(function(){
$("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").attr("readonly",true);
if($("#individualClient").is(":checked")){
$("#firstnameClient, #lastnameClient, #titleClient").removeAttr("readonly");
$("#companyName").attr("readonly");
$("#firstnameClient").focus();
}
else if($("#companyClient").is(":checked")){
$("#companyName").removeAttr("readonly");
$("#companyName").focus();
}
});
});
HTML
<label for="firstnameContact">First Name</label>
<input type="text" name="firstnameContact" id="firstnameContact" />
<label for="lastnameContact">Last Name</label>
<input type="text" name="lastnameContact" id="lastnameContact" />
<label for="titleContact">Title</label></div>
<input type="text" name="titleContact" id="titleContact" />
<!--Radio 1 -->
<label>Your Status</label>
<input type="radio" name="yourStatus" id="client" value="client" checked />
<label for="client">I am the Client</label>
<input type="radio" name="yourStatus" id="agent" value="agent" />
<label for="agent">I am an Agent</label></div>
<!--Radio 2 -->
<label>select one:</label>
<input type="radio" name="clientType" id="companyClient" value="companyClient" />
<label for="companyClient">Company</label>
<input type="radio" name="clientType" id="individualClient" value="individualClient" />
<label for="individualClient">Individual</label>
<label for="companyName">Company Name</label>
<input type="text" name="companyName" id="companyName" readonly />
<label for="firstnameClient">First Name</label></div>
<input type="text" name="firstnameClient" id="firstnameClient" readonly />
<label for="lastnameClient">Last Name</label>
<input type="text" name="lastnameClient" id="lastnameClient" readonly />
<label for="titleClient">Title</label></div>
<input type="text" name="titleClient" id="titleClient" readonly />
Just added a form around all elements and made the change on it, seems to works.
See this fiddle
$(function(){
$("form").change(function(){
$("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").attr("readonly",true);
if($("#individualClient").is(":checked")){
$("#firstnameClient, #lastnameClient, #titleClient").removeAttr("readonly");
$("#companyName").attr("readonly");
$("#firstnameClient").focus();
}
else if($("#companyClient").is(":checked")){
$("#companyName").removeAttr("readonly");
$("#companyName").focus();
}
});
});
EDIT
Or you can use disabled to make it more clear for users.
See this fiddle
$(function(){
$("form").change(function(){
$("#firstnameClient, #lastnameClient, #titleClient, #companyName").val("").prop("disabled",true);
if($("#individualClient").is(":checked")){
$("#firstnameClient, #lastnameClient, #titleClient").removeProp("disabled");
$("#companyName").prop("disabled",true);
$("#firstnameClient").focus();
}
else if($("#companyClient").is(":checked")){
$("#companyName").removeProp("disabled");
$("#companyName").focus();
}
});
});
Of course, you can add a PHP validation and test of all fields to make it safier and better.
I need a four radio button. First iteration generates 2 radio button & second iteration generates 2 radio button. If i select one of the Radio button in first section , then one of the radio button in second selection is also selected. I want two section containing 2 radio button each which dont reflect the changes on each other. Any help pls
<div ng-controller="MainCtrl" >
<div data-ng-repeat="choic in choice" >
<form >
<input ng-model="parent.mustShow" class="label_align" type="radio" name="customer" value="no" ><div class="mediumSubhead"> Information housed </div><br/>
<input ng-model="parent.mustShow" class="label_align" type="radio" name="customer" value="yes" >
<div class="mediumSubhead"> Information housed outside </div></form>
</div>
</div>
Controller.js
var app = angular.module('EquityCompensation', []);
app.controller('MainCtrl', function($scope) {
$scope.choice = [{id: 'choic1'},{id: 'choic2'}];
});
I'd suggest you to put the mustShow variable inside the choice array. So that would help you make the track of the each element. That will make your ng-model declaration to ng-model="choic.mustShow"
And to show the outer input element you could use filter over there that will check that any of the choice has mustShow option is ticked then you show the input element.
Markup
<div data-ng-repeat="choic in choice">
<form>
<input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="no">
<div class="mediumSubhead"> Information housed </div>
<br/>
<input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="yes">
<div class="mediumSubhead"> Information housed outside </div>
</form>
</div>
<div ng-show="(choice | filter: {mustShow: 'yes'}).length > 0">
<input name="first_name" class="text_box_space" type="text" value="" style="color: black;" size="25" width="200px">
</div>
Demo Plunkr
I tried to design a form, which is now to complicated for me to describe so I created a fiddle: http://jsfiddle.net/tLh72acj/
I think this shows my problem: I can't access the radio-input:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="bestellart" value="vor" id="vor" checked />
<label for="vor">CAN'T</label>
<input type="radio" name="bestellart" value="eil" id="eil" />
<label for="eil">TOUCH</label>
<input type="radio" name="bestellart" value="ewg" id="ewg" />
<label for="ewg">THIS!</label>
</fieldset>
I want to control the radio buttons when I click on them, but if I click on any other place inside the collapsible I want it to open (but not if I use the radio buttons). How do I have to handle this?
Is that what you want ?
JsFiddle
if ($(this).closest(".ui-collapsible").hasClass('ui-collapsible-collapsed')){
$(this).closest(".ui-collapsible").collapsible({collapsed: false});
}
else{
$(this).closest(".ui-collapsible").collapsible({collapsed: true});
}
Here is an update with comments : JsFiddle
How would i add the "value" that are selected from radio boxes in html forms? So when someone selects an option it would add the other "values" onto it and total that it at the bottom of the page. And does anyone know if it could add "names" total "values" onto it as well? thanks
My code looks like this:
<h3><u>Title</u></h3><br>
<form action="">
<input type="radio" name="num" value="0">Text<br>
<input type="radio" name="num" value="2">Text<br>
<input type="radio" name="num" value="80">Text<br>
<input type="radio" name="num" value="110">Text<br>
<input type="radio" name="num" value="85">Text<br>
<input type="radio" name="num" value="120">Text<br>
</form>
You cannot. By definition, a set of radio buttons with the same name attribute contributes at most one value to the data set, the one corresponding to the selected button.
If you want something else, you should handle that server side, or use other types of controls, or redesign the entire approach.
Working example :
(using a Javascript library, jQuery, but could be done in plain JavaScript)
You mainly have to change your inputs to type="checkbox" in the HTML
What code does : when a checkbox's state is modified, all checked checkboxes' value are summed up in the last input field I've added
The checkboxes are targetted by looking for "num" in their name, if you remove that the checkbox won't be taken into account by the script.
$(function() {
$("input[name*='num']").on("change", function() {
var total = 0;
$("input[type='checkbox']:checked").each(function() {
total += Number($(this).val());
});
$("#total").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
<u>Title</u>
</h3>
<br>
<form action="">
<input type="checkbox" name="num0" value="0">Add 0<br>
<input type="checkbox" name="num2" value="2">Add 2<br>
<input type="checkbox" name="num80" value="80">Add 80<br>
<input type="checkbox" name="num110" value="110">Add 110<br>
<input type="checkbox" name="num85" value="85">Add 85<br>
<input type="checkbox" name="numwhateveryoulike" value="120">Add 120<br>
Total <input type="text" value="0" id="total">
</form>
I am trying to associate a radio input with a specified text input. As you can see in the picture, there are two options. I know I can use for="" to associate the label to the radio input, but how can I also associate it to the text input underneath, and vise versa so when I focus on the text input, if focuses the correct radio button?
NOTE: The amount entered will be inserted into the database, so that's the most important part of this form. Currently if I click on $Off, I can still enter a number in %Off. I don't want this to happen, so the user does not get confused.
My markup:
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
<script type="text/javascript">
$(function (){
$("form input[type=radio]").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest("form").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
</script>
You can't use a single <label> element to label two separate inputs. I would suggest associating the labels to the radio buttons, since the radio button is such a small click target and the label expands that target.
Choose one of the radios to be selected by default, perhaps "$ Off". Disable the other text field by default:
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
Then use jQuery to do something like this:
$(function (){
$("#discount-dollars, #discount-percent").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest(".control-group").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
Basically, this listens for click events on both radio buttons. When you click one radio, it enables its associated text field (i.e., the text field with a CSS class name matching the value of the radio button) and disables the other text field. That way, you can't enter text into either text field unless its associated radio button is checked.
use image radio button with 2 states, selected and not selected, when you click the radio image just set focus to the textbox and swap to your selected radio image, and vice versa.
You cannot focus on two elements, it will be either the input text field or the radio button.
But you should use JavaScript or jQuery, when you click on the radio button to focus on the field below, or when you enter value in the field below to check the radio button above.
This can help you if you want to use jquery : http://api.jquery.com/val/ and http://api.jquery.com/focus/
This is a VERY rough sketch to help you out, but you could do something like this (giving you follow a certain naming convention):
<input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/> <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/>
<br />
<input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/> <input type="text" name="textPctOff" id="textPctOff" onclick="changeMe(this);"/>
<script>
function changeMe(inField) {
var fieldId = inField.id;
var type = fieldId.substring(0, 4);
if(type == 'text') {
var name = fieldId.substring(4);
var radioButton = document.getElementById("radio" + name);
radioButton.checked = true;
}else {
var name = fieldId.substring(5);
var textField = document.getElementById("text" + name);
textField.focus();
}
}
</script>
jQuery is what you want. Assuming your elements had IDs as follows:
$ radio button: money-radio
$ text box: money-text
% radio button: percent-radio
% text box: percent-text
...the code might look something like this. This will take care of disabling text boxes and focusing input properly.
<form>
<table>
<tr>
<td>
<input type="radio" id="money-radio" name="unit" value="money" />
<label for="money-radio">$ Off</label>
</td>
<td>
<input type="radio" id="percent-radio" name="unit" value="percent" />
<label for="percent-radio">% Off</label>
</td>
</tr>
<tr>
<td>
<input type="text" id="money-text" name="money-off" />
</td>
<td>
<input type="text" id="percent-text" name="percent-off" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
$(function() {
$('#percent-radio, #money-radio').change(function() {
if ($('#percent-radio').val() == true) {
$('#percent-text').removeAttr('disabled').focus();
} else {
$('#percent-text').attr('disabled', 'disabled');
}
if ($('#money-radio').val() == true) {
$('#money-text').removeAttr('disabled').focus();
} else {
$('#money-text').attr('disabled', 'disabled');
}
}).change();
});
</script>