How to save the data in local storage?

How to save the data in local storage? - javascript

I want to use the local storage option where the data is displayed on the screen even when the page is refreshed.
As in when a row gets added using the addRow(), then i refresh the page, i need to see the table with the added Row data as well.
I want to use javascript as i am new to javascript i need a bit of help. i was able to do the edit and delete option on my own. But i need help in using local storage.
let addRow = () => {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let email = document.getElementById("email").value;
let contact = document.getElementById("number").value;
if(name === ""){
alert('Please Fill Your Full Name');
document.getElementById("name").focus();
return false;
}
if(age === ""){
alert('Please Fill Your Age');
document.getElementById("age").focus();
return false;
}
if(email === ""){
alert('Please Fill Your Email');
document.getElementById("email").focus();
return false;
}
if(contact === ""){
alert('Please Fill Your Mobile Number');
document.getElementById("number").focus();
return false;
}
let tr=document.createElement('tr');
tr.innerHTML=`
<td>${name}</td>
<td>${age}</td>
<td>${email}</td>
<td>${contact}</td>
<td>
<button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
<button type="button" class="btn btn-danger" id="deleteBtn"> Delete </button>
</td>`
document.getElementById("tableDisplay").appendChild(tr);
document.getElementById("name").value = '';
document.getElementById("age").value = '';
document.getElementById("email").value = '';
document.getElementById("number").value = '';
document.getElementById("tableDisplay").value = '';
};
document.getElementById("tableDisplay").addEventListener("click", (event) => {
if (event.target.matches("#deleteBtn")) {
let row = event.target.closest("tr");
row.remove();
}
});
document.getElementById("tableDisplay").addEventListener("click", (event) => {
if (event.target.matches("#editBtn")) {
let row = event.target.closest("tr");
row.setAttribute("contenteditable", "true");
alert("Click on the text you want to edit!");
row.cells[4].innerHTML = `<button type="button" class="btn btn-primary" id="saveBtn"> Save </button>`;
}
});
document.getElementById("tableDisplay").addEventListener("click", (event) => {
if (event.target.matches("#saveBtn")) {
let row = event.target.closest("tr");
row.setAttribute("contenteditable", "false");
alert("Row data changed!");
row.cells[4].innerHTML = `
<button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
<button type="button" class="btn btn-danger" id="deleteBtn"> Delete </button>`;
}
});
document.getElementById("done").addEventListener("click", addRow);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="border border-dark rounded p-1 bg-light">
<table class="text-center table" align="center" id="tableDisplay">
<tr class="bg-warning">
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Contact Number</th>
<th></th>
</tr>
<tr>
<td>John</td>
<td>26</td>
<td>foresto#worksmail.tk</td>
<td>+917007984498</td>
<td>
<button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
<button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button>
</td>
</tr>
<tr>
<td>Jimmy</td>
<td>45</td>
<td>foresto#official-sunveno.ru</td>
<td>+917007985598</td>
<td>
<button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
<button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button>
</td>
</tr>
<tr>
<td>Sarah</td>
<td>32</td>
<td>foresto#abac-compressoren.ru</td>
<td>+917897984498</td>
<td>
<button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
<button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button>
</td>
</tr>
<tr>
<td>Vanessa</td>
<td>22</td>
<td>foresto#newmotionrp.ru</td>
<td>+917078984498</td>
<td>
<button type="button" class="btn btn-warning" id="editBtn"> Edit </button>
<button type="button" class="btn btn-danger" id="deleteBtn"> Delete</button>
</td>
</tr>
</table>
</div>
<div class="border border-dark rounded bg-warning p-3 mt-5">
<form>
<div class="form-group row">
<label for="name" class="col-md-2 col-form-label">Name</label>
<div class="col-md-10">
<input class="form-control" type="text" placeholder="Full Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="number" class="col-md-2 col-form-label">Age</label>
<div class="col-md-10">
<input class="form-control" type="number" placeholder="Age" id="age">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-2 col-form-label">Email</label>
<div class="col-md-10">
<input class="form-control" type="email" placeholder="emailaddress#example.com" id="email">
</div>
</div>
<div class="form-group row">
<label for="number" class="col-md-2 col-form-label">Contact Number</label>
<div class="col-md-10">
<input class="form-control" type="text" placeholder="Call On" id="number">
</div>
</div>
</form>
<button class="btn btn-primary btn-block" id="done">ADD</button>
</div>

There is a little bit of an issue with your HTML. You have multiple elements with the same id: e.g.
id="editBtn" & id="deleteBtn".
Also, you have five columns in the th, but only 4 in the rows. I edited the HTML and the JS a bit, so that it looks like it will delete the rows. The way that you had it is was appending the row after the tbody, but you want that before the tbody, so I added an id to tbody, but you could handle that another way.
window.delRow = function(element)
is there because Fiddle apparently wraps the functions in a function so that there was a problem calling that. Not really a complete answer, but I hope that helps. You would have to see what browser support there is for:
element.closest('tr').remove();
I changed the HTML to this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="border border-dark rounded p-1 bg-light">
<table class="text-center table" align="center" id="tableDisplay">
<thead class="bg-warning">
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Contact Number</th>
<th></th>
</tr>
</thead>
<tbody id = "tabelBody">
<tr>
<td>1</td>
<td>Hello</td>
<td>2</td>
<td>2</td>
<td>
<button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
</td>
</tr>
<tr>
<td>2</td>
<td>Hello</td>
<td>2</td>
<td>2</td>
<td>
<button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
</td>
</tr>
<tr>
<td>3</td>
<td>Hello</td>
<td>2</td>
<td>2</td>
<td>
<button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="border border-dark rounded bg-warning p-3 mt-5">
<form>
<div class="form-group row">
<label for="name" class="col-md-2 col-form-label">Name</label>
<div class="col-md-10">
<input class="form-control" type="text" placeholder="Full Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="number" class="col-md-2 col-form-label">Age</label>
<div class="col-md-10">
<input class="form-control" type="number" placeholder="Age" id="age">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-2 col-form-label">Email</label>
<div class="col-md-10">
<input class="form-control" type="email" placeholder="emailaddress#example.com" id="email">
</div>
</div>
<div class="form-group row">
<label for="number" class="col-md-2 col-form-label">Contact Number</label>
<div class="col-md-10">
<input class="form-control" type="text" placeholder="Call On" id="number">
</div>
</div>
</form>
<button class="btn btn-primary btn-block" id="done">ADD</button>
</div>
and the JS to this:
let addRow = () => {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let email = document.getElementById("email").value;
let contact = document.getElementById("number").value;
let tr=document.createElement('tr');
tr.innerHTML=`
<td>${name}</td>
<td>${age}</td>
<td>${email}</td>
<td>${contact}</td>
<td>
<button type="button" class="btn btn-warning editBtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger deleteBtn" onclick="delRow(this)"><i class="fa fa-trash" aria-hidden="true"></i></button>
</td>`
document.getElementById("tabelBody").appendChild(tr);
document.getElementById("name").value = '';
document.getElementById("age").value = '';
document.getElementById("email").value = '';
document.getElementById("number").value = '';
document.getElementById("tableDisplay").value = '';
};
window.delRow = function(element) {
alert("test");
element.closest('tr').remove();
}
document.getElementById("done").addEventListener("click", addRow);
Not sure exactly what you wanted to do when editing.
There is apparently a Fiddle setting regarding wrapping of JS.

Related

jquery shopping cart value onchange

I wrote a code for a shopping cart. In that for each change in quantity value (either increasing or decreasing) there should be a change in the price. I tried to implement this for a decreasing price with respect to the quantity. I can change the quantity but I am not able to change the price field because the price still gives me the type of object as I console.log. Can anyone point out what I am doing wrong?
Below is the code:
product.html
<tr>
<td class="product-thumbnail">
<img src="images/cloth_1.jpg" alt="Image" class="img-fluid">
</td>
<td class="product-name">
<h2 class="h5 text-black">Top Up T-Shirt</h2>
</td>
<!-- The price -->
<td>$49.00</td>
<td>
<div class="input-group mb-3" style="max-width: 120px;">
<div class="input-group-prepend">
<button class="btn btn-outline-primary js-btn-minus" type="button">−</button>
</div>
<input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
</div>
</div>
</td>
<td>
<div class="price"></div>
</td>
<td>X</td>
</tr>
<tr>
<td class="product-thumbnail">
<img src="images/cloth_2.jpg" alt="Image" class="img-fluid">
</td>
<td class="product-name">
<h2 class="h5 text-black ">Polo Shirt</h2>
</td>
<td>$49.00</td>
<td>
<div class="input-group mb-3" style="max-width: 120px;">
<div class="input-group-prepend">
<button class="btn btn-outline-primary js-btn-minus" type="button">−</button>
</div>
<input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
</div>
</div>
</td>
<td>
<div class="price">8</div>
</td>
<td>X</td>
</tr>
main.js
<script>
$('.js-btn-minus').on('click', function(e)
{
e.preventDefault();
if ( $(this).closest('.input-group').find('.form-control').val() !=0 && $(this).closest('.input-group').find('.form-control').val() >0)
{
$(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) - 1);
var va = parseInt($(this).closest('.input-group').find('.form-control').val());
va = (parseInt(va));
this.a = va;
console.log(this.a);
var price = $(this).closest('tr').find('.price');
console.log(price.val(parseInt(this.a)));
}
}
</script>

use price.html or price.text instead of price.val and then remember, input get value by .val() but other element get by .html() or .text()

First thing is that your table is not well structured. Second thing is that your requirement is not exactly clear to me.
Thought I assume you want to increase or decrease the price where the class is price.
You are receiving the whole element as you are using val() and it is always going to be the object.
If you could tell the exact issue/requirement, I can help you out.
$('.js-btn-minus').on('click', function(e)
{
e.preventDefault();
var next_val = parseInt($(this).closest('.input-group').find('.form-control').val()) - 1;
if (next_val < 0){
next_val = 0
$(this).closest('.input-group').find('.form-control').val(0)
}
else{
$(this).closest('.input-group').find('.form-control').val(next_val);
var existing_value = $(this).closest('tr').find('.price').html()
if ((existing_value || '') == ''){
$(this).closest('tr').find('.price').html(next_val)
}
else{
$(this).closest('tr').find('.price').html(existing_value - 1)
}
}
// Price updates
//var current_price = parseInt($(this).closest('.input-group').parent().prev('td').html().replace('$', ''))
//var final_price = current_price - next_val;
});
$('.js-btn-plus').on('click', function(e)
{
e.preventDefault();
var next_val = parseInt($(this).closest('.input-group').find('.form-control').val()) + 1;
if (next_val < 0){
next_val=0;
$(this).closest('.input-group').find('.form-control').val(0)
}
else{
$(this).closest('.input-group').find('.form-control').val(next_val);
var existing_value = parseInt($(this).closest('tr').find('.price').html())
if ((existing_value || '') == ''){
$(this).closest('tr').find('.price').html(next_val)
}
else{
$(this).closest('tr').find('.price').html(existing_value + 1)
}
}
// Price updates
//var current_price = parseInt($(this).closest('.input-group').parent().prev('td').html().replace('$', ''))
//var final_price = current_price + 1
//console.log(final_price)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="product-thumbnail">
<img src="images/cloth_1.jpg" alt="Image" class="img-fluid">
</td>
<td class="product-name">
<h2 class="h5 text-black">Top Up T-Shirt</h2>
</td>
<!-- The price -->
<td class="current_price">$49.00</td>
<td>
<div class="input-group mb-3" style="max-width: 120px;">
<div class="input-group-prepend">
<button class="btn btn-outline-primary js-btn-minus" type="button">−</button>
</div>
<input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
</div>
</div>
</td>
<td>
<div class="price"></div>
</td>
<td>X</td>
</tr>
<tr>
<td class="product-thumbnail">
<img src="images/cloth_2.jpg" alt="Image" class="img-fluid">
</td>
<td class="product-name">
<h2 class="h5 text-black ">Polo Shirt</h2>
</td>
<td class="current_price">$49.00</td>
<td>
<div class="input-group mb-3" style="max-width: 120px;">
<div class="input-group-prepend">
<button class="btn btn-outline-primary js-btn-minus" type="button">−</button>
</div>
<input type="text" class="form-control text-center" value="1" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-outline-primary js-btn-plus" type="button">&plus;</button>
</div>
</div>
</td>
<td>
<div class="price">8</div>
</td>
<td>X</td>
</tr>
</table>

How to update values for each columns of row from modal?

I have an HTML code like this:
<body>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
In modal code
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham"
name="nGiaSanPham">
</div>
</form>
</div>
And an Javascript code like this:
function editProductModal() {
$(document).on("click", ".edit", function () {
$(this).parents("tr").find("th").each(function () {
document.getElementById("iMaSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cTenSanPham").each(function () {
document.getElementById("iTenSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cGiaSanPham").each(function () {
document.getElementById("iGiaSanPham").value = parseInt($(this).text().replace(/\D/g, ''));
});
});
}
I want when I click the button 'Chỉnh sửa' on any row, a modal will open and fill data from this row into this modal (the modal of bootstrap 4). I can edit on this modal, then I press a button to pass updated data to table. How to do it in function editProductModal() in file JS. Thank you so much

var $currentEditRow;
$(document).on("click", ".edit", function() {
$currentEditRow = $(this).parents("tr");
editProductModal($(this).parents("tr"));
});
function editProductModal(row) {
document.getElementById("iMaSanPham").value = $(row).find("th").text();
document.getElementById("iTenSanPham").value = $(row).find(".cTenSanPham").text();
document.getElementById("iGiaSanPham").value = parseInt($(row).find(".cGiaSanPham").text().replace(/\D/g, ''));
}
function update() {
$currentEditRow.find("th").text(document.getElementById("iMaSanPham").value);
$currentEditRow.find(".cTenSanPham").text(document.getElementById("iTenSanPham").value);
$currentEditRow.find(".cGiaSanPham").text(document.getElementById("iGiaSanPham").value);
$('#exampleModal').modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="update()">Save</button>
</div>
</div>
</div>
</div>
When editing the current tr row, store the dom of the current row, so you can determine which line to update to in the modal.
You can try to update the row data in my code snippet.

You are improperly mixing inline onclick and jQuery click event listeners together.
Remove the function and the onclick and just use the jQuery code inside the function by itself to manage the event
You also don't need an each loop to access the elements within the row.
Simplified version:
$(document).on("click", ".edit", function() {
var $row = $(this).closest('tr'),
thText = $row.find('th').text(),
cTenSanPham = $row.find('.cTenSanPham').text(),
cGiaSanPham = $('.cGiaSanPham').text().replace(/\D/g, '');
$('#iMaSanPham').val(thText);
$('#iTenSanPham').val(cTenSanPham);
$('#iGiaSanPham').val(cGiaSanPham);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
<tr>
<th>66</th>
<td class="cTenSanPham">Another Item</td>
<td class="cGiaSanPham">99.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Modal</h3>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>

Find Value of textarea from closest row of table

I have a button Update in One td I want to fetch value of both textarea of td from same tr.
There are lots of tr so I have to use closest() method to find element. I have tried to find element but it's not working.
HTML :-
<tr>
<td>
<div class="agenda-date">
<div class="dayofmonth color_font_date">2017-05-31</div>
<div class="dayofweek">
Wednesday
</div>
</div>
</td>
<td>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">AM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="3" name="" class="number_planner"></a>
<label class="control-label"> 6 </label>
</div>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">PM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="4" name="" class="number_planner"></a>
<label class="control-label"> 2 </label>
</div>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap appointment_note" required="required" rows="3" name="appointment_note" cols="50" aria-required="true" disabled=""> APT -1 </textarea>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap holiday_note" required="required" rows="3" name="holiday_note" cols="50" aria-required="true" disabled=""> Holiday - 1 </textarea>
</td>
<td>
<div class="text-right">
<button type="button" id="" class="btn btn-primary appointment_edit_button">Edit </button>
<button type="button" id="" onclick="planner_note_edit(1)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>
<button type="button" id="" class="btn btn-md btn-cancel appointment_cancel_button" style="display:none">Cancel </button>
</div>
</td>
</tr>
Jquery :-
function planner_note_edit(planner_note_id)
{
appointment_note = $(this).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
But I'm not able to fetch value of textarea from closest td.

You should get the textarea from current row.
So, please use .closest('tr')
appointment_note = $(this).closest('tr').find(".holiday_note").val();
Also, you have to pass the clicked button object. this in your function is a reference to the window object.
function planner_note_edit(planner_note_id,event)
{
appointment_note = $(event.target).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
HTML
<button type="button" id="" onclick="planner_note_edit(1,event)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>

Not able to take data from table and set to bootstrap modal

I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>

In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example

Take table row hidden field value?

I use Laravel 5, Blade template for build interface. I want to take specific row hidden field value.
This is my data table code.
<table>
<thead>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th><p id='buttons'><strong> Add New Fee Details &nbsp </strong> <span class="glyphicon glyphicon-plus"></span> </p></th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
#foreach ($fees as $fee)
<tr>
<td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
<td> {{ $fee->feeName }} </td>
<td>{{$fee->amount}}</td>
<td class="hidden" value="detailId">{{ $i++ }}</td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
<span class="glyphicon glyphicon-pencil"></span> &nbsp &nbsp
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th></th>
</tr>
</tfoot>
</table>
I want to when click my link in row(click hyper-link ) call this #myModel in same page below code and I want accesses click row hidden field value in this code.
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Fee Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
<label>Fee Code</label>
***//access hidden field***
{{$fees[***put hidden field value***]->feeCode }}
<input type="text" class="form-control" placeholder="Fee Code " disabled>
<label>Fee Name</label>
<input type="text" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Amount</label>
<input type="number" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Description</label>
<textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>
<br/><br/><label>Internal Details</label>
<div class="row">
<div class="col-sm-6">
<label>Added By</label>
<input type="text" class="form-control" placeholder="Fee Added By " disabled>
<label>Updated </label>
<div class="form-group">
<div class="input-group date" id="#">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Staff Code</label>
<input type="text" class="form-control" placeholder="Fee Staff Code " disabled>
<label>Added </label>
<div class="form-group">
<div class="input-group date" id="#" >
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Full Code:
#extends('layouts.app')
#section('slide_bar')
#include('layouts.master_entry_slide_bar')
#endsection
#section('content')
<section class="content-header">
<h1>Fee<small> Details</small></h1>
</section>
<br/>
<!-- Main content -->
<section class="content-fluid">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<col width='auto'>
<col width='auto'>
<col width='auto'>
<col width='100'>
<thead>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th><p id='buttons'><strong> Add New Fee Details &nbsp </strong> <span class="glyphicon glyphicon-plus"></span> </p></th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
#foreach ($fees as $fee)
<tr>
<td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
<td> {{ $fee->feeName }} </td>
<td>{{$fee->amount}}</td>
<td class="hidden" value="detailId">{{ $i++ }}</td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
<span class="glyphicon glyphicon-pencil"></span> &nbsp &nbsp
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th></th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Fee Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
<label>Fee Code</label>
{{$fees[0]->feeCode }}
<input type="text" class="form-control" placeholder="Fee Code " disabled>
<label>Fee Name</label>
<input type="text" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Amount</label>
<input type="number" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Description</label>
<textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>
<br/><br/><label>Internal Details</label>
<div class="row">
<div class="col-sm-6">
<label>Added By</label>
<input type="text" class="form-control" placeholder="Fee Added By " disabled>
<label>Updated </label>
<div class="form-group">
<div class="input-group date" id="#">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Staff Code</label>
<input type="text" class="form-control" placeholder="Fee Staff Code " disabled>
<label>Added </label>
<div class="form-group">
<div class="input-group date" id="#" >
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var name = document.getElementById("master_entry");
document.getElementById("master_entry").className = "active";
var slide_bar_element = document.getElementById("fd_menu");
document.getElementById("fd_menu").className = "active";
</script>
#endsection

You can put input with readonly attribute true and apply some style to it ( border:none; ) to remove input appearance!
After that make JavaScript function in onclick of href tag get value of that inputs! you can open modal with JavaScript too!
function test(){
$('#myModal').modal('toggle');
$('#rowValue').empty().append($("#inputID").val());
}
.inputStyle{
border:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tr>
<td><a onclick="test()" ><input type="text" readonly="true" class="inputStyle" id="inputID" value="your value " /> </a></td>
</tr>
</table>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<p id="rowValue"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to save the data in local storage? - javascript

Related

jquery shopping cart value onchange

How to update values for each columns of row from modal?

Find Value of textarea from closest row of table

Not able to take data from table and set to bootstrap modal

Take table row hidden field value?

Categories

Resources