I have some php generated yes/no radio buttons. When the buttons are given to the browser (tested in Chrome and Firefox) the yes button value is being turned to blank/null. I have verified that the html being passed is correct. I am now stumped.
An example of the code sent to the browser (this is the value sent from php script):
<label for="viol_comveh_yes">YES</label><input type="radio" name="YN_COMVEH_VIOL" value="yes" id="viol_comveh_yes" data-save="true"/>
On every one of these buttons the value is being turned to null.
PHP sends only a value when the checkbox/radio button is selected.
That means that the name from the checkbox/radio contains the value. An example:
<input type="radio" name="Foo" value="bar" />
When it is post you have:
echo $_POST['Foo']; // bar
I hope this is what you are looking for!
Related
If I create radio buttons in my model driven form, they work fine but they don't have the radio button selected reflected by the formControlName default value. For example:
<input type="radio" formControlName="isPublic" name="isPublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label>
<input type="radio" formControlName="isPublic" name="isPublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>
{{form.value.isPublic}}
If I have this it works correctly, but I can see the value of form.value.isPublic is false (as output in the last line to confirm) and yet no radio button is selected by default.
I tried to correct this by adding [checked] to each to drive the default value. This works for the page load, in that defaults are properly selected in the radio buttons. It even works for ONE selection - in that I can select the other radio button, it will be selected, the first one will be unselected, and the {{form.value.isPublic}} will change from false to true.
<input type="radio" formControlName="isPublic" [checked]="!form.value.isPublic" name="isPublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label>
<input type="radio" formControlName="isPublic" [checked]="form.value.isPublic" name="isPublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>
{{form.value.isPublic}}
The problem comes when I select the first radio button again - on the first click the radio button selection state doesn't change at all, but the {{form.value.isPublic}} output changes back to false. If I click it again, then the radio button selection state changes. So it takes two clicks to switch it back to the default. If I click the other one again after that, it changes as expected but switching back to the first one takes two clicks (one click updates the form value and the second click changes the selection state of the radio button).
What should I be doing in this situation to have the radio buttons function correctly and reflect the default value for the form?
After experimenting with using values from the form object to drive other Angular2 directives (like *ngIf) I discovered that the behaviour is always a little strange. For example, if I draw parts of the page using *ngIf based on the value of form.value.isProfilePublic, the *ngIf section would only change once even though I can see the value of that variable is changing. It isn't important to the answer so I won't elaborate but bottom line is that using form values to dynamically drive things that can update the form value itself doesn't work as I'd expect (likely for a good reason).
...so now I'm using a different variable not related to the form to drive the default selection and it works fine. So, the following works:
<input type="radio" formControlName="isProfilePublic" name="isProfilePublic" [checked]="!currentUser.isProfilePublic" value="false" id="keepPrivate" ><label for="keepPrivate">Keep it Private</label>
<input type="radio" formControlName="isProfilePublic" name="isProfilePublic" [checked]="currentUser.isProfilePublic" value="true" id="makePublic" ><label for="makePublic">Make it Public</label>
I can't explain needing two clicks, but this should work:
<label>
<input type="radio" formControlName="isPublic" value="true" id="isPublic" (change)="form.value.isPublic = true"/> Make it public
</label>
<label>
<input type="radio" formControlName="isPublic" value="false" id="isPublic" (change)="form.value.isPublic = false"/> Keep it private
</label>
On my project we are generating the radio buttons dynamically based on the 'questions' example in the docs for Angular 2 Dynamic Forms
<label class="radio-inline" *ngFor="let opt of input.options">
<input type="radio" [formControlName]="input.key" [value]="opt.value" [id]="input.key" (change)="input.value = opt.value">
{{opt.label}}
</label>
I am experiencing something weird with radio buttons, and I'm hoping someone here can explain to me what is happening.
I have created a radio button like so:
<input type="radio" name="radio-smoker" value="true" />
When I load the page in the browser (Chrome), and inspect the radio button I see:
<input type="radio" name="radio-smoker" value>
The value attribute has no value.
However, when I change the value from "true" to "1", the value attribute works and the value "1" is retained.
I also noticed that if I set a value of "test1", I end up with a value of "1". It seems to strip out the letters, only allowing numbers.
I have tried to recreate this elsewhere (e.g. jsBin), without success. It only happens in the one place.
What is happening, and where can I begin to find out what's causing it?
It works for me. Inspect the element and you can see the value isn't changed on runtime.
<form action="">
<input type="radio" name="radio-smoker" value="true" > True
<br>
<input type="radio" name="radio-smoker" value="true1" > True1
</form>
After some investigating, it turns out there was a jQuery mask plugin setting a number mask on all inputs of the page. Thus why only numbers were allowed. Once that was removed, all radio button values started working as intended.
I have form that has rows which send data in array. Everything works ok, only problem is with radio buttons, when I want to edit data, they are printed with checked=checked attribute, but all browsers only register last ckecked radio button. I have tried everything I can think of, not even hack with jQuery works and jQuery does the same.
<input type="radio" name="targets[image][0]" value="/images/Targets/target2.png">
<input type="radio" name="targets[image][0]" value="/images/Targets/target1.png" checked="checked">
<input type="radio" name="targets[image][0]" value="/images/Targets/target3.png">
<input type="radio" name="targets[image][1]" value="/images/Targets/target2.png">
<input type="radio" name="targets[image][1]" value="/images/Targets/target1.png" checked="checked">
<input type="radio" name="targets[image][1]" value="/images/Targets/target3.png">
When I submit the form, then it sends only last radio as checked. Any idea how to solve this?
EDIT: For handling submit there is simple PHP script that handles $_POST
I dont want to selecte multiple values for one group, but it seems that it takes all those groups as one group, its like it ignores index in array [0]
The attribute is just "checked". You don't need "checked=checked".
Try this:
<input type="radio" name="targets[image][0]" value="/images/Targets/target1.png" checked>
No solution that I tried seemed to work, so I have reorganized my js file and now my jQuery hack works, so for anyone with similar problem, try:
$('[checked=checked]').each(function(){
$(this).click();
});
Personally I dont like this solution, feels unprofessional, but it works and I have to have radio buttons there.
I have a hidden field called Id on the page.
I also have 2 radio buttons with the following markup:
<input type="radio" value="cats" name="xxx" id="x1" checked="checked">
<label for="1st16th">1st & 16th of the month</label>
<input type="radio" value="bananas" name="xxx" id="x2">
<label for="SpecifyRecurrence">Specify Recurrence</label>
For some reason the second is always checked even though the first says it's checked in the markup. It renders correctly in IE. Also, if I change the id of the hidden field to xId then it will render correctly in FF.
This occurs in xhtml as well as html 5.
Is there anything in the docs that says that you shouldn't use Id as an id on the page or is this just a FF bug?
You are probably testing this by clicking on the second radio button and then pressing Refresh.
Firefox will remember the state of the radio group and use that instead of the default values.
Click in the address bar and press enter to load the page fresh and use the default values.
I'm really new to HTML, but I can't find anywhere how to return the variable from a check box. I've figured out how to get variables from forms and inputs, but I don't know how to get them from check boxes. Basically, I want a check box that if checked, will return the value yes. If not checked, it doesn't have to return a value, but no would be nice.
When submitting a form, if a checkbox is checked, it will be included in the values collection submitted to the server. If not checked, it will be omitted (as if that checkbox did not exist).
In JavaScript, you can find out whether the checkbox is checked by the checked property:
//returns true or false
var isChecked = document.getElementById('id_of_checkbox').checked;
In ASP.NET, the CheckBox control has a boolean property Checked.
Assign something to the value attribute. You should get the value of the checked box, if there is one in the form values on postback. Note that I've made it a radio input in the case where you want yes or no. For a radio you need to assign the same name, but different ids (if you assign an id at all). You'd want to use checkboxes in the case where you can have more than one value selected or only care to get the value when selected. These types of checkboxes should have different names.
<input type="radio" id="radio_yes" name="radio_btn" value="Yes" /> Yes
<input type="radio" id="radio_no" name="radio_btn" value="No"
checked="checked" /> No
If you only want a single check box with the value yes to be returned if checked, then you can use a check box. You won't get any value if it isn't checked.
<input type="checkbox" id="chk_box" name="chk_box"
value="Yes" /> Do you want this?
On the server-side, you look for the value corresponding to the "radio_btn" (first example) or "chk_box" (second example) key in your form parameters.
Use the 'checked' property.
var checkbox = document.getElementById('checkboxId');
var checked = checkbox.checked;
look at the value of YourCheckboxName.Checked
If a checkbox is disabled, it will be omitted in the values collection submitted to the server even if it is checked:
<input type="checkbox" name="checkbox1">
<input type="checkbox" name="checkbox2" checked>
<input type="checkbox" name="checkbox3" disabled>
<input type="checkbox" name="checkbox4" disabled checked>
Looks like:
result of HTML sample code
Only checkbox2 is in the values collection submitted to the server, if the user submits the form without any changes.