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']">
Related
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've got a checkbox, which is default "checked" - Its "POST" enable=true
Second, I've got a checkbox, which is hidden. - This must "POST" enable=false
<td>
<input style="margin-left: -100px" id='checked' type='checkbox' value='true' name='enable'>
<input id='not_checked' type='hidden' value='false' name='enable'>
</td>
So, if the checkbox have an attribute "checked" - my script is working and send enable=true.
But if, I doesn't check the box, my script stop working and doesn't send everything.
JS:
if(document.getElementById("checked").checked) {
document.getElementById('not_checked').disabled = true;
}
I have taken the example from here:
Post the checkboxes that are unchecked
try this code .. i think this will do the job
<td>
<input id='checked' type='checkbox' value='true' name='checked' style="margin-left: -100px">
<input id='not_checked' type='hidden' value='false' name='checked'>
</td>
This seems like a simple problem, but how do I create a basic HTML form that has a series of radio button options, with the last one being a text field to fill in a custom response (i.e. "Other").
What I have now:
Reason given for stop? <br>
<input type="radio" name="reason" value="Fit Description">Fit Description<br>
<input type="radio" name="reason" value="Suspicious Behavior">Suspicious Behavior<br>
<input type="radio" name="reason" value="No Reason Given">No Reason Given<br>
<input type="radio" name="reason" value="">Other<br>
Just add a text input field to it.
Reason given for stop? <br>
<input type="radio" name="reason" value="Fit Description">Fit Description<br>
<input type="radio" name="reason" value="Suspicious Behavior">Suspicious Behavior<br>
<input type="radio" name="reason" value="No Reason Given">No Reason Given<br>
<input type="radio" name="reason" value="">Other <input type="text" name="other_reason" />
jsFiddle example
Create a text field, and set it to display:none;
Then with jQuery, detect when the 'Other' radio button is checked and show the textbox.
Then on your process script, do and if statement to see if the value of your radio button group is "" (nothing), and grab the post data of the textbox and do what you want with it.
There is a neat way to add text field alongside radio buttons without using functions or Javascript (jQuery).
Just add the radio btn (Other) and the text field next to it, on the top of your HTML form. Here is what i use:
Color:
<input type="radio" name="title[<?=$red?>][color]" value="" <?php if ($row['color'] != ' ') {echo 'checked';} ?> />Other <input type="text" name="title[<?=$red?>][color]" value="<?php echo $row['color'] ?>" style="width: 200px;" /> |
<input type="radio" name="title[<?=$red?>][color]" value="natural" <?php if ($row['color'] == 'natural') {echo 'checked';} ?> />natural|
<input type="radio" name="title[<?=$red?>][color]" value="stain" <?php if ($row['color'] == 'stain') {echo 'checked';} ?> />stain |
<input type="radio" name="title[<?=$red?>][color]" value="white" <?php if ($row['color'] == 'white') {echo 'checked';} ?> />white|
Basically you do not put value on the "Other" radio input, but on the text input so whatever you write in the text field will be send to db - its 1st field in the FORM. If nothing in the text field - the other checked radio input will be processed.
Hope this helps.
Simply add a text field as you would normally but give it the same name attribute as the others, that way when accessing them you'll get one of them.
In JavaScript (which I assume you'll be using?) just access these elements and check the the textfield is empty, if it is get the radio buttons.
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 :)
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.