I want to change the text of a radio button (HTML element), not an ASP.NET component.
How can I change it from ASP.NET?
Add a simple:
runat="server"
to your HTML tag and it will allow a few of the properties to be modified through code behind.
These are known as "hybrid controls."
You would need to add a runat="server" attribute to the HTML for that element.
<input type="radio" id="someRadioId" value="bleh" runat="server">
This will allow you to access the element via its ID, someRadioId. This element in your code behind will be of type HtmlInputRadioButton.
See this article on MSDN
A simple RadioButtonList, when initialized like this:
list.Items.Add(new ListItem("item 1", "1"));
list.Items.Add(new ListItem("item 2", "2"));
list.Items.Add(new ListItem("item 3", "3"));
renders to the following HTML:
<table id="list" border="0">
<tr>
<td><input id="list_0" type="radio" name="list" value="1" /><label for="list_0">item 1</label></td>
</tr><tr>
<td><input id="list_1" type="radio" name="list" value="2" /><label for="list_1">item 2</label></td>
</tr><tr>
<td><input id="list_2" type="radio" name="list" value="3" /><label for="list_2">item 3</label></td>
</tr>
</table>
So via JavaScript you can loop through the elements with the type "radio", grab their id and then look for label elements that have the id as the 'for' value. And update their innerHTML.
Related
I'm trying to get a form to output a number value based on the outcome of two fields. A value input and a radio selection but I can't seem to get it to work.
<form oninput="retVal.value=parseInt(pavVal.value)-(parseInt(pavVal.value)*parseInt(pavCAT.value))">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input type="number" id="pavVal">
</td>
</tr>
<tr>
<td>
<label for="pavCAT" ><b>CAT:</b></label>
<td>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Anyone able to tell me where I'm going wrong>
Ids must be unique -- there were three #pavCAT. When the browser is told to do anything with #pavCAT, it will find the first #pavCAT do whatever it was supposed to do then quit, leaving the other 2 #pavCATs untouched as if they never existed. The easiest solution is to suffix each id with a number.
The rest of the code should work since in this case the id #pavCAT is just as accessible as the name [name="pavCAT"].
Also, the HTML had checkmarks not radios.
The inline event handler is now streamlined:
oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)"
Note that parseInt() isn't used to convert the string values into numbers. That's because the strings are being coerced into numbers by the use of these operators: - and *.
<form id='calc' oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input id="pavVal" type="number">
</td>
</tr>
<tr>
<td>
<label for="pavCAT"><b>CAT:</b></label>
</td>
<td>
<input id="pavCAT3" name="pavCAT" type="radio" value="0.3">
<label for="pavCAT3"> N (30%)</label>
<input id="pavCAT2" name="pavCAT" type="radio" value="0.2">
<label for="pavCAT2"> S (20%)</label>
<input id="pavCAT1" name="pavCAT" type="radio" value="0.1">
<label for="pavCAT1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Your formula is working, but you assigned the same ID for the pavCat checkbox elements, thus returning NaN and not the correctly assigned value - try it yourself with removing/commenting out two ot the pavCAT elements.
imho is a checkbox the wrong UI element - go for a single select dropdown or even better a radio input.
Also parseInt should be parseFloat instead for pavCat. Anyways it's a little bit over the top in this situation and you could totally remove it in this simple example - maybe you have more context to justify parsing it.
<input type="radio" id="pavCat1" name="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="radio" id="pavCat2" name="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="radio" id="pavCat3" name="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
https://jsfiddle.net/p9v1f53w/16/
I have code in the HTML file that looks like this
<tr *ngFor="#tradeSource of tradeSources">
<td>
<label>
<input type="checkbox" ngControl="tradeSource" [(ngModel)]="tradeSource['checked']"/>
</label>
</td>
<td>{{tradeSource.blah}}</td>
<td>{{tradeSource.blah}}</td>
<td>{{tradeSource.blah}}</td>
</tr>
A user can check the check box then click a "Process" button that will run some code, after this code has run I would like to uncheck this checkbox. Ive tried code like
this.tradeSources[i]['checked'] = false
But this isnt working
The code you should rather try is:
this.tradeSources[i]['checked'] = false
Edit
I think that your problem is because you have the same name for each control of checkboxes:
<input type="checkbox" ngControl="tradeSource"
[(ngModel)]="tradeSource.checked"/>
If you remove the ngControl attribute, it works:
<input type="checkbox" [(ngModel)]="tradeSource.checked"/>
See this plunkr: https://plnkr.co/edit/FdPHpOTSySkg2gLWjo7a?p=preview.
If you really want an ngControl you could define it this way:
<tr *ngFor="#tradeSource of tradeSources;#i=index">
<td>
<label>
<input type="checkbox" [ngControl]="'trade'+i"
[(ngModel)]="tradeSource.checked"/>
</label>
</td>
(...)
</tr>
I believe the reason this is not working, and which should probably also throw an error in your console, is the usage of unbinded ngControl. It should be enough to just do:
<input type="checkbox" [(ngModel)]="tradeSource['checked']">
I've following form
<form method="post" action="getParameterValuesServlet">
<table border="1">
<tr>
<td>User Name</td>
<td><input type="text" name="userName"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
</td>
</tr>
<tr>
<td>Hobbies</td>
<td>
<input type="checkbox" name="hobbies" value="cycling">Cycling<br>
<input type="checkbox" name="hobbies" value="swimming">Swimming<br>
<input type="checkbox" name="hobbies" value="treking">Treking<br>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="city" multiple>
<option value="mysore">Mysore</option>
<option value="pune">Pune</option>
<option value="chandigarh">Chandigarh</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Register"></td>
</tr>
</table>
</form>
When I submit this form without entering or selecting any values, I see only blank userName and password (text & password) in post body (same is the case with GET query string)
Why don't radio button, check box and drop down values get submitted with default values?
One more thing, if I remove "multiple" attribute from "select" tag, the first option gets submitted.
Would be thankful, if someone explains this behavior!!
FYI, I'm using Fiddler Web Debugger tool to trace the request and response and submitting this form to a Java Servlet
What default values do you imagine would be sent?
The only values that get sent are the selected options; since no options are selected, there's nothing to send.
That's in contrast to text and password controls, which always have a value, even if that value is the empty string.
You can use a hidden field with a fallback value, if a checkbox in a form is submitted unchecked:
<input type="hidden" name="hobbies" value="">
<input type="checkbox" name="hobbies" value="swimming">Swimming<br>
This seems to work also with radio buttons:
<input type="hidden" name="gender" value="">
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
I am creating web application using JSF 2.0 where I want to set checkboxes to be selected when page loads.
<h:selectManyCheckbox value="#{UserRegistration.rightSelected}" id="myRight">
<f:selectItem itemValue="add" itemLabel="Add"/>
<f:selectItem itemValue="delete" itemLabel="Delete" />
<f:selectItem itemValue="edit" itemLabel="Edit" />
</h:selectManyCheckbox>
In this case, I want to set, Add and Delete checkbox to be selected by-default. How can I do this?
I tried with,
<body onload="myRight:0:true">
Generate HTML content is
<td><table id="myRight">
<tr>
<td>
<input name="myRight" id="myRight:0" value="add" type="checkbox" checked="checked" /> <label for="myRight:0" class=""> Add</label></td>
<td>
<input name="myRight" id="myRight:1" value="delete" type="checkbox" checked="checked" /><label for="myRight:1" class=""> Delete</label></td>
<td>
<input name="myRight" id="myRight:2" value="edit" type="checkbox" checked="checked" /><label for="myRight:2" class=""> Edit</label></td>
</tr>
however it is not working.
Please suggest me how to get this done?
if rightSelected is an array init your rightSelected as following
private String[] rightSelected= {"add","delete"};
if rightSelected is a List just do
rightSelected.add("add");
rightSelected.add("delete");
or
List<String> rightSelected = Arrays.asList("add", "delete");
I have done something like this.
<html>
<head>
<script type="text/javascript">
<!--
function toggleTB(what){
if(what.checked){document.theForm.theTB.disabled=1}
else{document.theForm.theTB.disabled=0}}
//-->
</script>
</head>
<body>
<form name="theForm">
<input type="checkbox" name="theCB" onClick="toggleTB(this)">Toggle The Text Box<br>
<input type="text" name="theTB" value="asdf">
</form>
</body>
</html>
But this is only used for one time.i need this function repeatedly in another rows also so how can i used this function for multiple times.
My form goes like this:
<tr>
<td style="border-top:none; text-decoration:underline;" >Specific operations/procedures</td>
<td>
<input type="checkbox" name="sd3[]" value="mfi_nam9" />Other(please specify):
<input type="text" name="mfi_nam9" class="text required" id="mfi_name"
</td>
</tr>
<tr>
<td style="border-top:none; text-decoration:underline;" >General principles/strategies</td>
<td>
<input type="checkbox" name="sd2[]" value="mfi_nam8" />Other(please specify):
<input type="text" name="mfi_nam8" class="text required" id="mfi_name"
</td>
</tr>
i will be waiting for ur response and i am very thankful to u guys for helping me previously and hope u will help me this time too.
Read this article
i would prefer jQuery
Here is DEMO
Another DEMO
We can take the code and do the modifications like
1. Javascript modifications :
function toggleTB(what,elid)
{
if(what.checked)
{
document.getElementById(elid).disabled=1
}
else
{
document.getElementById(elid).disabled=0
}
}
2. Checkbox HTML code modifications
<input type="checkbox" name="sd3[]" value="mfi_nam9" onClick="toggleTB(this,'mfi_name1')" />Other(please specify):
<input type="text" name="mfi_nam9" class="text required" id="mfi_name1" />
Note that we have used the ID's to be varying for each of the textboxes which can be generated even when you are generating these textboxes from the php codes.
Add onclick to each of the checkbox
<input type="checkbox" name="sd2[]" value="mfi_nam8" onClick="toggleTB(this)" />Other(please specify):
and declare toggleTB as
function toggleTB(what){
what.form.elements[what.value].disabled = what.checked;
}
Java Script modification :
function toggleTB(what){
var theTB = document.getElementById(what.value);
if(what.checked){theTB.disabled=1}
else{theTB.disabled=0}
}
HTML Modification :
<table>
<tr>
<td style="border-top:none; text-decoration:underline;" >Specific operations/procedures</td>
<td>
<input type="checkbox" name="sd3[]" onClick="toggleTB(this)" value="mfi_nam9" />Other(please specify):
<input type="text" name="mfi_nam9" id="mfi_nam9" class="text required" />
</td>
</tr>
<tr>
<td style="border-top:none; text-decoration:underline;" >General principles/strategies</td>
<td>
<input type="checkbox" name="sd2[]" onClick="toggleTB(this)" value="mfi_nam8" />Other(please specify):
<input type="text" name="mfi_nam8" id="mfi_nam8" class="text required" />
</td>
</tr>
</table>
Note: Here I have used ID rather than NAME to verify the form input box element.
I think this doesn't make sense to disable the TEXT BOX on checked event of the related CHECK BOX. You maybe want to enable the TEXT BOX whenever some one checked the check box to specify some other thing, I am not sure what you want to do with this.
If you want to do like what I guess, just change the JAVA SCRIPT lines as bellow -
if(what.checked){theTB.disabled=0} // have placed 0 in place of 1
else{theTB.disabled=1} // have placed 1 in place of 0
}
HTML INPUT-BOX as bellow -
OR if you think to toggle (enable/disable) the checkbox, this is not possible cause you know after disable an element the click event will not do action on the element so how it will be disable :)