I implemented bootstrap switch and changed the status to Active and Inactive. I wanted to capture the status of bootstrap switch after toggling in a table. But whenever I try to capture the status, it just shows On always. When bootstrap switch is toggled as Inactive, status should be captured as off, but it isn't happening.
JSFiddle link: https://jsfiddle.net/4erLr6ak/
HTML CODE:
<p class="lead">Multiple prices</p>
<div class="col-md-2">
<input type="text" id="type" name="type" value="" class="login password-field form-control" placeholder="Type of ticket" />
</div>
<div class="col-md-2">
<select class="form-control" id="multi">
<option value="USD">$ USD</option>
<option value="SGD">$ SGD</option>
<option value="EUR">€ EUR</option>
<option value="AUD">$ AUD</option>
<option value="JPY">¥ JPY</option>
<option value="CHN">¥ CHN</option>
<option value="THB">฿ THB</option>
<option value="MYR">RM MYR</option>
</select>
</div>
<div class="col-md-2">
<input type="number" id="ticketprice" name="price" value="" class="login password-field form-control" placeholder="Price of ticket" />
</div>
<div class="col-md-2">
<input type="checkbox" name="my-checkbox" data-on-text="Active" data-off-text="Inactive" checked>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="confirm">Confirm</button>
</div>
<table class="table table-bordered multtable" style="margin-top: 7%;">
<thead>
<tr>
<th>Type of ticket</th>
<th>Price of ticket</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
Javascript code:
$('#confirm').click(function(e) {
var type = $('#type').val();
var currency = $("#multi option:selected").val();
var mprice = $('#ticketprice').val();
var status = $("[name='my-checkbox']").val();
$('.multtable').append('<tr><td>' + type + '</td><td>' + currency + ' ' + mprice + '</td><td>' + status + '</td></tr>');
/*Clear the values in text boxes after adding to table*/
document.getElementById("type").value = "";
document.getElementById("ticketprice").value = "";
console.log(e);
})
$("[name='my-checkbox']").bootstrapSwitch();
to check if the checkbox is checked use:
var status = $("[name='my-checkbox']").is(':checked');
instead of:
var status = $("[name='my-checkbox']").val();
you can use the true/false output to set your value accordingly
Related
In my scenario just select the list box options, that values and text going to append to the table rows, but im facing small issues, user not allow to select same options (already selected options) and user not allow to append same values in the table.. if user select same option show alert messages like, 'you are already selected, select another option' like that..
here is my sample code fiddle..
Fiddle
Sample snippet here..
$("#excist_supp").on("change", function() {
$(".indexDrop").hide();
var newText = $("#excist_supp option:selected").text();
var newValue = $("#excist_supp option:selected").val();
$("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');
$("#letterTable tr").each(function(i) {
var count = (i) - 1;
if (i === 0) return;
var input1 = $(this).find('.newStyle1');
var input2 = $(this).find('.newStyle2');
// id
input1.eq(0).attr("id", "sm_supp" + count); // Text fields
input2.eq(0).attr("id", "sm_code" + count);
// name
input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields
input2.eq(0).attr("name", "sm_code[" + count + "]");
});
});
/* compare two fields */
$('#excist_supp').change(function() {
$("#letterTable tr").each(function(i) {
var listVal = $('#excist_supp').val();
var tableVal = $('.newStyle2').val();
var nawTab = JSON.stringify(tableVal);
if (listVal == nawTab) {
alert('Matching!');
return true;
} else {
alert('Not matching!');
return false;
}
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<div class="row">
<!-- Existing Suppliers -->
<div class="col-sm-6">
<div class="col-12">
<div class="row">
<div class="col-12">
<input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers..">
<div class="selector">
<select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
<option class="indexDrop">Choose Existing Suppliers</option>
<option value="0000">Komal </option>
<option value="0001">Ranjeet</option>
<option value="0002">Vishal </option>
<option value="0003">Gaurav</option>
<option value="0004">Dhanpat</option>
<option value="0005">Joe</option>
<option value="0006">Gowri</option>
<option value="0007">shankar</option>
<option value="0008">Dhanpat</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="col-5">
<div class="container">
<div class="row clearfix">
<div class="table-wrapper">
<div class="table-scroll">
<table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;">
<thead>
<tr style="background-color: #680f79;color: #fff;">
<th class="text-center">Supplier Name</th>
<th class="text-center">Supplier Code</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="mytbody" style="text-align: center;">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
With $("#excist_supp").on("change".... and $('#excist_supp').change(function()... you are attaching the same event to the same element twice.
You can create a temporary array of all the used list values and create a function to check if the current value is exist in that array or not using Array.prototype.includes().
Try the following way:
$("#excist_supp").on("change", function() {
if(!checkValue()){
$(".indexDrop").hide();
var newText = $("#excist_supp option:selected").text();
var newValue = $("#excist_supp option:selected").val();
$("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp" readonly></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code" readonly></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');
$("#letterTable tr").each(function(i) {
var count = (i) - 1;
if (i === 0) return;
var input1 = $(this).find('.newStyle1');
var input2 = $(this).find('.newStyle2');
// id
input1.eq(0).attr("id", "sm_supp" + count); // Text fields
input2.eq(0).attr("id", "sm_code" + count);
// name
input1.eq(0).attr("name", "sm_supp[" + count + "]"); // Text fields
input2.eq(0).attr("name", "sm_code[" + count + "]");
});
}
});
/* compare two fields */
var temp = [];
function checkValue() {
var listVal = $('#excist_supp').val();
var tableVal = $('.newStyle2').val();
var nawTab = JSON.stringify(tableVal);
if (temp.includes(listVal)) {
alert('Matching!');
return true;
} else {
alert('Not matching!');
temp.push(listVal)
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<div class="row">
<!-- Existing Suppliers -->
<div class="col-sm-6">
<div class="col-12">
<div class="row">
<div class="col-12">
<input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers..">
<div class="selector">
<select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
<option class="indexDrop">Choose Existing Suppliers</option>
<option value="0000">Komal </option>
<option value="0001">Ranjeet</option>
<option value="0002">Vishal </option>
<option value="0003">Gaurav</option>
<option value="0004">Dhanpat</option>
<option value="0005">Joe</option>
<option value="0006">Gowri</option>
<option value="0007">shankar</option>
<option value="0008">Dhanpat</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="col-5">
<div class="container">
<div class="row clearfix">
<div class="table-wrapper">
<div class="table-scroll">
<table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;">
<thead>
<tr style="background-color: #680f79;color: #fff;">
<th class="text-center">Supplier Name</th>
<th class="text-center">Supplier Code</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody id="mytbody" style="text-align: center;">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to show alert popup when the user didn't select any value from the dropdown
Here is my html :
<div id="reminder" class="popup-layout">
<form id="reminderForm" method="post">
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div id="errorInPopup" class="error displayInlineBlock"></div>
<div class="modal-header">
<h5 class="modal-title">select_followup</h5>
</div>
<div class="modal-body">
<table class="width100percent">
<tbody><tr>
<td>
<label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle">close_with_reminder</label> </td>
<td class="textAlignRight">
<input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here"> </td>
</tr>
<tr>
<td colspan="2">
<label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width">close_without_reminder</label> </td>
</tr>
<tr>
<td colspan="2">
<select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
<option value="0">Select value</option>
<option value="6">Advertisements</option>
<option value="4">Another reason:</option>
<option value="17">Checking financial terms and conditions</option>
<option value="16">Company not leasable</option>
<option value="18">Future potential clients </option>
<option value="20">Offer is of vehicle type in which we do not do business</option>
<option value="12">Open application</option>
<option value="13">Order</option>
<option value="10">Other ticket already in progress</option>
<option value="11">Out of office reply </option>
<option value="50">Portal, ad removed, payment, offer withdrawn</option>
<option value="7">SPAM</option>
<option value="9">Unsubscribe MFO Mailing</option>
<option value="2">Vehicle/part is sold (indicate order number!)</option>
<option value="8">Vehicle/part not on stock (is looking for something else)</option>
<option value="1">Vehicles too expensive</option>
</select> </td>
</tr>
</tbody></table>
</div>
<div class="modal-footer">
<input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone"> </div>
</div>
</div>
</div>
</form>
</div>
And i have tried like this in my js function page:
var TICKET = {};
TICKET.preview = {
init: function () {
this.bindUI();
},
bindUI: function () {
var self = this;
$('#send').click(function () {
self.followupPopup();
});
$(document).on('change', 'input[name=reminder]', function () {
$('#sendPreview').show();
if ($(this).val() == 1) {
$('#reminderdate').datetimepicker({
showOn: "button",
buttonImage:vbdBaseUrl + '/images/calendar.png',
dateFormat:'dd-mm-yy',
timeFormat: 'HH:mm',
buttonImageOnly: true,
controlType: 'select',
showWeek: true,
firstDay: 1,
oneLine : true,
});
/**
* To display the tomorrows date and time as 8AM by default in datepicker input box.
*/
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
tomorrow.setHours(8);
tomorrow.setMinutes(0);
$('#reminderdate').datetimepicker('setDate', new Date(tomorrow));
$('#reminderText').show();
$('#reminderdate').show();
$('.ui-datepicker-trigger').show();
$('#reminderclosereason').hide();
$('#saveReminder').show();
return true;
}
$('#reminderText').hide();
$('#reminderdate').hide();
$('.ui-datepicker-trigger').hide();
$('#reminderclosereason').show();
$('#saveReminder').show();
});
$('#reminderForm').submit(function() {
if ('' == $('#reminderclosereason').val() && $('input[name=reminder]:checked').val()!= 1) {
$('#errorInPopup').html('please select close reason');
return false;
}
});
},
followupPopup: function () {
var request = BAS.ajax;
request.url = vbdBaseUrl + '/ticket/mail/follow-up';
request.method = 'POST';
request.data = {
ticketId : ticketId
}
request.ajaxRequest(function(response) {
$('#reminderPopup').html(response);
$('#reminderPopupdrag').draggable();
$('.popup-dragable').show();
});
}
};
$(function () {
TICKET.preview.init();
});
I have tried a lot of solution. but none of the things work in my case.
I haven't understood what wrong in this case. i am trying to check the condition if dropdown value not selected or drop-down value is 0 I would like to show alert
Can anyone help me
Thanks in advance.
It turns out the problem was simple - the alert IS working, it just doesn't come before the default behaviour of submit, which includes a page refresh.
If you prevent the default from happening, you can validate and then decide what to do from there. Attached is a working snippet.
$('#reminderForm').submit(function(e) {
e.preventDefault(); // Stop your form from submitting.
if ('0' === $('#reminderclosereason').val()) {
alert();
$('#errorInPopup').html('Please select close reason');
return false;
} else {
this.submit();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reminder" class="popup-layout">
<form id="reminderForm" method="post">
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div id="errorInPopup" class="error displayInlineBlock"></div>
<div class="modal-header">
<h5 class="modal-title">select_followup</h5>
</div>
<div class="modal-body">
<table class="width100percent">
<tbody>
<tr>
<td>
<label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle">close_with_reminder</label> </td>
<td class="textAlignRight">
<input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here"> </td>
</tr>
<tr>
<td colspan="2">
<label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width">close_without_reminder</label> </td>
</tr>
<tr>
<td colspan="2">
<select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
<option value="0">Select value</option>
<option value="6">Advertisements</option>
<option value="4">Another reason:</option>
<option value="17">Checking financial terms and conditions</option>
<option value="16">Company not leasable</option>
<option value="18">Future potential clients </option>
<option value="20">Offer is of vehicle type in which we do not do business</option>
<option value="12">Open application</option>
<option value="13">Order</option>
<option value="10">Other ticket already in progress</option>
<option value="11">Out of office reply </option>
<option value="50">Portal, ad removed, payment, offer withdrawn</option>
<option value="7">SPAM</option>
<option value="9">Unsubscribe MFO Mailing</option>
<option value="2">Vehicle/part is sold (indicate order number!)</option>
<option value="8">Vehicle/part not on stock (is looking for something else)</option>
<option value="1">Vehicles too expensive</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone"> </div>
</div>
</div>
</div>
</form>
</div>
Try this, don't forget to Install Jquery :-)
if ($("#reminderclosereason option:selected").val() === "0") {
console.log("Hi");
}
Try this
$(document).ready(function(){
$('#reminderForm').submit(function(e) {
e.preventDefault();
if ($(document).find('#reminderclosereason').val())==0) {
alert('please select close reason');
$('#errorInPopup').html('please select close reason');
return false;
}
});
});
Don't forget to import jquery.js before you call this .
Hope this will help you
I am trying to calculate the total value of the selected value. In one row I have three options one is to select room that is one only, second is to select any one option and the same with the third column. When I am selecting options, it shows the correct "total Amount". Also on clicking on add room one new row with same options appears and there is no limit to add rows. But now what I am trying to do is When someone select values from different rows, "Total Amount" must show the total selected values.
Suppose, I have selected 1 room, 1st value is 5000 and 2nd value is 4000, then "Total Amount" is showing 9000. When I added one more row, in this again I selected 1 room, the 1st value is 6000 and the 2nd value is 9000. Now the " Total Amount" will show 24000 and this will work continuously on adding rows and selecting values.
Here is my HTML :
<table style="width: 100%;">
<tr style=" color: white;">
<th class="col-md-4 text-center" style="padding: 10px;">No. of Rooms : </th>
<th class="col-md-4 text-center" style="padding: 10px;">Adult's : </th>
<th class="col-md-4 text-center" style="padding: 10px;">Extra : </th>
</tr>
</table>
<table id="dataTable" style="width: 100%;">
<tr>
<td >
<select name="links" class="form-control person-3" action="post" id="myselect" onChange="document.getElementById('rooms').innerHTML = this.value;">
<option value="0" selected="selected">--select--</option>
<option value="1">1</option>
</select>
</td>
<td >
<select name="keywords" class="form-control person-1" action="post" id="myselect" onChange="document.getElementById('adults').innerHTML = this.value;">
<option value="0" selected="selected">--select--</option>
<option value="5000">1</option>
<option value="8000">2</option>
</select>
</td>
<td >
<select name="violationtype" class="form-control person-2" action="post" id="myselect" onChange="document.getElementById('extra').innerHTML = this.value;">
<option value="0" selected="selected">No Beds</option>
<option value="4000">Adult</option>
<option value="3000">Child below 12</option>
<option value="2000">Child below 7</option>
</select>
</td>
</tr>
</table>
<input type="button" value="Add Rooms" onclick="addRow('dataTable')" class="btn btn-primary" style="margin-top: 15px;" /><br><br>
<div class="row">
<div class="col-md-6" style="color: white;font-size: 20px;text-align: right;">Total Amount :</div>
<div class="col-md-6" style="color: white;font-size: 20px;text-align: left;">
<span class="addition"></span>
</div>
</div><br>
Here is my script through which I am calculating the total amount:
var add_1 =0;
var add_2 = 0;
var mul_3 = 0;
function displayValues() {
add_1 = parseInt($('.person-1').val());
add_2 = parseInt($('.person-2').val());
mul_3 = parseInt($('.person-3').val());
$(".addition-1").text(add_1);
$(".addition-2").text(add_2);
$(".multiplication_3").text(mul_3);
$(".addition").text( mul_3 *( add_1 + add_2) );
}
$(document).ready(function(){
$(".person-1").change(displayValues);
$(".person-2").change(displayValues);
$(".person-3").change(displayValues);
});
Here is the code to add rooms:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
Incomplete Code............. and existing has so many errors..
Try to make it work out .but addRow('dataTable'); defination missing.
`https://jsfiddle.net/asimshahiddIT/756tb80f/6/`
It seems you have same ID "myselect" for all select tag. Please give them unique IDs otherwise they'll misbehave.
Then if you are getting values from the class name what will be the case when one more row is added with same class names. Your logic will not work. Please try getting values with dynamic Ids provided to the select tag in each row.
`https://jsfiddle.net/asimshahiddIT/756tb80f/24/`
Please check the above link
Is this what you expected output
does this help?
$(document).ready(function(){
var dd1 =0;
var dd2 =0;
var dd3 =0;
var totalBillAmt = 0;
$("#myselect1").change(function(){ dd1 = Number($(this).val()); updateTotalPrice(); });
$("#myselect2").change(function(){ dd2 = Number($(this).val()); updateTotalPrice(); });
$("#myselect3").change(function(){ dd3 = Number($(this).val()); updateTotalPrice(); });
updateTotalPrice = function (){
totalBillAmt = dd1 + dd2 + dd3;
$("#totalPrice").text("total amount is:" + totalBillAmt);
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%;">
<tr style=" color: white;">
<th class="col-md-4 text-center" style="padding: 10px;">No. of Rooms : </th>
<th class="col-md-4 text-center" style="padding: 10px;">Adult's : </th>
<th class="col-md-4 text-center" style="padding: 10px;">Extra : </th>
</tr>
</table>
<table id="dataTable" style="width: 100%;">
<tr>
<td >
<select name="links" class="form-control person-3" action="post" id="myselect1" >
<option value="0" >--select--</option>
<option value="100">test option 1</option>
<option value="500">test option 2</option>
</select>
</td>
<td >
<select name="keywords" class="form-control person-1" action="post" id="myselect2" >
<option value="0" >--select--</option>
<option value="5000">another opt 1</option>
<option value="8000">another opt 2</option>
</select>
</td>
<td >
<select name="violationtype" class="form-control person-2" action="post" id="myselect3" >
<option value="0" >No Beds</option>
<option value="4000">Adult</option>
<option value="3000">Child below 12</option>
<option value="2000">Child below 7</option>
</select>
</td>
</tr>
</table>
<input type="button" value="Add Rooms" onclick="updateTotalPrice()" class="btn btn-primary" style="margin-top: 15px;" /><br><br>
<div id='totalPrice'></div>
<div class="row">
<div class="col-md-6" style="color: white;font-size: 20px;text-align: right;">Total Amount :</div>
<div class="col-md-6" style="color: white;font-size: 20px;text-align: left;">
<span class="addition"></span>
</div>
</div><br>
I am using angular table for display my data. But i have a issues with it.
i entered values in first page. when i go to second page, first page values still display. how i fix this.
my javascript file
Please check below screen to understand my issue.
$scope.tableParams = new NgTableParams({count:3}, {dataset:listOnhireContainers});
<table ng-table="tableParams"
class="table table-condensed table-bordered table-striped table-scroll">
<tbody style="width: 100%">
<tr ng-repeat="SelectedContainer in $data track by $index">
<td data-title="'Container No.'" ng-model="SelectedContainer.containerNo"
class="row-center"> {{SelectedContainer.containerNo}}</td>
<td data-title="'9 AM'" class="row-center form-group">
<div class="input-group">
<input type="text" class="form-control"
id=""
ng-change="ChangetoValAmFillRows(SelectedContaineraM[$index],$index,SelectedContainercheckDAM[$index])"
ng-pattern="/^(0|[+-][1-9])\d*(\.\d+)?$/"
ng-pattern-err-type="tempPattern"
ng-model="SelectedContaineraM[$index]" ng-readonly="truefalseAM[$index]"
ng-disabled="(SelectedContainercheckDAM[$index] | uppercase) == '-' || (SelectedContainercheckDAM[$index] | uppercase) == 'OFF' " />
<div class="input-group-btn">
<select name="addSymbol" style="width: initial" id="chkD"
ng-options="choice as choice for (idx, choice) in tempdrop.split(',')"
ng-model="SelectedContainercheckDAM[$index]" ng-disabled="truefalseDAM[$index]" class="form-control"
ng-change="tempdropchangeAM($index); SetcheckDAMTempSelected(SelectedContainercheckDAM[$index],$index,SelectedContaineraM[$index]);">
<option value="">--Select--</option>
</select>
</div>
</div>
</td>
<td data-title="'4 PM'" class="row-center form-group">
<div class="input-group">
<input type="text" class="form-control"
id="selected-container-tempt"
ng-change="ChangetoValPmFillRows(SelectedContainerpM[$index],$index,SelectedContainercheckDPM[$index])"
ng-pattern="/^(0|[+-][1-9])\d*(\.\d+)?$/"
ng-pattern-err-type="tempPattern"
ng-model="SelectedContainerpM[$index]" ng-readonly="truefalsePM[$index]"
ng-disabled="(SelectedContainercheckDPM[$index] | uppercase) == '-' || (SelectedContainercheckDPM[$index] | uppercase) == 'OFF' " />
<div class="input-group-btn">
<select name="addSymbol" style="width: initial" id="chkD"
ng-options="choice as choice for (idx, choice) in tempdrop.split(',')"
ng-model="SelectedContainercheckDPM[$index]" ng-disabled="truefalseDPM[$index]" class="form-control"
ng-change="tempdropchangePM($index); SetcheckDPMTempSelected(SelectedContainercheckDPM[$index],$index,SelectedContainerpM[$index]);">
<option value="">--Select--</option>
</select>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<script src=" https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<script>
var i=0;
currentRow = null;
$("button#savebutton").click(function(){
var cat = $("#cat-list").val();
var display = $("#displayname").val();
var subcat = $("#subcat-list").val();
var order = $("#privilage").val();
i++;
var new_row = "<tr id='row"+i+"' class='info'><td class='cat'>" + cat + "</td><td class='display'>" + display + "</td><td class='type'>" + subcat +"</td><td>"+order +"</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'>Edit</a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''>Delete</a></span></tr>";
if(currentRow){
$("table tbody").find($(currentRow)).replaceWith(new_row);
currentRow = null;
}
else{
$("table tbody").append(new_row);
}
});
$(document).on('click', 'span.deleterow', function () {
$(this).parents('tr').remove();
return false;
});
$(document).on('click', 'span.editrow', function () {
currentRow= $(this).parents('tr');
});
</script>
<script>
$(document).ready(function(){
$("#secondbtn").click (function(){
var category = $("#cat-list").val();
var display = $("#displayname").val();
var subcat = $("#subcat-list").val();
var privilage = $("#privilage").val();
alert(category);
$.ajax({
type:"POST",
url:"query1.php",
data:{display:display_name,category:category,subcat:pagename,privilage:privilage},
success:function(data){
alert("successfully updated");
}
});
});
});
</script>
<html>
<body>
<form method="POST" action="">
<label>Select your Category:</label>
<input type="text" id="cat-list"/>
</br>
<label> Display Name:</label>
<input type="text" name="display_name" id="displayname" d />
</div>
<label> Select your Subcategory:</label>
<input type="text" id="subcat-list" >
<label>Set Order</label>
<select name="privilage" id="privilage" required>
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
<div class="col-md-12">
<div class = "panel1">
<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="savebutton" onclick="getFirstClicked()" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
</div>
</div>
</form>
<form class="form-horizontal" role="form" id="chargestableForm">
<div class="col-md-12">
<table id="pTable" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
<thead style="background-color:#CCE5FF">
<tr>
<th>Category</th>
<th>DisplayName</th>
<th>Subcategory</th>
<th>Order</th>
<th colspan=2>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class = "panel2">
<button type="submit" name="import" id="secondbtn" > Import Database</button>
</div>
</div>
</form>
Context:In this code there is an html form,when adding the details in the form and clicks the add button there is a table row is created which is editable and delete. Then we can add the number of rows and that rows are added upto the table.I want to enter these table row values to a database when clicking the import button.