I have four radio buttons (fixed,percentage,monthly,yearly), two buttons have common fields and other two have common fields. I created two divs one for fixed and percentage and other for monthly and yearly with add more button. The problem is when I enter data for monthly div (with multiple rows), I get the data but the 0th position is blank which gets stored in the database as 0. The solution for this is to have only one div and based on the radio button I just need to hide and show fields, that's what I want.
HTML Code for labels
<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
<div class="col-lg-10" required>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
<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="comission_type" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="2">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Monthly</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="3">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Yearly</span>
</label>
</div>
Html code for fixed/percentage div
<div id="fixPerDiv" style="display:block;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id = 'commision_tbl' >
<tr>
<td width = '20%'>Start price</td>
<td width = '20%'>End price</td>
<td width = '20%'>Start date</td>
<td width = '20%'>End date</td>
<td width = '20%'>Comission</td>
<td> </td>
</tr>
<tr>
<td><input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /></td>
<td><input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required"/></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><input type="number" name="commissions_amount[]" class="form-control" value="" placeholder="Commision price" required="required"/></td>
<td> </td>
</tr>
<tr>
<td colspan="6" align = "center">
<input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Html for monthly/fixed div
<div id="monYearDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id = 'commision_tb2' >
<tr>
<td width = '30%'>Start date</td>
<td width = '30%'>End date</td>
<td width = '30%'>Comission</td>
<td> </td>
</tr>
<tr>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><input type="number" name="commissions_amount[]" class="form-control" placeholder="Commision price" required="required"/></td>
<td> </td>
</tr>
<tr>
<td colspan="4" align = "center">
<input type="button" value="Add More" id="price_addmore" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Jquery code:
<script>
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=comission_type]').change(function() {
if (this.value == '0' || this.value == '1') {
$("#fixPerDiv").css("display","block");
$("#monYearDiv").css("display","none");
}
else if (this.value == '2' || this.value == '3') {
$("#fixPerDiv").css("display","none");
$("#monYearDiv").css("display","block");
}
});
});
</script>
So you're trying to use the value to toggle? Well, when you're getting the value, you're using this.value -- I've changed that to using jQuery's $(this).val()
Also, rather than using the ifs that you're using, I used a switch case -- easier on my old eyes.
If these aren't quite what you're looking for, let me know. I'll edit the javascript depending on your comments if you need.
So, in examining your comment, I realized that I'd totally missed the problem. What you might want to consider is to create EACH form as a separate entity -- the problem you're encountering happens when you have multiple fields with the same name (as start_date and end_date which appear when either form is displayed).
I've edited the demo to create each toggled element as its own form, and in this iteration, when you click the 'add more' button, it's simply logging the serialized form data to the console, so as to show that you aren't getting empty form data in the serialized stream.
Hope this helps!
$(document).ready(function() {
$('input[type=radio][name=comission_type]').on("change", function() {
toggleDivs($(this).val())
});
$("input[type='button']" ).on("click", function(){
console.log($(this).parents("form").serialize() );
})
function toggleDivs(toggleVal) {
console.log(toggleVal)
switch (toggleVal) {
case '0':
case '1':
$("#fixPerDiv").show();
$("#monYearDiv").hide();
break;
case '2':
case '3':
$("#fixPerDiv").hide();
$("#monYearDiv").show();
break;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
<div class="col-lg-10" required>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
<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="comission_type" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="2">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Monthly</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="3">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Yearly</span>
</label>
</div>
<form name="fixedForm">
<div id="fixPerDiv" style="display:block;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='commision_tbl'>
<tr>
<td width='20%'>Start price</td>
<td width='20%'>End price</td>
<td width='20%'>Start date</td>
<td width='20%'>End date</td>
<td width='20%'>Comission</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" />
</td>
<td>
<input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required" />
</td>
<td>
<div class="input-with-icon">
<input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required" /><span class="icon icon-calendar input-icon"></span></div>
</td>
<td>
<div class="input-with-icon">
<input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required" /><span class="icon icon-calendar input-icon"></span></div>
</td>
<td>
<input type="number" name="commissions_amount[]" class="form-control" value="" placeholder="Commision price" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
<form name="monYearForm">
<div id="monYearDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='commision_tb2'>
<tr>
<td width='30%'>Start date</td>
<td width='30%'>End date</td>
<td width='30%'>Comission</td>
<td> </td>
</tr>
<tr>
<td>
<div class="input-with-icon">
<input type="text" data-provide="datepicker" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required" /><span class="icon icon-calendar input-icon"></span></div>
</td>
<td>
<div class="input-with-icon">
<input type="text" data-provide="datepicker" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required" /><span class="icon icon-calendar input-icon"></span></div>
</td>
<td>
<input type="number" name="commissions_amount[]" class="form-control" placeholder="Commision price" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="Add More" id="price_addmore" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
Related
I added a checkbox inside a for loop, so I want only the checkbox that is checked to have a name attribute.
I tried but when I clicked on the second checkbox, the name of the first attribute is not removed.
Here is my code :
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
$('select ,input[type=checkbox] ').on('change', function() {
var selector = $(this).closest("tr")//get closest tr
//get select valus
var id = selector.attr('data-id');
// var package_name = selector.find('.visa_type').val();
var processing_type = selector.find(".processing_type option:selected").text();
// alert(processing_type)
var processing_price = selector.find(".processing_type option:selected").val();
// alert(processing_price)
var add = selector.find(".package_price").text(processing_price)
var total = add.val()
var date = selector.find('.travel_date').val();
if(selector.find('input[type=checkbox]').prop("checked") == true){
//id
selector.find('.id').attr('name','id')
//visa_type
selector.find('.visa_type').attr('name','visa_type');
//processing_type
selector.find(".processing_type").attr('name','processing_type');
//traveldate
selector.find('.travel_date').attr('name','travel_date');
//total
selector.find(".package_price").attr('name','total','value',total)
}else if(selector.find('input[type=checkbox]').prop("checked") == false){
//id
selector.find('.id').attr('name','')
//visa_type
selector.find('.visa_type').attr('name','');
//processing_type
selector.find(".processing_type").attr('name','');
//traveldate
selector.find('.travel_date').attr('name','');
//total
selector.find(".package_price").attr('name','')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="flip-scroll">
<thead>
<tr>
<th scope="col">Visa Option</th>
<th scope="col">Processing Type</th>
<th height="60" scope="col">Travel Date</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="valid-container">
<input type="hidden" class="id" value="1">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days single visa">90 days single visa</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="15000" selected="">Normal</option>
<option value="20000">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">15000</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="2">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="30 days">30 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="11" selected="">Normal</option>
<option value="22">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">11</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="3">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days">90 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="22" selected="">Normal</option>
<option value="33">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">22</output>.00</td>
</tr>
</tbody>
</table>
As you need to select only one checkbox at a time you can remove checked from other checkboxes whenever any checkbox is checked using $('tbody > tr .checkbox').not(this).prop('checked',false); then you just need to loop through your trs to add or remove name attributes.
Demo Code:
$('input[type=checkbox] ').on('change', function() {
$('tbody > tr .checkbox').not(this).prop('checked',false);//remove checked from other checkbox
//loop thrugh trs
$("tbody > tr").each(function() {
//add or remove name attribute
var selector = $(this)
if (selector.find('input[type=checkbox]').prop("checked") == true) {
selector.find('.visa_type').attr('name', 'visa_type');
selector.find(".processing_type").attr('name', 'processing_type');
selector.find('.travel_date').attr('name', 'travel_date');
} else if (selector.find('input[type=checkbox]').prop("checked") == false) {
selector.find('.visa_type').attr('name', '');
selector.find(".processing_type").attr('name', '');
selector.find('.travel_date').attr('name', '');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="flip-scroll">
<thead>
<tr>
<th scope="col">Visa Option</th>
<th scope="col">Processing Type</th>
<th height="60" scope="col">Travel Date</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="valid-container">
<input type="hidden" class="id" value="1">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days single visa">90 days single visa</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="15000" selected="">Normal</option>
<option value="20000">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">15000</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="2">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="30 days">30 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="11" selected="">Normal</option>
<option value="22">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">11</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="3">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days">90 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="22" selected="">Normal</option>
<option value="33">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">22</output>.00</td>
</tr>
</tbody>
</table>
I am Using MVC,Bootstrap in my project .I have Submit button to save data .my design consist of bootstrap nav tabs.
Now my problem is when I save data then I want to change my tab.
My flow is as below
I enter data in first tab then click submit button.
2.Ajax call saves data.after ajax call I wrote tab change tag $('.nav-tabs a[href="#Dependent"]').tab('show'); It changes tab successfully.
3.But after completion debugger again controller is executed and ActionResult index gets executed which then returns index view and then page is reloaded. and my tab is again changed to default first tab
So my problem is how to how to keep changed tab after saving and page reload after save state.
below is my index.chtml only tabs
My Information #*data-toggle="tab"*#
Dependent Information
Finalize
<div class="tab-content well">
<div class="tab-pane active " id="info">
<form data-toggle="validate" role="form" id="defaultForm" method="post">
<table class="table">
<tbody>
<tr>
<td class="auto-style4"></td>
<td style="text-align: center" class="auto-style3"></td>
<td class="auto-style6"> </td>
<td class="auto-style7"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="FirstName"> First Name</label>
</td>
<td class="text-center">
<label for="MiddleName">Middle Name</label>
</td>
<td class="text-center">
<label for="LastName">Last Name</label>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td>
<input type="text" class="form-control" id="FirstName" placeholder="FirstName" required="required" />
</td>
<td>
<input type="text" class="form-control" id="MiddleName" placeholder="MiddleName" />
</td>
<td>
<input type="text" class="form-control" id="LastName" placeholder="LastName" required="required" />
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="DOB">Date Of Birth</label>
</td>
<td>
<input type="text" class="form-control" id="DOB" placeholder="MM/DD/YY" required="required" />
</td>
<td>
<label for="Age">Age</label> <input type="text" class="form-control" id="MyAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="Department">Department</label>
</td>
<td>
<div class="dropdown">
<select id="ddDept" class="btn dropdown-toggle"><option></option></select>
</div>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<label for="DOJ">Date Of Joining</label>
</td>
<td>
<input type="text" class="form-control" id="DOJ" placeholder="MM/DD/YY" required="required" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="GrossSalary">Gross Salary</label>
</td>
<td>
<input type="text" class="form-control" id="GrossSalary" placeholder="GrossSalary" required="required" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="Tax">Tax</label>
</td>
<td>
<div class="dropdown">
<select id="ddTax" class="btn dropdown-toggle" onchange="calculateNetsal()"><option></option></select>
</div>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<label for="NetSalary">Net Salary</label>
</td>
<td>
<input type="text" class="form-control" id="NetSalary" placeholder="NetSalary" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-sm btn-primary" value="Create" id="btnAdd" onclick="TabChange(); ">Save and Next</button>
<button type="submit" class="btn btn-sm btn-primary" id="btnClear" onclick="clear();" >Clear</button>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
#*DEPENDENT*#
<div class="tab-pane " id="Dependent">
<form id="Dependent" method="post" action="">
<table class="table">
<tbody>
<tr>
<td class="auto-style4"> </td>
<td style="text-align: center" class="auto-style3"></td>
<td class="auto-style6"> </td>
<td class="auto-style7"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td class="text-center">
<label for="SDOB">Date Of Birth</label>
</td>
<td class="text-center">
<label for="Age">Age</label>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="Spouse">Spouse</label>
</td>
<td>
<input type="text" class="form-control" id="Name" placeholder="Name" />
</td>
<td>
#* <input id="sdob" type="text" />*#
<input type="text" class="form-control" id="S1DOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="SAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="CName">Name</label>
</td>
<td class="text-center">
<label for="CDOB">Date Of Birth</label>
</td>
<td class="text-center">
<label for="Age">Age</label>
</td>
<td>
<label for="Relation">Relation</label>
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck1">Child 1</label>
<input type="checkbox" class="custom-control-input" id="Chck1" value="1" onchange="validationCheck(Chck1); enableTextBox();" onclick=" PopulateDropDownList()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="CName" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C1DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C1Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation" class="btn dropdown-toggle" disabled><option></option></select>
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck2">Child 2</label>
<input type="checkbox" class="custom-control-input" id="Chck2" onchange="validationCheck(Chck2); enableTextBox();" value="2" onclick=" PopulateDropDownList2()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C2Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C2DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C2Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation2" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck3">Child 3</label>
<input type="checkbox" class="custom-control-input" id="Chck3" onchange="validationCheck(Chck3); enableTextBox();" value="3" onclick=" PopulateDropDownList3()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C3Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C3DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C3Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation3" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck4">Child 4</label>
<input type="checkbox" class="custom-control-input" id="Chck4" onchange="validationCheck(Chck4); enableTextBox();" value="4" onclick=" PopulateDropDownList4()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C4Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C4DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C4Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation4" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
#* PARENT*#
<tr>
<td></td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkFather" value="Father" OnChange="validationCheck1(chkFather); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkFather">Father</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkMother" value="Mother" OnChange="validationCheck1(chkMother); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkMother">Mother</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkfatherinlaw" value="FatherInLaw" OnChange="validationCheck1(chkfatherinlaw); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkfatherinlaw">Father In Law</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkmotherInLaw" value="MotherInLaw" OnChange="validationCheck1(chkmotherInLaw); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkmotherInLaw">Mother In Law</label>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td>
<input type="text" class="form-control" id="FName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="MName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="FInLName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="MInLName" placeholder="Name" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="DOB">Date Of Birth</label>
</td>
<td>
<input type="text" class="form-control" id="FDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="MDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="FInLDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="MInLDOB" placeholder="MM/DD/YY" />
</td>
</tr>
<tr>
<td class="text-center"></td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="FDCh" onchange="loaddropdown(); enableTextBox();" unchecked>
<label class="custom-control-label" for="FDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="MDCh" onchange="loaddropdown2();enableTextBox();" unchecked>
<label class="custom-control-label" for="MDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="FInLDCh" onchange="loaddropdown3(); enableTextBox();" unchecked>
<label class="custom-control-label" for="FInLDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="MInLDCh" onchange="loaddropdown4(); enableTextBox();" unchecked>
<label class="custom-control-label" for="MInLDCh">I Dont Know DOB</label>
</div>
</td>
</tr>
<tr>
<td class="text-center"></td>
<td align="center">
<div class="dropdown">
<select id="ddFAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="FAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddMAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="MAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddFInLAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="FInLAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddMInLAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="MInLAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-sm btn-primary" id="btnAdd1" onclick="TabChange();">Save and Next</button>
</td>
<td>
<button type="submit" class="btn btn-primary" id="btnClear" onclick="clear1();">Clear</button>
</td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#btnAdd").click(function () {
debugger;
$.ajax(
{
type: "POST",
url: "/Home/Create11",
data: {FirstName:$("#FirstName").val(), MiddleName:$("#MiddleName").val(),
LastName: $("#LastName").val(),
DOB: $("#DOB").val(),
Age: $("#MyAge").val(),
Department: $("#ddDept").val(),
DOJ: $("#DOJ").val(),
GrossSal:$("#GrossSalary").val(),
Tax: $("#ddTax option:selected").text(),
NetSal: $("#NetSalary").val()
},
async:true,
success: function (data) {
}
});
$('.nav-tabs a[href="#Dependent"]').tab('show');
});
});
</script>
Handle the onsubmit event into the form tag and prevent that:
<form data-toggle="validate" role="form" id="defaultForm" method="post" onsubmit="event.preventDefault();">
In the controller Index method create a optional parameter for the selected tab. Default to tab 0 but when you call from the javascript code set the tab to the one you want.
I am trying to intercept changes to a WooCommerce Extra product options datetimepicker component. Essentially, it's just a datetimepicker.
I have:
<script>
var box = document.getElementById("myDateTimePicker");
//console.log("#devlog: Active");
box.addEventListener("blur", function(){
var selectedDate = box.value;
console.log(selectedDate);
});
</script>
Which is almost working. It outputs the previous value contained by the datetimepicker, not the value it has just been changed to.
I've tried a range of events in the eventListener but nothing seems to do the trick. Could some kind soul put me out my misery and clue me in to how to get the NEW value from the datetimepicker when it is changed? Thanks.
Update:
Here is the html from the form. The component I'm fighting with is the date-picker inside the last <tr>.
<form class="cart" action="http://blahblahblah:8888/product/191/" method="post" enctype='multipart/form-data'>
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="name_of_skater,tel_number,which_day" />
<table class="thwepo-extra-options thwepo_simple" cellspacing="0">
<tbody>
<tr>
<td colspan="2" class="section-title">
<h3 class="">Mandatory information</h3></td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Name of skater</label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="text" id="name_of_skater" name="name_of_skater" value="" class="thwepof-input-field validate-required">
</td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Telephone number</label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="tel" id="tel_number" name="tel_number" value="" class="thwepof-input-field validate-required">
</td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Pick a day <b>only</b></label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="text" autocomplete="off" id="which_day" name="which_day" value="" class="thwepof-input-field thwepof-date-picker validate-required" data-readonly="no">
</td>
</tr>
</tbody>
</table>
<div class="quantity hidden">
<input type="hidden" id="quantity_5e583e6ca4c48" class="qty" name="quantity" value="1" />
</div>
<button type="submit" name="add-to-cart" value="191" class="single_add_to_cart_button button alt">Add to basket</button>
</form>
You can try this:
document.getElementById('myDateTimePicker').onChange = function() {
console.log(document.getElementById('myDateTimePicker').value);
}
You might be able to use this.value, but I wrote it the long way just in case.
Hope this helps.
I have an html table with n number of rows and 4 columns. Inside each row td I have 2 children elements- label and an input. I want to check the value of input under 2nd td when an onblur event occurs at input under 3rd td.
I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td (ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as
function sum_cr() {
alert('Hi');
alert($(pThis).parent().eq(2).children('accno').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
But my javascript code fails. Can anybody help me to get the value?
JSfiddle: https://jsfiddle.net/nidheeshmtr/nmku2gq1/4/
function sum_cr(ele) {
alert('Hi')
alert('using prev(): '+$(ele).parent('td').prev('td').find('input').val());
//or you can use below for input value under 2nd td element
alert('using nth-child(): '+$('tr td:nth-child(2)').find('input').val());
//if you know attributes of TD tag, u can use below
alert('using attribute selector: '+$('td[headers="ACNO"]').find('input').val());
//by using siblings, get the parent 2nd sibling
alert('using siblings(): '+$(ele).parent().siblings(':nth-child(2)').find('input').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
Your selector is not valid. You have to pass this in the function call. Try the following way:
function sum_cr(that) {
alert($(that).parent('td').prev('td').find('input').val());
}
Run code snippetExpand snippet
I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td(ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
The context is not valid...
Pass the 'this' context from html code to the sum_cr() method as a parameter and define the method as follows.
function sum_cr(that) {
alert($(that).parent('td').prev('td').find('input').val());
}
function sum_cr(ele) {
alert($('tr td:nth-child(2) input').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
You can define an ID for each input and then get their value as you want
function sum_cr() {
var elem = $('#xyz').val();
alert(elem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input id="xyz" name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
Check whether this helps or not?
I have a registration page, in which I have a phone field, when I select that field the popup show underneath the other elements.
I want to know that why the phone field options are shown underneath the below options?
Please refer:
The code that I am using for:
sign-up.jsp
enter code here
<form action="Controller" method="GET" id="form">
<input type="hidden" name="command" value="registration"/>
<table class="sign-up-div-table">
<tr>
<td colspan="2"> <h3>Join us for free</h3> </td>
</tr>
<tr>
<td> <input type="text" name="firstname" class="form-control" placeholder="First name" required/> </td>
<td> <input type="text" name="lastname" class="form-control" pattern="^[A-Z][-a-zA-Z]+$" placeholder="Last name" required/> </td>
</tr>
<tr>
<td colspan="2"> <input type="email" name="email" class="form-control" placeholder="Email address" required onkeyup="check(this.value)"/> </td>
</tr>
<tr>
<td colspan="2"> <div id = "mydiv"></div> </td>
</tr>
<tr>
<td colspan="2"> <input type="password" name="password" class="form-control" placeholder="Password" required/> </td>
</tr>
<tr>
<td> <jsp:include page="demo.html"></jsp:include> </td>
</tr>
<tr>
<td colspan="2"> <div id = "numberdiv"></div> </td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-xs">
<span class="input-group-addon" style="width: 100px; background-color:#a2a587; color: white;" >Birthday</span>
<select name="date" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select date </option>
<jsp:include page="dates.jsp"></jsp:include>
</select>
<select name="month" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select month </option>
<jsp:include page="months.jsp"></jsp:include>
</select>
<select name="year" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select year </option>
<jsp:include page="years.jsp"></jsp:include>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width: 100px;">Gender</span>
<select class="form-control" name="gender" style="width: 300px;" required>
<option disabled selected value> select gender </option>
<option>male</option>
<option>female</option>
<option>other</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width: 100px;">Position</span>
<select class="form-control" name="position" style="width: 300px;" required>
<option disabled selected value> select position </option>
<option>Writer</option>
<option>Author</option>
<option>Contributor</option>
<option>Teacher</option>
<option>Student</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="left"> <input type="submit" value="Get Started" class="btn btn-success btn-lg"/> </td>
<td></td>
</tr>
</table>
</form>