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>
Related
pushData = [];
//+ button when clicked
function myFunction() {
var custOfficeId = document.getElementById('customOfficeId').value;
var custOfficeName = $("#customOfficeId option:selected").text();
var fromDate = document.getElementById('fromDate').value;
var toDate = document.getElementById('toDate').value;
var consignmentNo = document.getElementById('consignmentNo').value;
var selectionName = "A";
var selectionId = 1;
var selecOff = {
custOfficeId,
custOfficeName,
fromDate,
toDate,
consignmentNo,
selectionId,
selectionName
};
console.log(selecOff);
pushData.push(selecOff);
console.log(pushData);
populateSelectionCustomTable();
}
function populateSelectionCustomTable() {
$("#tempTable tbody").html("");
for (var i = 0; i < pushData.length; i++) {
var r = pushData[i];
$("#tempTable tbody")
.append(
"<tr>" +
"<td>" +
r.custOfficeName +
"</td><td>" +
r.fromDate +
"</td><td>" +
r.toDate +
"</td>" +
"<td>" +
r.consignmentNo +
"</td>" +
"<td>" +
r.selectionName +
"</td>" +
"<td>" +
"<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
i +
"' class='deleteIcon'/>" +
"</td></tr></tbody>");
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required
name="customOfficeId" >
<option value="" disabled selected>Choose</option>
<option value=1>Office 1</option>
<option value=2>Office 2</option>
</select>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate"
onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate"
name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo"
required name="consignmentNo">
</div>
<div class="col-md-1">
<button onclick="myFunction()">+</button>
</div>
</div>
<table class="table table-bodered" id="tempTable">
<thead>
<th>Custom Office</th>
<th>From Date</th>
<th>To Date</th>
<th>Consignment No</th>
<th>Selection Name</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have added the "required" attribute in each of the input field and in select options above in html.But if i even didn't enter any data and click plus button it is getting pushed in table rather it should show me the validation required error. In "select" also i added the required field but the default is getting added in table automatically.How can i make this html5 required validation working here?
You can use checkValidity() to check if the fields in a form are valid.
https://www.w3schools.com/js/js_validation_api.asp
pushData = [];
//+ button when clicked
function myFunction() {
var custOfficeId = document.getElementById('customOfficeId').value;
var custOfficeName = $("#customOfficeId option:selected").text();
var fromDate = document.getElementById('fromDate').value;
var toDate = document.getElementById('toDate').value;
var consignmentNo = document.getElementById('consignmentNo').value;
var selectionName = "A";
var selectionId = 1;
var selecOff = {
custOfficeId,
custOfficeName,
fromDate,
toDate,
consignmentNo,
selectionId,
selectionName
};
console.log(selecOff);
if (document.getElementById("new-row").checkValidity()) {
pushData.push(selecOff);
console.log(pushData);
populateSelectionCustomTable();
} else {
alert('New row data is invalid or incomplete');
}
}
function populateSelectionCustomTable() {
$("#tempTable tbody").html("");
for (var i = 0; i < pushData.length; i++) {
var r = pushData[i];
$("#tempTable tbody")
.append(
"<tr>" +
"<td>" +
r.custOfficeName +
"</td><td>" +
r.fromDate +
"</td><td>" +
r.toDate +
"</td>" +
"<td>" +
r.consignmentNo +
"</td>" +
"<td>" +
r.selectionName +
"</td>" +
"<td>" +
"<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
i +
"' class='deleteIcon'/>" +
"</td></tr></tbody>");
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<form id="new-row">
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required name="customOfficeId">
<option value="" disabled selected>Choose</option>
<option value=1>Office 1</option>
<option value=2>Office 2</option>
</select>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
</div>
<div class="col-md-2">
<input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate" name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo" required name="consignmentNo">
</div>
</form>
<div class="col-md-1">
<button onclick="myFunction()">+</button>
</div>
</div>
<table class="table table-bodered" id="tempTable">
<thead>
<th>Custom Office</th>
<th>From Date</th>
<th>To Date</th>
<th>Consignment No</th>
<th>Selection Name</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have two div on index page that contains a datatable i need to hide two div by default when I select an option in dropdown then i need to show that corresponding div based on selection.
I am using this page for searching a div contains a drop downmenu contains two options to select.when i select indents it should return that corresponding div
Index File
#include('theme.header')
<br>
<div class="row" id="dropsearch">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body ">
<h4 class="mt-0 header-title">Search Indent</h4>
<label class="pull-left">
<select class="pull-left form-control input-lg" id="dropsearch" name="dropsearch">
<option>Select Search</option>
<option>Indents</option>
<option>Jobcards</option>
</select>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="indents">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body ">
<h4 class="mt-0 header-title">Search Indent</h4>
<input type="text" id="searchid" name="searchid" class="pull-right form-control-sm">
<label class="pull-right">search</label>
<br>
<br><br>
<table id="datatable" class="table table-bordered table-responsive-lg">
<thead>
<tr>
<th>Slno</th>
<th>Customer Name</th>
<th>Customer Phone Number</th>
<th>DateOfDelivery</th>
<th>Delivery At</th>
<th>Redistraion Mode</th>
<th>Chassis No</th>
<th>Engine No</th>
<th>Show</th>
</tr>
</thead>
<tbody id="searchinfo">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row" id="jobcardd">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body bg-secondary text-white">
<h4 class="mt-0 header-title">Search Jobcard</h4>
<input type="text" id="searchjob" name="searchjob" class="pull-right form-control-sm">
<label class="pull-right">search</label>
<br>
<br><br>
<table id="datatable" class="table table-bordered table-responsive-lg">
<thead>
<tr>
<th>Slno</th>
<th>Jobcard No</th>
<th>Customer Order No</th>
<th>Ticket No</th>
<th>Bill No</th>
<th>Show</th>
</tr>
</thead>
<tbody id="searchjobcard">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$('#indents').hide();
$('#jobcardd').hide();
$(function () {
$("#dropsearch").change(function () {
if ($(this).val() == "indents") {
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$("#jobcardd").show();
}
});
});
$(document).ready(function () {
$('#searchid').on('keypress', function () {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('searchindents')}}',
data: {'searchid': $value},
success: function (data) {
$('#searchinfo').html(data);
// console.log(data);
}
})
})
});
$(document).ready(function () {
$('#searchjob').on('keypress', function () {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('searchjobacard')}}',
data: {'searchjob': $value},
success: function (data) {
$('#searchjobcard').html(data);
// console.log(data);
}
})
})
});
</script>
<script>
$.ajaxSetup({headers: {'csrftoken': '{{ csrf_token() }}'}});
</script>
#include('theme.footer')
Change this
<option>Select Search</option>
<option>Indents</option>
<option>Jobcards</option>
To this
<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>
Update
You have given same ID to the DIV and DropDown!!
Use this
<select class="pull-left form-control input-lg" id="dropsearchselect" name="dropsearch">
<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>
</select>
$(function () {
$("#dropsearchselect").change(function () {
if ($(this).val() == "indents") {
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$("#jobcardd").show();
}
});
});
Here is a fiddle
Update 2
$('#indents').hide();
$('#jobcardd').hide();
$(function () {
$("#dropsearchselect").change(function () {
if ($(this).val() == "indents") {
$('#jobcardd').hide();
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$('#indents').hide();
$("#jobcardd").show();
}else{
$('#indents').hide();
$('#jobcardd').hide();
}
});
});
<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.
I am adding rows to table dynamically,now i am trying to edit table rows.
I click on edit, values are getting in text boxes after edit values i am clicking the add button but i created like new row not updated.
Any mistakes in my code
<form class="form-horizontal" role="form" id="chargesForm">
<div class="col-md-6">
<div class="form-group ">
<label for="minAmt" class="col-lg-4 control-label">MinAmmount</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="minAmt" name="minAmt" />
</div>
</div>
<div class="form-group ">
<label for="maxAmt" class="col-lg-4 control-label">MaxAmmount</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="maxAmt" name="maxAmt"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label for="type" class="col-lg-4 control-label">Type</label>
<select size="1" id="type" name="type">
<option value="Flat" selected="selected">
Flat
</option>
<option value="Percentage">
Percentage
</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-actions btnzone">
<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="savebutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
<a class="btn btn-danger" ><i class=""></i>Back</a>
</div>
</div>
</form>
<form class="form-horizontal" role="form" id="chargestableForm">
<div class="col-md-12" style="height:150px;overflow:auto;margin-top:5px;">
<table id="charges" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
<thead style="background-color:#CCE5FF">
<tr>
<th>MinAmmount</th>
<th>MaxAmmount</th>
<th>Type</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
i added rows with the help of jquery
var i=0;
$("button#savebutton").click(function(){
var minAmt=$("#minAmt").val();
var maxAmt=$("#maxAmt").val();
var type=$("#type").val();
i++;
var new_row = "<tr id='row"+i+"' class='info'><td class='minAmt'>" + minAmt + "</td><td class='maxAmt'>" + maxAmt + "</td><td class='type'>" + type + "</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'></a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''></a></span></tr>";
$("table tbody").append(new_row);
$("#minAmt").val($('td.maxAmt').last().text()).prop("disabled","disabled");
$("#maxAmt").val('');
//$("#type").val('');
});
$(document).on('click', 'span.deleterow', function () {
$(this).parents('tr').remove();
return false;
});
$(document).on('click', 'span.editrow', function () {
$("#minAmt").val($(this).closest('tr').find('td.minAmt').text()).prop("disabled","disabled");
$("#maxAmt").val($(this).closest('tr').find('td.maxAmt').text()).prop("disabled","disabled");
$("#type").val($(this).closest('tr').find('td.type').text());
});
Hi you can follow this link, I have used your code and updated it a lil.
link: https://jsfiddle.net/u7ycrxph/
Updated Code :
currentRow = null;
$("button#savebutton").click(function(){
//....
if(currentRow){
$("table tbody").find($(currentRow)).replaceWith(new_row);
currentRow = null;
}
else{
$("table tbody").append(new_row);
}
....//
});
$(document).on('click', 'span.editrow', function () {
currentRow= $(this).parents('tr');
//....
});
Use replaceWith()
Add a hidden field to denote which row is being edited.
<input type="hidden" id="currentRow"/>
On Edit
$(document).on('click', 'span.editrow', function () {
$("#currentRow").val($(this).closest("tr").attr("id"));
}):
On the click of Save in Edit mode create a new row template with the updated values and replace the existing row with the new one.
$("button#savebutton").click(function(){
if($("#currentRow").val()){
var row = $("table tbody").find('#'+$("#currentRow").val());
// var updated_row = //Updated template of the existing row
row.replaceWith (updated_row);
$("#currentRow").val("");
}
});
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