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.
Related
I'm working on <form> that have multiple groups of <input> with the same attributes name='product-code' and name='amount' (because of structure).
For better understanding, example: form where you can choose color and amount of one specific product to add in a basket, but I want to send product code from the catalog (because each color of this product is another item in a catalog) instead of sending color names.
And I'm trying to understand how it should be done semantically correctly and serialized. Should it be one form and one post request or many forms and many post requests? What's your opinion?
<form>
<div>
<input type="text" name="product-code" value="ST912600">
<input type="number" name="amount" value="2">
</div>
<div>
<input type="text" name="product-code" value="ST821806">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST467165">
<input type="number" name="amount" value="1">
</div>
<div>
<input type="text" name="product-code" value="ST348499">
<input type="number" name="amount" value="1">
</div>
<div>
<input type="text" name="product-code" value="ST545081">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST430287">
<input type="number" name="amount" value="0">
</div>
<div>
<input type="text" name="product-code" value="ST988144">
<input type="number" name="amount" value="4">
</div>
<button type="submit">Send</button>
</form>
I'm expecting the server will parse request with multiple data as an array
You can't use the same name in form tag. Visual your form like an associated array.
name => value
name2 => value2
So if you send a form with the same name, you create a conflict.
But you can use a simple form, change name attribut like you want and set a class named product-code for example. preventDefault with JS on your submit button and use getElementsByClassName and get his value etc. save in an array and create a loop for submit one by one with formElt.submit() funtion.
Or create a lot of forms in HTML.
I am creating a demo application, where I want to use radio buttons as buttons. For that I am using JQuery UI buttonset widget. It was working fine before but the actual problem began when I introduced the attribute runat="server", in order to retain the state during a post back. But after applying the attribute, buttonset widget stopped working on radio buttons.
So, I just want a solution where I can retain the state of the radio button controls and at the same time apply buttonset widget on them.
<div id="genderOptions">
<input type="radio" id="genderMale" value="Male" name="gender" />
<label for="genderMale" >Male </label>
<input type="radio" id="genderFemale" value="Female" name="gender"/>
<label for="genderFemale" >Female </label>
</div>
Output without runat="server" attribute
<div id="genderOptions">
<input type="radio" id="genderMale" value="Male" name="gender" runat="server" />
<label for="genderMale" >Male </label>
<input type="radio" id="genderFemale" value="Female" name="gender" runat="server" />
<label for="genderFemale" >Female </label>
</div>
This is the final output after specifying the attribute runat="server"
The runat="server" attribute used to dynamically change id and name attributes. Verify your rendered markup. Probably you will see something like
<input type="radio" id="ctl00_genderMale" value="Male" name="ctl00$gender" />
I assume you specify the input fields using ids in your JS which initializes the buttonset widget. Try to use tag or class selectors instead:
$("#genderOptions").buttonset({
items: "input[type=radio]"
});
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?
I am using an ajax to load form fields. When the you select the school, the grade fields load. When you select the grade, the show name check box appears. When the select all box appears, I have to click the select all box twice for it to work. It like the checkboxes are not apart of the DOM until the second click. I am not really sure what the issue is.
Here is all of my code.
Main Page
ShowGrade.html
showname.html
<input type="checkbox" class="coursereportcheckall" onChange="ThirdCheck();" id="checkall" name="coursereportcheckall">Select All<br>
<input type="checkbox" onChange="FourthCheck(this.selectedIndex);" value="10" class="tid" id="tid" name="tid"> George Washington<br>
<input type="checkbox" onChange="FourthCheck(this.selectedIndex);" value="11" class="tid" id="tid" name="tid"> John Adams<br>
showcourse.html
<input type="checkbox" id="checkallcourse">Select All<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="12"/> Twelve<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="13"/> Thirteen<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="14"/> Fourteen<br />
You will want to move your jQuery "on" outside of the ThirdCheck function. This should be set on jquery loaded, not when clicking on the checkbox.
$(document).on('click', '.#checkall', function(event) ...
Your problem is the click handler is being set the first time you click and then is being executed the second time you click.
Also, you don't need to include the "." in front of '.#checkall'.
I am trying to parse through a typical form using jquery. I want to obtain all details about the various fields in the form- viz field name, field type (eg radio/checkbox/list)...
How do I determine if a field allows multiple values to be selected? (eg in check box or list box)?
If this cannot be done using jquery, then can it be done using pure javascript? I already have with me a ref to the element for which this (whether multiple values are allowed or not) has to be determined...
Surround your control with some <div> as:
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
and check the selected or unselected elements using follwwing jquery code snippet. .size() will return the no of checked item and you can get the value of selected items by .val().
//Write your code when Document is loaded or some element click
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
for more help follow these links:
How can I know which radio button is selected via jQuery?
have a look on jquery selector. you should watch bottom itms :password, :reset etc that you need to use.
http://api.jquery.com/category/selectors/
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html
Handling Checkboxes, Radio Buttons and Select Options in jQuery
Hope this help you little bit...