CheckBoxList - check all - javascript

I have CheckBoxList when I have one default value called "Select All" and rest items binded from database:
<asp:CheckBoxList runat="server" ID="chkBxLstSystemTypes" CssClass="chkBxList" RepeatDirection="Horizontal" RepeatColumns="10" TabIndex="2">
<asp:ListItem Value="SelectAll">Select All</asp:ListItem>
I would like to have JavaScript or jQuery function which will check all check boxes when user clicks "Select all" and deselect the check boxes when user deselects the "Select All".
-- EDIT 1
Rendered HTML:
<table id="ctl00_MainContent_chkBxLstSystemTypes" class="chkBxList" border="0">
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_0" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$0" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_0">Select All</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_1" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$1" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_1">ASG</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_2" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$2" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_2">AVP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_3" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$3" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_3">CDR</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_4" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$4" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_4">CMS</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_5" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$5" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_5">CUCM_Logins</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_6" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$6" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_6">CUCM_Subscribers</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_7" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$7" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_7">Cybertech</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_8" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$8" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_8">eHealth</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_9" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$9" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_9">Intuity</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_10" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$10" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_10">MMSMailbox</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_11" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$11" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_11">MMSUser</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_12" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$12" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_12">NICE Perform</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_13" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$13" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_13">PBX</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_14" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$14" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_14">UNITY</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_15" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$15" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_15">VoIP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_16" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$16" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_16">WebEx</label>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>


I suggest to use CliendIdMode="static" in your runat="server" elements that you use them in js. You can try this:
$("#ctl00_MainContent_chkBxLstSystemTypes_0").click(function () {
$(this).parents("table").find(":checkbox").prop("checked", $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ctl00_MainContent_chkBxLstSystemTypes" class="chkBxList" border="0">
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_0" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$0" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_0">Select All</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_1" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$1" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_1">ASG</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_2" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$2" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_2">AVP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_3" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$3" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_3">CDR</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_4" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$4" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_4">CMS</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_5" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$5" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_5">CUCM_Logins</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_6" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$6" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_6">CUCM_Subscribers</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_7" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$7" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_7">Cybertech</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_8" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$8" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_8">eHealth</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_9" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$9" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_9">Intuity</label>
</td>
</tr>
<tr>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_10" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$10" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_10">MMSMailbox</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_11" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$11" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_11">MMSUser</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_12" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$12" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_12">NICE Perform</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_13" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$13" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_13">PBX</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_14" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$14" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_14">UNITY</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_15" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$15" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_15">VoIP</label>
</td>
<td>
<input id="ctl00_MainContent_chkBxLstSystemTypes_16" type="checkbox" name="ctl00$MainContent$chkBxLstSystemTypes$16" tabindex="2" />
<label for="ctl00_MainContent_chkBxLstSystemTypes_16">WebEx</label>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>


Add this jQuery code & you are done.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.chkBxList input:checkbox:first').change(function(){
var status = $(this).is(':checked');
$('.chkBxList input:checkbox').prop('checked', status);
});
</script>
Jsfiddle: http://jsfiddle.net/y9dhwx72/

Related

How to get JSON data from HTML form with backbone js

I am creating a dynamic form in a Backbone.js view. I want to get all the JSON data from the form in my view without using jQuery. Is there any way to get the data?
For example: When You check the checkbox, I only want the data for the checked field.
<table class="table">
<thead>
<tr>
<th></th>
<th>{{labels.selectImage}}</th>
<th>{{labels.nameVisibleToShop}}</th>
<th>{{labels.sourceCode}}</th>
<th>{{labels.pricePerItem}}</th>
</tr>
</thead>
<tbody>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
</tbody>
</table>

how to generate object from variants using jquery

I'm trying to generate objects from array variants using jquery but i didn't get proper solution for that can anyone help?
here is my HTML code.
<table>
<tr class="variants">
<td>
100g/
<input id="100g" name="variant_name" type="hidden" value="100g">
m/
<input id="m" name="variant_name" type="hidden" value="m">
blue
<input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>...</td>
<td>...</td>
</tr>
<tr/>....</tr>
<tr/>....</tr>
I need output something like that.
{
"100g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
},
"200g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
}}
here is fiddle link for more information.
https://jsfiddle.net/fhLqsz3w/
It would be greatly appreciated if someone helped me

You can iterate through each tr of the table. Iterate through all the input tag of a row. For all the hidden input, if the key (value is the value of the input element) is present, move to next object otherwise create an object corresponding to that key. For all the non-hidden field, accumulate values in an object accumulator, after exiting the loop, now add the non-hidden object to the original object.
$('#update_btn').click(function(e) {
var obj = {};
$('table tbody tr').each(function() {
var temp = obj;
var notHidden = {};
$(this).find('input').each(function(i,e) {
if(e.type=="hidden"){
if(!(e.value in temp))
temp[e.value] = {};
temp = temp[e.value];
}
//added textbox value
if(e.type!="hidden"){
notHidden[e.getAttribute('name')] = e.value;
}
})
Object.assign(temp, notHidden);
});
console.log(obj);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-condensed" id="variants">
<tbody>
<tr><th> Variant </th> <th> SKU </th><th>Cross Price and Price</th> <th> Qty</th> <th> Image Link/ID </th></tr>
<tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr></tbody>
</table>
<button id="update_btn">click
</button>

Send data out of visible form only

I have two divs containing same input fields. When I enter the vales in both the div fields, all the values get submitted. what I want is, only the value of selected div (using radio button) should pass. Any help will be appreciated :-)
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
$("#percentagePolicyDiv").get(0).reset();
} else if (this.value == '1') {
$("#fixedPolicyDiv").css("display", "none");
$("#fixedPolicyDiv").get(0).reset();
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

You can add the disabled property to the inputs you do not want to sent.
for exemple :
$("#percentagePolicyDiv").find('input').prop('disabled');

If reset() is not only JS method you accept, we can make it with setting value of input fields such way:
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#percentagePolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
} else if (this.value == '1') {
$("#fixedPolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "none");
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Otherwise you should implement desired ID to <form> elements.
formObject.reset() is JS method of FORM-object

Generate Array of numbers from sudoku table HTML table

I have a simple HTML table setup to look like a sudoku board. Each cell is a input with type = number.
I want to use jQuery to extract all of the numbers from each cell and generate an array of arrays. The array will be formatted like this:
array = [ [1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2],
[1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2],
[1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2]]
Here is a fiddle of my general set up: Sudoku Board Fiddle
the css is taken from this answer sudoku css
Essentially the HTML is set up like this:
<table id='#table'>
<tr id="row1">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
.... x9 rows
</form>
I want to make a function with jQuery that on the click of a button, it converts each row into an array and puts each array into one array.
My approach:
Use jQuery to select the table. Loop through each table row. Nest a loop to loop over each input and append each value to arrays.
This is what I have so far (it does not work at all. It just logs an empty array, even if I populate the table with values).
var array = [];
$('button').on('click', function(){
event.preventDefault();
$('table').children('tr').each(function(){
$(this).find('input').each(function(){
array.push($(this).val());
});
});
alert(array);
});

You should have another array for each tr and after all td iterations, push that array in main array
Fiddle here
$('button').on('click', function() {
event.preventDefault();
var array = [];
$('#table').find('tr').each(function() {
var arr = [];
$(this).find('input').each(function() {
arr.push($(this).val());
});
array.push(arr);
});
console.log(array);
});
table {
margin: 1em auto;
}
td {
height: 30px;
width: 30px;
border: 1px solid;
text-align: center;
}
td:first-child {
border-left: solid;
}
td:nth-child(3n) {
border-right: solid;
}
tr:first-child {
border-top: solid;
}
tr:nth-child(3n) td {
border-bottom: solid;
}
input {
width: 30px;
height: 30px;
}
button {
display: block;
margin: 0 auto;
height: 30px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table'>
<tr id="row1">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row2">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row3">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row4">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row5">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row6">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row7">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row8">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row9">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
</table>
<button>Generate Array</button>

There are a couple of problems with your code. First, you're trying to find an element with the ID table (that's what #table targets). You don't have an element with the ID of table, so that instantly doesn't work. So you either need to give you table an ID, or change your selector to get the table. I'll suggest the latter, for now.
$('table')...
Secondly, instead of using .children(), try using the $(selector, parent) shorthand. .children() is awkward in the case of tables; it only selects direct children, and a TR is not a direct child (tbody is the direct child, even if you don't declare it in your markup). I avoid using .children(). If anything, use .find().
$('tr', 'table').each(function() { ... });
Thirdly, you are using event.preventDefault(), but you haven't passed the event paramter to your callback. You need to pass the event, like so:
$('tr', 'table').each(function(event) { ... });
You will still only end up with a 1-dimensional array, not a 2-d array like you'd require, but this fixes the problems you had with your initial code.

First point is, you haven't added id for table element. But you are taking reference of table id in function.That is how it was in fiddle code.
JS Code:
var array = [];
$('button').on('click', function(){
// event.preventDefault();
$('#table').find('tr').each(function(){
var newarr=[];
$(this).find('td input').each(function(){
newarr.push($(this).val());
console.log('newarr:'+newarr);
});
array.push(newarr);
});
console.log(array);
});
I have updated and code and the final result is printing in console.
Check it.

var array = [];
$('button').on('click', function(){
event.preventDefault();
array = [];
$('#table').find("tr").each(function(){
var row = [];
$(this).find('input').each(function(){
row.push($(this).val());
});
array.push(row);
});
console.log(array);
});
table {
margin:1em auto;
}
td {
height:30px;
width:30px;
border:1px solid;
text-align:center;
}
td:first-child {
border-left:solid;
}
td:nth-child(3n) {
border-right:solid ;
}
tr:first-child {
border-top:solid;
}
tr:nth-child(3n) td {
border-bottom:solid ;
}
input {
width:30px;
height: 30px;
}
button {
display: block;
margin: 0 auto;
height: 30px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr id="row1">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row2">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row3">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row4">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row5">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row6">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row7">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row8">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row9">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
</table>
<button>Generate Array</button>

When jQuery accordion is clicked, needs to go to top of page

I have an accordion layout in jQuery with one section that has become rather large. I need to be able to click the different sections and have the accordion open and the scroll bar on the right be all the way to the top of the right of the page. I tried the but that doesn't work and breaks the accordion. How can I click a link and have the accordion stay at the top of the page?
code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="demo/dialog.css" media="screen" />
<link rel="stylesheet" type="text/css" href="fixed-box/fixed-box/style-accordion.css" media="screen"/>
<script>
$(document).ready(function()
{
$('#other').change(function()
{
$('#otherrace').parent().toggle(this.checked).focus();
});
$("#toggleElement").change(function() {
$('input[name=living]').not(this).attr('disabled', this.checked);
});
$("#toggleInsurance").change(function() {
$('input[name=insurance]').not(this).attr('disabled', this.checked);
});
$("#toggleInsurance").change(function() {
$('input[name=insurance]').not(this).attr('disabled', this.checked);
});
$("#accordion").accordion();
$('[name*="race"]').click(function() { $('#otherrace').css('visibility', $('#other').attr('checked') ? 'visible':'hidden'); });});$(document).ready(function() {
$('[name*="RadioGroup1"]').click(function() {
$('#RadioGroup1_11').css('visibility', $('#RadioGroup1_10').attr('checked') ? 'visible':'hidden');
});
});
</script>
</head>
<body style="font-size:75%" >
<div id="centerColumn">
<div id="accordion">
<h6><i can't post one than one link>Demographcis</a></h6>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<th width="18%" scope="row">Last Name</th>
<td width="31%"><form name="form1" method="post" action="">
<input type="text" name="textfield" id="textfield" maxlength="20">
</form></td>
<td width="4%"> </td>
<td width="47%"> </td>
</tr>
<tr>
<th scope="row">Middle Initial</th>
<td><form name="form2" method="post" action="">
<input type="text" size="3" maxlength="1" name="textfield2" id="textfield2">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">First Name</th>
<td><form name="form3" method="post" action="">
<input type="text" name="textfield4" id="textfield4" maxlength="20">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Address</th>
<td><form name="form4" method="post" action="">
<input type="text" size="35" name="textfield5" id="textfield5" maxlength="35">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Rural Route#</th>
<td><form name="form5" method="post" action="">
<input type="text" name="textfield6" id="textfield6" maxlength="8">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">City</th>
<td><form name="form6" method="post" action="">
<input type="text" name="textfield7" id="textfield7" maxlength="20">
</form></td>
<td>State</td>
<td><form name="form7" method="post" action="">
<input type="text" size="2" maxlength="3" name="textfield8" id="textfield8">
ZIP
<input type="text" maxlength="5" size="6" name="textfield9" id="textfield9">
</form></td>
</tr>
<tr>
<th scope="row">DOB</th>
<td><form name="form8" method="post" action="">
<input type="text" size="11" maxlength="10" name="textfield10" id="textfield10">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Phone</th>
<td><form name="form9" method="post" action="" >
<input type="text" size="12" maxlength="13" name="textfield11" id="textfield11">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Gender</th>
<td><form name="form10" method="post" action="">
<p>
<input type="radio" name="Gender" value="female" id="Gender_0">
Female
<br>
<input type="radio" name="Gender" value="male" id="Gender_1">
Male
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Race/Ethnicity</th>
<td>
<p>
<input type="checkbox" name="race_" value="asian" id="race_0">
Asian
<br>
<input type="checkbox" name="race_" value="white" id="race_1">
White
<br>
<input type="checkbox" name="race_" value="black" id="race_2">
Black
<br>
<input type="checkbox" name="race_" value="latino" id="race_3">
Latino
<br>
<input type="checkbox" name="race_" value="island" id="race_4">
Pacific Islander
<br>
<input type="checkbox" name="race_" id="other"value="other" />Other, specify<br />
<div style="display:none" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>
<br>
</p>
<input type="text" style="display:none;" name="race_" value="other1" id="otherrace">
 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Living Arragenments</th>
<td><form name="form11" method="post" action="">
<p>With whom do you live? Choose all that apply<br/>
<input type="checkbox" name="living" value="alone" id="living">
Live alone
<br>
<input type="checkbox" name="living" value="husband" id="living">
Husband
<br>
<input type="checkbox" name="living" value="partner" id="living">
Partner
<br>
<input type="checkbox" name="living" value="children" id="living">
Children
<br>
<input type="checkbox" name="living" value="parents" id="living">
Parents
<br>
<input type="checkbox" name="living" value="other_relatives" id="living">
Other relatives
<br>
<input type="checkbox" name="living" value="religion" id="living">
Religious order
<br>
<input type="checkbox" name="living" value="no_answer"
id="toggleElement">
Choose not to answer
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Education</th>
<td>Highest level of education:<br/>
<form name="form12" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup1" value="less_high" id="RadioGroup1_0">
Less than high school</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="some_high" id="RadioGroup1_1">
Some high school</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="high" id="RadioGroup1_2">
High school diploma</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="ged" id="RadioGroup1_3">
GED</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="some_college" id="RadioGroup1_4">
Some college</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="votech" id="RadioGroup1_5">
Vocational or technical</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="associates" id="RadioGroup1_6">
Associates degree</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="bachelor" id="RadioGroup1_7">
Bachelor's degree</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="postgrad" id="RadioGroup1_8">
Post graduate training</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="no_answer_school" id="RadioGroup1_9">
Choose not to answer</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="other_ed"
id="RadioGroup1_10">
Other<br/></label>
<div id="RadioGroup1_9"> <input style="visibility:hidden" type="text" name="fname" size="25" maxlength="25" id="RadioGroup1_11" /></div>
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Insurance</th>
<td>Choose your insurance-check all that apply<br>
<form name="form13" method="post" action="">
<p>
<label>
<input type="checkbox" name="insurance" value="privateins" id="insurance_0">
Private/HMO/PPO</label>
<br>
<label>
<input type="checkbox" name="insurance" value="medicaid" id="insurance_1">
Medicaid</label>
<br>
<label>
<input type="checkbox" name="insurance" value="medicare" id="insurance_2">
Medicare</label>
<br>
<label>
<input type="checkbox" name="insurance" value="va" id="insurance_3">
VA/Tricare</label>
<br>
<label>
<input type="checkbox" name="insurance" value="noins" id="insurance_4">
No insurance</label>
<br>
<label>
<input type="checkbox" name="insurance" value="noknowins" id="toggleInsurance">
</label>
<label>Choose not to answer</label>
<br>
<label>
<input type="checkbox" name="insurance" value="no_ans_ins" id="insurance_6">
</label>
Do not know<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Income</th>
<td>Gross income of your household<br>
<form name="form14" method="post" action="">
<p>
<label>
<input type="radio" name="income" value="tenk" id="income_0">
Less than $10,000</label>
<br>
<label>
<input type="radio" name="income" value="fifteenk" id="income_1">
Less than $15,000</label>
<br>
<label>
<input type="radio" name="income" value="twentyk" id="income_2">
Less than $20,000</label>
<br>
<label>
<input type="radio" name="income" value="twentyfivek" id="income_3">
Less than $25,000</label>
<br>
<label>
<input type="radio" name="income" value="thirtyfivek" id="income_4">
Less than $35,000</label>
<br>
<label>
<input type="radio" name="income" value="fiftyk" id="income_5">
Less than $50,000</label>
<br>
<label>
<input type="radio" name="income" value="seventyfivek" id="income_6">
Less than $75,000</label>
<br>
<label>
<input type="radio" name="income" value="dontknow" id="income_7">
I don't know</label>
<br>
<label>
<input type="radio" name="income" value="no_answer_income" id="income_8">
Choose not to answer</label>
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<h3><i can't post one than one link>Injury Information</a></h3>
<div>
<p>
blahlbalh
</p>
</div>
</div>
</div>
</body>
</html>

You can bind events to your accordion, either on the object or when you create it.
So change your $('#accordion').accordion(); to
$('#accordion').accordion({
changestart: function() {
window.scrollTo(0, 0);
}
});
The changestart event will fire every time the accordion changes (on click or what your event for it is).

Try
object.scrollIntoView(); // moves the viewport
or
window.scrollTo(0,0); // scrolls the window
hard to guess where based on your post, but perhaps
$('[name*="RadioGroup1"]').click(function() {
$(this).scrollIntoView();
Or have a look here: How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

Categories