I swear I have done checkboxes a million times but these are giving me trouble. When I check either one, the other one also gets the checked attribute. My guess? Angular is the culprit, but I still need to find a solution because I can't strip Angular out. I'd give you a JFiddle, but like I said, Angular injections and modules, etc...You understand. But I will give you the related code:
This is the HTML:
<div class="form-group col-xs-12 col-sm-12 col-md-3" ng-class="{ 'has-error': quoteform.inputProject.$invalid && submitted }">
<label for="inputProject">Project Type <span class="required">*</span></label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="checkbox1" value="checkbox1"> Lawn Care
</label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="checkbox2" value="checkbox2"> Home Improvement
</label>
</div>
After checking the broweser's dev tools I noticed this
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="project" value="" class="ng-pristine ng-untouched ng-valid" tabindex="0" aria-checked="true" aria-invalid="false">
The aria-checked changes to true on all checkboxes when I click on one. Why? and how do I fix this?
Thanks
Because you have the same model set to each checkbox.
You need to have a different model for each, somewhat like this: take note of the ng-model
<div class="form-group col-xs-12 col-sm-12 col-md-3" ng-class="{ 'has-error': quoteform.inputProject.$invalid && submitted }">
<label for="inputProject">Project Type <span class="required">*</span></label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject1" type="checkbox" name="inputProject" id="checkbox1" value="checkbox1"> Lawn Care
</label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject2" type="checkbox" name="inputProject" id="checkbox2" value="checkbox2"> Home Improvement
</label>
</div>
Related
I have this HTML:
<div id="broker_referral_block" style="display: none;">
<label for="">* How did your broker/agent introduce you to the project?</label><br>
<input type="radio" name="referral2" value="Site Visit" class="referral2"> Site Visit
<br>
<input type="radio" name="referral2" value="Conversation through social media" class="referral2"> Conversation through social media
<br>
<input type="radio" name="referral2" value="Referrals" class="referral2"> Referrals
<br>
<input type="radio" name="referral2" value="Phone Calls" class="referral2"> Phone Calls
<br>
<input type="radio" name="referral2" value="Developer" class="referral2"> Developer
<br>
<input type="radio" name="referral2" value="Other" class="referral2"> Other
</div>
I don't know why it's not included when I try to serializeArray var test = jQuery(this).serializeArray(); I don't see anything wrong. I know the display:none; is not an issue because this field:
<div id="broker_referral_block_other_field" style="display: none;">
<input type="text" class="form-control referral2other" name="referral2other" id="referral2other">
</div>
Gets read, just without value (which is what I want). I also don't understand why everything in this block gets read:
<div id="existing_loans_block" style="display: none;">
<label for="">* Loan</label>
<input type="text" class="form-control existing_loans_detail" name="loan" id="loan">
<label for="">* Amount</label>
<input type="text" class="form-control existing_loans_detail" name="loan_amount" id="loan_amount">
<label for="">* Monthly Amoritization</label>
<input type="text" class="form-control existing_loans_detail" name="loan_amort" id="loan_amort">
<label for="">* Term</label>
<input type="text" class="form-control existing_loans_detail" name="loan_term" id="loan_term">
<label for="">* Status</label>
<!-- This bit does not get included too -->
<select name="loan_status" id="loan_status" class="form-control existing_loans_detail">
<option value="" selected disabled hidden>Select loan status...</option>
<option value="Active">Active</option>
<option value="Updated">Updated</option>
</select>
</div>
Except for loan_status. All of them are properly wrapped in a form tag. This is my jquery:
jQuery("#hbcq_form").submit(function(e){
e.preventDefault();
var test = jQuery(this).serializeArray();
...
I did a console.log(test) and that's when I found out that referral2 and loan_status is not being included in the serialization. I also double checked, there is no name conflicts for these.
jQuery serialize hidden (display:none) form elemens does not work. Workaround?
check this out you can find help full answer
I have a couple of checkbox that I would like to make only one of them clickable. I have tried different solutions on stack overflow. I also changes changed the input type to radio and I have used the following code but still its not working:
$(document).ready(function () {
$('input[type=radio]').change(function() {
// When any radio button on the page is selected,
// then deselect all other radio buttons.
$('input[type=radio]:checked').not(this).prop('checked', false);
});
});
My Code is as follows:
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="checkbox" name="last24">
<label for="checkbox15">
Last 24 Hours
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="checkbox" name="last3Days">
<label for="checkbox16">
Last 3 days
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="checkbox" name="last7Days">
<label for="checkbox17">
Last 7 days
</label>
</div>
<br>
</div>
If you want to make only one of a set of checkboxes clickable, use radio buttons with the same name. This will be much better for usability and accessibility. Here's an article from the Nielsen Norman Group about how to choose between checkboxes and radio buttons and why it matters. https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
I'd recommend using the values in place of your names to differentiate.
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="radio" name="lastTimeFrame" value="last24">
<label for="checkbox15">Last 24 Hours</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="radio" name="lastTimeFrame" value="last3Days">
<label for="checkbox16">Last 3 days</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="radio" name="lastTimeFrame" value="last7Days">
<label for="checkbox17">Last 7 days</label>
</div>
<br>
</div>
I would like to use these funky radio buttons though the radio buttons have an id=radio1, id=radio2, id=radio3 etc
I would like all of them to have id-radio1 so it writes the result to radio1 in the database:
Here is how I have normal radio buttons working in the past using the same id and they toggle between one another:
<div class="form-group col-md-12">
<label class="control-label form-check-inline">Gender</label>*
<div class="form-group">
<input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
<input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
</div>
</div>
$Gender=$_POST["Gender"];
INSERT INTO [dbo].[SubmissionsTBL]
[Gender]
VALUES
(,'".trimText($Gender)."')
Though, with the funky radio buttons chaning from this:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
to this doesn't work - it doesn't allow me to toggle radio buttons:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1"/>
<label for="radio2">Female</label>
</div>
</div>
What is stopping the toggle?
Thank you!
TL;DR: Due to the id and name attribute having the same value in your first example, I believe you may be confusing the two. With the database communication code you put up, it's grabbing the name="Gender" and not the id="Gender".
Additional information about id and class though you might find useful as an internet programmer:
The id attribute can only apply to one element per HTML document. I would suggest using the class attribute instead. The main difference between and id and a class is that a class can be applied to multiple elements.
Here is a working solution to the code you provided:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" class="radio_grp1"/>
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2" class="radio_grp1"/>
<label for="radio2">Female</label>
</div>
</div>
I used the class .radio_grp1 as the name so that you know that you're referring to a group of radio buttons rather than just one.
Moreover, if you're using a library like bootstrap, it's very common that an element will already have an assigned class. To solve this issue, you can assign a single element multiple classes by adding a space in the string following the class attribute like so:
<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>
Hope this was useful!
Your code should be changed to something like this. the radio button's name is what is submitted to the back end, and the id is used for front-end things like label association.
id's should always be unique.
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
If by toggling, you mean the normal behavior of radio buttons, then that happens whenever all the radio buttons in the group have the same name.
i have a form on a div with check boxes, the check boxes are to low in relationship to the line of the text,
what is missing to make it align vertically?,, thanks!
<div id="dialog-form2" title="Titulo">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Your name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Your email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="email">Your phone number</label>
<input type="text" name="phone" id="phone" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Your Member Number</label>
<input type="password" name="password" id="password" value="" class="text ui-widget- content ui-corner-all" />
<br>
Enquiry<br>
<input type="checkbox" name="option1" value="Milk"> I would like to r <br>
<input type="checkbox" name="option2" value="Butter">I need a h <br>
<input type="checkbox" name="option2" value="Butter">Please email me with offer details<br>
<input type="checkbox" name="option2" value="Butter">Please call me to discuss offer<br>
<input type="checkbox" name="option2" value="Butter">Other?<br>
</fieldset>
</form>
</div>
it's hard to answer this without knowing what your style sheet is looking like. Even your font / font size will affect this to some degree. For instance, just pasting your code into a blank html file and bringing it up in a browser alignment is slightly off because it's using Times for the font for me, but then if i change the body font to arial it lines up great. Just having only this snipped with no associated css makes it hard to answer the question as clearly as you might need.
I have the following markup:
<div class="control-group">
<label class="control-label" for="rdbActive">Active</label>
<div class="controls">
<label class="radio inline" for="rdbActive0">
<input name="rdbActive" id="rdbActive0" value="Yes" checked="checked" type="radio">Yes
</label>
<label class="radio inline" for="rdbActive1">
<input name="rdbActive" id="rdbActive1" value="No" type="radio">No
</label>
</div>
</div>
How do I make this runat=server?
For text input all I do is:
<div class="control-group">
<label class="control-label" for="txtDescription">Description</label>
<div class="controls">
<input id="txtDescription" runat="server" name="txtDescription" placeholder="" class="input-large" type="text">
</div>
</div>
..and I'm able to access it from code behind. If I add it to any radio button I get a 500 server error.
You may create radio button with runat="server" as:
<asp:RadioButton id="RadioButton1" AutoPostBack="True|False" Checked="True|False" GroupName="GroupName" Text="label" TextAlign="Right|Left" OnCheckedChanged="OnCheckedChangedMethod" runat="server" />
Where OnCheckedChangedMethod is the code-behind method which is invoked when the radio button is checked.
See this reference on MSDN website.