Is it possible to use HTML5 form labels without leaking globals? - javascript

The standard HTML 5 form label wants an ID to link the label to the input.
<form>
<label for="male">Male</label>
<input type="radio" id="male"/>
<label for="female">Female</label>
<input type="radio" id="female"/>
</form>
As most JS developers know, using IDs leaks globals - in this case, window.male and window.female are created.
How can I use form labels without creating globals?

use the other way:
<form>
<label>Male <input type="radio"></label>
<label>Female <input type="radio"></label>
</form>

Related

How to use both radio buttons and checkboxes in same fieldset?

I have created a survey form that generates an email containing the answers provided. The issue I am having is that one question requires a radio button for three choices but then needs to include checkboxes below that may be use to append information to the radio button choice selected. Here is an example of the code I am describing:
<fieldset data-role="controlgroup">
<label for="q_planName" id="q_formStatus_title">Choose one of the following headline options:</label>
<input type="radio" name="q_formStatus" id="q_formStatus_1" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_1"Blah 1</label>
<input type="radio" name="q_formStatus" id="q_formStatus_2" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_2">Blah 2</label>
<input type="radio" name="q_formStatus" id="q_formStatus_3" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_3">Blah 3
<br/>The following indications may be appended to any headline option:<br/><br/>
<input type="checkbox" name="q_formStatus" id="q_formStatus_4" ;" />
<label for="q_formStatus_4">Date of blah required?</label>
<input type="checkbox" name="q_formStatus" id="q_formStatus_5" ;" />
<label for="q_formStatus_5">Blah is non regulated.</label></fieldset>
This looks fine in the form but the code that is used to print these results in the email is identifying this question as a radio input so it is storing the answer as a single response rather than an array (ie. it will print Q: questionTitle, A: answerValue instead of Q:questionTitle, A1:answerValue1,A2:answerValue2 etc.)
Note that these questions had to go through an approval process so please don't just suggest separating it into two separate questions or adding a "None of the above selection".
Thanks!
You need to use different names because each field needs to be identified individually by the server.

AngularJS radio button validation

Simple and easy.
I got two radio buttons.
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
How do i validate in AngularJS that at least one is chosen? And how can i type something like
$scope.myForm.gender.$invalid
Any ideas?
Without a form, you can fix this by check the value of the models in your controller, returning an error if both are false. You could also go ahead and set one true by default.
But to answer your question, you can do something similar to $scope.myForm.gender.$invalid all you have to do is wrap your input tags in a form with the name myForm. So, it would like:
<form name="myForm">
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
</form>
Then, $scope.myForm would be able to give you certain properties, like $isPristine and properties for each input field.
Either of these ways will work though, so I help that helps!
use required :
<input type="radio" name="gender" ng-model="male" required>
<input type="radio" name="gender" ng-model="female" required>
DEMO
same Question asked here : Validate Radio Button AngularJS

Group checkboxes needs required with bootstrap in rails3

I am using bootstrap for templating. I have a group of checkboxes. I want to use required property of bootstrap but, when I want to use it for group of checkboxes not for individual.
Is there is any way to impletement this.
Here is the reference image http://grab.by/Hm5m
Given
<form>
<input type="checkbox" name="whatever" value="1" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="2" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="3" required="required" class="required_group" />
<input type="checkbox" name="whatever" value="4" required="required" class="required_group" />
<input type="submit" name="submit" />
</form>
You could make it so that the user is required to check at least one checkbox:
$('form').on('click', '.required_group', function(){
$('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});
This solution relies on the HTML5 required attribute (and browser support). It doesn't require any particular Bootstrap code, but it uses jQuery (which you're already using with Bootstrap), so you can customize it with the Bootstrap classes and widgets that make sense for your project.

Turn Off Validation for Disabled Form Controls Angular

I have a button that is set to be disabled until the form is valid. However, depending on the situation some of the form fields are also disabled. My problem is, I need the user to only be required to fill in non-disabled form fields but angular doesn't seem to be validating the disabled fields.
<button ng-click="form.checkVerify(); appCtrl.pageLoad('spec')" ng-disabled="checkVerifyForm.$invalid" class="btn btn-lg btn-success pull-right">Complete</button>
<form name="checkVerifyForm">
<div class="col-md-6">
<fieldset ng-disabled="!form.dataStore.reqMake">
<label for="makeRec">Maker Recourse</label>
<div class="form-group">
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecYes" value="1" /> Yes
</label>
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecNo" value="0" /> No
</label>
<span id="helpBlock" class="help-block">Is there adequete recourse...</span>
</div>
Now I have seen some pretty intense directives that accomplish the task, but is there something simple that can be done in the controller to overcome this specific situation?
You can use e.g. ng-required to achieve that.
<input ng-change="form.justify()"
ng-model="form.verify.mRec"
type="radio"
name="makeRec"
id="makeRecYes"
value="1"
ng-required="form.dataStore.reqMake" /> Yes
AngularJS input documentation

MVC 5 / Razor working with the index

I can output a list, and I can add and remove items from the list, client side with javascript and partial views. But the resulting non-sequential indices cause a problem when the form is submitted.
For example, this code from the first link below
<input id="items_0__Amount" type="text" value="Apple" name="items[0].Title">
<input id="items_1__Amount" type="text" value="Banana" name="items[1].Title">
<input id="items_2__Amount" type="text" value="Orange" name="items[2].Title">
looks like this if I delete a row
<input id="items_0__Amount" type="text" value="Apple" name="items[0].Title">
<input id="items_2__Amount" type="text" value="Orange" name="items[2].Title">
or like this if I use js to add a new row with a partial view
<input id="items_0__Amount" type="text" value="Apple" name="items[0].Title">
<input id="items_1__Amount" type="text" value="Banana" name="items[1].Title">
<input id="items_2__Amount" type="text" value="Orange" name="items[2].Title">
<input id="items_0__Amount" type="text" value="Apple" name="items[0].Title">
Here are links to a previous question and a Haacked blog post that address the issue, but don't solve my problems completely.
MVC/Razor model binding collections when an element is missing
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/
In addition, this content is from the MVC 2 era.
Are there other ways to work with lists where the index can be managed?
Are there better ways to work with the index for Razor views / partial views in the latest versions of MVC?

Categories

Resources