How to convert value from HTML table to JSON array in javascript - javascript

<table style="width:100%; border-collapse: collapse; text-align: center;" id="stockinboundedittable">
<tr>
<th style="display:none;">subcategory</th>
<th>Sl.No</th>
<!--<th>I.U.Code</th>-->
<th>Item Name</th>
<th> old stock</th>
<th> new stock</th>
<th> Total Stock</th>
<th> qrt</th>
<th>Edit</th>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_2</td>
<td>
<input style=" width: 100%;" id="slno1editinbound1" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock1" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock1" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock1" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty1">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_5</td>
<td>
<input style=" width: 100%;" id="slno1editinbound2" value="2" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock2" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty2">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_13</td>
<td>
<input style=" width: 100%;" id="slno1editinbound3" value="3" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock3" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty3">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_5</td>
<td>
<input style=" width: 100%;" id="slno1editinbound4" value="4" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock4" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock4" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock4" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty4">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_2</td>
<td>
<input style=" width: 100%;" id="slno1editinbound5" value="5" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock5" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
</td>
</tr>
</table>
</table>
##i need to read values inside tag and save it like json array with sl.no and edit button excluded in json array##
[{"itemname":"Chicken Drumstick","oldstock":"20","newstock":"10","totalstock":"30"},
{"itemname":"Chicken Drumstick","oldstock":"0","newstock":"10","totalstock":"10"},
{"itemname":"Chicken Drumstick","oldstock":"10","newstock":"10","totalstock":"20"},
{"itemname":"Chicken Drumstick","oldstock":"20","newstock":"10","totalstock":"30"},
{"itemname":"Chicken Drumstick","oldstock":"0","newstock":"10","totalstock":"10"}]
*the above json array is the example format i needed
i need to read it with loop from whole table


This will do the job:
const res=[...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr=>
[...tr.querySelectorAll("input")].slice(0).map(inp=>[inp.id.replace(/.*inboundedit/,"").replace(/\d+$/,""),inp.value]))
.reduce((a,c)=>{
a[c[0][1]]=
Object.fromEntries(c.slice(1));
return a},{});
console.log(res[2]);
<table style="width:100%; border-collapse: collapse; text-align: center;" id="stockinboundedittable">
<tr>
<th style="display:none;">subcategory</th>
<th>Sl.No</th>
<!--<th>I.U.Code</th>-->
<th>Item Name</th>
<th> old stock</th>
<th> new stock</th>
<th> Total Stock</th>
<th> qrt</th>
<th>Edit</th>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_2</td>
<td>
<input style=" width: 100%;" id="slno1editinbound1" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock1" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock1" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock1" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty1">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_5</td>
<td>
<input style=" width: 100%;" id="slno1editinbound2" value="2" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock2" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty2">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_13</td>
<td>
<input style=" width: 100%;" id="slno1editinbound3" value="3" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock3" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty3">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_5</td>
<td>
<input style=" width: 100%;" id="slno1editinbound4" value="4" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock4" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock4" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock4" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty4">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_2</td>
<td>
<input style=" width: 100%;" id="slno1editinbound5" value="5" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock5" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
</td>
</tr>
</table>
</table>
I have a nested .map() loop that will collect both, the ids and the values of each input field (apart from the first one in each row). The Object.fromEntries() call will then assemble the inner arrays back into objects, using the first array element as the key and the second one as the value.
My answer also doesn't return a JSON string but an array of objects instead. Simply put it through JSON.stringify() if you really want a JSON string.
Update
Following OP's latest comments I updated my answer. I now use the first column as an "Id-key" and create an object of objects instead of an array of objects. The Id-key can be used to address each menu individually, as can be seen in my example console.log() where I selected the menu with Id-key 2.


You can try this:
function table_to_array(table_id) {
myData = document.getElementById(table_id).rows
//console.log(myData)
my_liste = []
for (var i = 0; i < myData.length; i++) {
el = myData[i].children
my_el = []
for (var j = 0; j < el.length; j++) {
my_el.push(el[j].innerText);
}
my_liste.push(my_el)
}
return my_liste
}

Related

How to convert value from HTML table to JSON array in javascript excluding if any of the input in last row is empty and get numbers as integer in json

<!DOCTYPE html>
<html>
<body>
<table style="width:100%; border-collapse: collapse; text-align: center;" id="stockinboundedittable">
<tr>
<th style="display:none;">subcategory</th>
<th>Sl.No</th>
<!--<th>I.U.Code</th>-->
<th>Item Name</th>
<th> old stock</th>
<th> new stock</th>
<th> Total Stock</th>
<th> qty</th>
<th>Edit</th>
</tr>
<tr>
<td style="display:none;">sdvsvds</td>
<td>
<input style=" width: 100%;" id="slno1editinbound1" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock1" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock1" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock1" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty1" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">sdvs</td>
<td>
<input style=" width: 100%;" id="slno1editinbound2" value="2" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty2" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">sdvsvd</td>
<td>
<input style=" width: 100%;" id="slno1editinbound3" value="3" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock3" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty3" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">svdsdv</td>
<td>
<input style=" width: 100%;" id="slno1editinbound4" value="4" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock4" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock4" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock4" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty4" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">dvdvdvs</td>
<td>
<input style=" width: 100%;" id="slno1editinbound5" value="5" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty5" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">ddd</td>
<td>
<input style=" width: 100%;" id="slno1editinbound5" value="6" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname5" value="some product" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock5" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock5" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock5" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty5" value="0">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
</td>
</tr>
</table>
</table>
<span id="demo"></span>
<script>
const res=[...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr=>
Object.fromEntries(
[...tr.querySelectorAll("input")].slice(1).map(inp=>[inp.id.replace(/.*inboundedit/,"").replace(/\d+$/,""),inp.value]))).filter(
function ({ oldstock, newstock}) {
return (oldstock!="" && newstock!="")&&(oldstock!="0" && newstock!="")
}
);
var js=JSON.stringify(res);
document.getElementById("demo").innerHTML=js;
</script>
</body>
</html>
Description
As you can see from above code I have been getting json from html table.
And have been filtering if the oldstock is non empty and non zero and nestock is non empty
All the json data are in string.
What I need
I have been getting all the data like itemname,newstock,oldstock,qty, and total stock as String.
I need json of oldstock, newstock, totalstock and qty as integer and itemname in string.
Output for my code
[{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Everest - Kasur Methi","oldstock":"10","newstock":"10","totalstock":"10","qty":"5"},{"itemname":"Fresh Coconut Milk 150 ml","oldstock":"10","newstock":"10","totalstock":"20","qty":"5"},
{"itemname":"Sakthi - Chicken Masala","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Goat Bones - Regular Soup Pack","oldstock":"10","newstock":"10","totalstock":"10","qty":"5"},
{"itemname":"some product","oldstock":"1","newstock":"1","totalstock":"0","qty":"0"}]
Description:
As you can see the output for my current code contains all the data as string.
Output I Need
[{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":20,"newstock":10,"totalstock":30,"qty":5},
{"itemname":"Everest - Kasur Methi","oldstock":10,"newstock":10,"totalstock":10,"qty":5},{"itemname":"Fresh Coconut Milk 150 ml","oldstock":10,"newstock":10,"totalstock":20,"qty":5},
{"itemname":"Sakthi - Chicken Masala","oldstock":20,"newstock":10,"totalstock":30,"qty":5},
{"itemname":"Goat Bones - Regular Soup Pack","oldstock":10,"newstock":10,"totalstock":10,"qty":5},
{"itemname":"some product","oldstock":1,"newstock":1,"totalstock":0,"qty":0}]
Description:
As you can see from the sample output oldstock, newstock, totalstock and qty are in integer and itemname are in string

You need to use for loop on data as below.
// input data json
const data = [{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"}]
let formattedData = [];
for (const currentVal of data){
let currentObj = currentVal;
if(parseInt(currentVal['oldstock]) >= 0) {
currentObj['oldstock] = parseInt(currentVal['oldstock])
}
if(parseInt(currentVal['newstock]) >= 0) {
currentObj['newstock] = parseInt(currentVal['newstock])
}
if(parseInt(currentVal['totalstock]) >= 0) {
currentObj['totalstock] = parseInt(currentVal['totalstock])
}
if(parseInt(currentVal['qty]) >= 0) {
currentObj['qty] = parseInt(currentVal['qty])
}
formattedData.push(currentObj);
}
// Should print number type as you want
console.log('formatted data ', formattedData);

try following:
const res = [...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr =>
Object.fromEntries(
[...tr.querySelectorAll("input")].slice(1).map(inp =>
[
inp.id.replace(/.*inboundedit/, "").replace(/\d+$/, ""),
(inp.id.indexOf('itemname') >= 0 ? inp.value : parseInt(inp.value))
]))).filter(
function ({ oldstock, newstock }) {
return (oldstock != "" && newstock != "") && (oldstock != "0" && newstock != "");
}
);
var js = JSON.stringify(res);
document.getElementById("demo").innerHTML = js;

Input is not deletable

I have a telephone input on my form. It allows numbers only.So I use a simple javascript code to do this.But this time input box cannot be deleted.
<form id="aylikal" action="https://web.myadress.co" method="post">
<table style="height: 116px;" width="100%">
<tbody>
<tr>
<input name="adres" required="" style="width: 100%;height: 1px;visibility: hidden;" type="text">
<td style="width: 590px;"><input name="ad" type="text" placeholder="Ad" required style="width: 100%;height: 40px;font-size: 18px;"></td>
</tr>
<tr>
<td style="width: 590px;">
<input name="soyad" type="text" placeholder="Soyad" required style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<button id="pisko" onclick="formyolla()" style="display: inherit;margin: 0 auto;background: #2f889a;color: #FFF;font-size: 20px;padding: 16px 5px;height: auto;border-radius: 5px;width: 100%;">Devam et</button>
</td>
</tr>
</tbody>
</table>
</form>
Code
function isInputNumbersa(evt) {
var ch = String.fromCharCode(evt.which);
if (!(/[0-9]/.test(ch))) {
evt.preventDefault();
}
}

KeyboardEvent.which is deprecated. Use KeyboardEvent.key instead.
Note that although this prevents user from typing letters, it does not prevent pasting letters. I'd use a robust library instead.
function isInputNumbersa(e) {
if (!(/[0-9]/.test(e.key))) {
e.preventDefault();
}
}
<form id="aylikal" action="https://web.myadress.co" method="post">
<table style="height: 116px;" width="100%">
<tbody>
<tr>
<input name="adres" required="" style="width: 100%;height: 1px;visibility: hidden;" type="text">
<td style="width: 590px;"><input name="ad" type="text" placeholder="Ad" required style="width: 100%;height: 40px;font-size: 18px;"></td>
</tr>
<tr>
<td style="width: 590px;">
<input name="soyad" type="text" placeholder="Soyad" required style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<button id="pisko" onclick="formyolla()" style="display: inherit;margin: 0 auto;background: #2f889a;color: #FFF;font-size: 20px;padding: 16px 5px;height: auto;border-radius: 5px;width: 100%;">Devam et</button>
</td>
</tr>
</tbody>
</table>
</form>

If you want users to only enter numbers then you can use type="number".
<input name="telefon" required type="number" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
Or if you want to, you can also validate the if the input only has numbers using Javascript. Write a method like below and call it using event listeners.
let input=document.querySelector('.sa');
input.onblur = e => {
if(isNaN(parseInt(input.innerHTML))){
alert('Please enter Number');
input.innerHTML = '';
}
}
Alternatively you can also use the pattern attribute.
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" pattern='5[0-9]{2}-[0-9]{3}-[0-9]{2}-[0-9]{2}' onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">

Save Data From Html Table to excel using JavaScript

Save Data From Html Table to excel using JavaScript
That following code is working fine but when i fill the data in input text box than Filled Data is not exporting in excel.
Like Dealer Name So Please Take a Look On code and tell me how to export Html Table With input text into Excel.
Appreciate Your Help..
My Code :
var table2excel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
}
return function(table, name, text) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
}
window.location.href = uri + base64(format(template, ctx))
}
})()
<html>
<head>
<title>
excel sheet
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="table2excel.js"></script>
<input type="button" onclick="table2excel('testTable', 'Analysis Results')" value="Export to Excel" />
<div id="hidTable">
<table id="testTable">
<tr>
<td class="xl67">Pre Approval form for marketing Claims</td>
</tr>
<tr>
<td class="xl68" colspan="2" rowspan="2" style='height:40.50pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext ;'>
<pre>Dealer Name:</pre>
<input id="tab1" type="text" style="width: 150px; padding-top: 2px; ">
</td>
<td class="xl68" colspan="3" style='border-right:.5pt solid windowtext; border-bottom:initial;'>
<pre>Request Number</pre>
<input id="tab2" type="text" style="width: 95px; padding-top: 2px;">
</td>
<td class="xl68" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:initial;'>
<pre>Date Issued:</pre>
<input id="tab3" type="text" style="width: 75px; padding-top: 2px;">
</td>
</tr>
<tr>
<td class="xl71" colspan="3" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
<td class="xl71" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
</tr>
<tr>
<td class="xl74">Start Date:</td>
<td class="xl75">
<input type="text" style="width: 150px ; padding-top: 2px;" />
</td>
<td class="xl76"></td>
<td class="xl77" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
<td class="xl74">End Date:
</td>
<td class="xl78" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'>
<input type="text" style="width: 120px; padding-top: 2px;">
</td>
</tr>
<tr>
<td class="xl80" colspan="7" style='height:15.75pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'>Type of Marketing Activity<span style='mso-spacerun:yes;'> </span></td>
</tr>
<tr style='height:38.25pt;'>
<td class="xl83" style='height:38.25pt;'>Print Advert
</td>
<td class="xl84">Name of Publication</td>
<td class="xl85">Size sqm/sqf</td>
<td class="xl85">Cost per sqm/sqf</td>
<td class="xl86"># of Inserts</td>
<td class="xl87">Cost per insert</td>
<td class="xl86">total Cost</td>
</tr>
<tr>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="magazine" name="magazine" value="magazine" />
<label for="magazine">Magazine</label>
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="numVal1" id="qty" onkeyup="getValues()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="numVal2" id="price" onkeyup="getValues()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="numVal3" id="discount" onkeyup="getValues()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="numVal5" id="freight" onkeyup="getValues()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalValue" id="total" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Newspaper" name="Newspaper" value="Newspaper" />
<label for="Newspaper">Newspaper</label>
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="value1" id="quantity" onkeyup="getnews()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="value2" id="priceRange" onkeyup="getnews()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="value3" id="discountPer" onkeyup="getnews()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="value5" id="Offer" onkeyup="getnews()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalrock" id="totalCost" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Directories" value="Directories" />Directories
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam1" id="quantity1" onkeyup="getDir()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam2" id="priceRange1" onkeyup="getDir()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam3" id="discountPer1" onkeyup="getDir()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam5" id="Offer1" onkeyup="getDir()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock" id="totalSam" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="NewspaperInserts" value="NewspaperInserts" />Newspaper No.
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam11" id="quantity11" onkeyup="getPaper()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam22" id="priceRange11" onkeyup="getPaper()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam33" id="discountPer11" onkeyup="getPaper()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam55" id="Offer11" onkeyup="getPaper()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock1" id="totalPaper" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Journals" value="Journals" />Journals
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam111" id="quantity111" onkeyup="getJourn()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam222" id="priceRange111" onkeyup="getJourn()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam333" id="discountPer111" onkeyup="getJourn()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam555" id="Offer111" onkeyup="getJourn()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock11" id="totalJourn" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl90" style='height:21.00pt;'>Position of the Advert</td>
<td class="xl86" colspan="6" style='border-right:.5pt solid border-bottom:.5pt solid'>
</td>
</tr>
<tr style='height:39.00pt;'>
<td class="xl92" style='height:39.00pt;'>Out Door Advertising</td>
<td class="xl86">Location</td>
<td class="xl85">Size sqm/sqf</td>
<td class="xl85">Cost per sqm/sqf</td>
<td class="xl86">Per Month</td>
<td class="xl86">Period</td>
<td class="xl86">total Cost</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="hoardings" name="hoardings" value="hoardings" />Hoardings
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="hoard1" id="mage1" onkeyup="getHoard()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="hoard2" id="mage2" onkeyup="getHoard()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="hoard3" id="mage3" onkeyup="getHoard()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="hoard5" id="mage5" onkeyup="getHoard()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageRock" id="totalHoard" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="MobileBillboards" name="Mobile Billboards" value="MobileBillboards" />Mobile Bill
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="bill1" id="mage11" onkeyup="getBill()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="bill2" id="mage22" onkeyup="getBill()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="bill3" id="mage33" onkeyup="getBill()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="bill5" id="mage55" onkeyup="getBill()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageBill" id="totalBill" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" height="28" style='height:21.00pt;'>
<input type="checkbox" id="Posters" name="Posters" value="Posters" />Posters
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="post1" id="mage111" onkeyup="getPost()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post2" id="mage222" onkeyup="getPost()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post3" id="mage333" onkeyup="getPost()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post5" id="mage555" onkeyup="getPost()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="magePost" id="totalPost" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="VinylBanners" name="Vinyl Banners" value="VinylBanners" />Vinyl Banners
</td>
<td class="xl90">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl95">
<input type="text" class="post11" id="ban1" onkeyup="getBan()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="post22" id="ban2" onkeyup="getBan()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post33" id="ban3" onkeyup="getBan()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post55" id="ban5" onkeyup="getBan()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageBan" id="totalBan" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="LEDDisplays" name="LED Displays" value="LEDDisplays" />
<label for="LEDDisplays">LED Displays</label>
</td>
<td class="xl90">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl95">
<input type="text" class="post111" id="ban11" onkeyup="getLed()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="post222" id="ban22" onkeyup="getLed()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post333" id="ban33" onkeyup="getLed()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post555" id="ban55" onkeyup="getLed()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageLed" id="totalLed" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl96" style='height:15.00pt;'>Digital Marketing</td>
<td class="xl97"></td>
<td class="xl98"></td>
<td class="xl97"></td>
<td class="xl97"></td>
<td class="xl97"></td>
<td class="xl99"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl100" colspan="2" style='height:21.00pt;border-right:.5pt solid border-bottom:.5pt solid'>
<input type="checkbox" id="GoogleAdwords" name="Google Adwords" value="GoogleAdwords" />Google Adwords
</td>
<td class="xl102" colspan="3" style='border-right:none; border-bottom:.5pt solid windowtext;'>
<input type="text" style="width: 300px; padding-top: 2px;" />
</td>
<td class="xl103"></td>
<td class="xl104"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl105" colspan="2" style='height:21.00pt;border-right:.5pt border-bottom:.5pt solid '>
<input type="checkbox" id="SocialMediaMarketing" name="Social Media Marketing" value="SocialMediaMarketing" />Social Media Marketing
</td>
<td class="xl107" colspan="3" style='border-right:none; border-bottom:.5pt solid'>
<input type="text" style="width: 300px; padding-top: 2px;" />
</td>
<td class="xl108"></td>
<td class="xl109"></td>
</tr>
<tr style='height:29.25pt;'>
<td class="xl110" style='height:29.25pt;'>
Electronic Adverts</td>
<td class="xl86">City/Station/Channel</td>
<td class="xl86">No of Spots</td>
<td class="xl111">Duration</td>
<td class="xl86">Cost</td>
<td class="xl91">Cost for durtation</td>
<td class="xl90"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="MultiplexAdv." name="Multiplex Adv." value="MultiplexAdv." />Multiplex Adv.
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="multi1" id="multi11" onkeyup="getMulti()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi2" id="multi22" onkeyup="getMulti()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi3" id="multi33" onkeyup="getMulti()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi5" id="multi55" onkeyup="getMulti()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageMulti" id="totalMulti" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="RadioSpots" name="Radio Spots" value="RadioSpots" />Radio Spots
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="radio1" id="radio11" onkeyup="getRadio()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio2" id="radio22" onkeyup="getRadio()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio3" id="radio33" onkeyup="getRadio()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio5" id="radio55" onkeyup="getRadio()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageRadio" id="totalRadio" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="TVAds" name="TV Ads" value="TVAds" />TV Ads
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="tv1" id="tv11" onkeyup="getTv()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv2" id="tv22" onkeyup="getTv()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv3" id="tv33" onkeyup="getTv()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv5" id="tv55" onkeyup="getTv()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageTv" id="totalTv" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:18.00pt;'>
<td class="xl786 " colspan="7" rowspan="5" style='height:90.00pt;border-right:.5pt solid windowtext; border-bottom:.5pt solid windowtext;'>working description
<br />
<textarea rows="6" cols="140" name="comment" form="usrform"></textarea>
</td>
</tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:2.00pt;'></tr>
<tr style='height:15.00pt;'>
<td class="xl115" colspan="7" style='height:15.00pt;border-right:.5pt solid border-bottom:.5pt solid '>Contact Details of Media to be Used</td>
</tr>
<tr class="xl65" style='height:19.50pt;'>
<td class="xl88" style='height:19.50pt;'>Contact Person</td>
<td class="xl88" colspan="2" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 180px; padding-top: 2px;" />
</td>
<td class="xl86" colspan="4" style='border-right:.5pt solid border-bottom:.5pt solid'> Email Address</td>
</tr>
<tr class="xl65" style='height:19.50pt;'>
<td class="xl88" style='height:19.50pt;'>Contact Number</td>
<td class="xl88" colspan="2" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 180px; padding-top: 2px;" />
</td>
<td class="xl86" colspan="4" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 272px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl70" colspan="7" style='height:15.00pt;border-right:none;border-bottom:none;'>For ABC
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl96" style='height:15.00pt;'>Checklist </td>
<td class="xl116"></td>
<td class="xl99"></td>
<td class="xl117"></td>
<td class="xl116"></td>
<td class="xl118"></td>
<td class="xl99"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Artwork" name="Artwork" value="Artwork " />Artwork or Design Approval By ABC
</td>
<td class="xl66"></td>
<td class="xl120"></td>
<td class="xl121">
<input type="checkbox" id="Sample" name="Sample" value="Sample " />Sample Artwork included
</td>
<td class="xl66" colspan="2" style='mso-ignore:colspan;'>
</td>
<td class="xl120"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Cost" name="Cost" value="Cost " />Cost Approval by ABC
</td>
<td class="xl66"></td>
<td class="xl120"></td>
<td class="xl121">
<input type="checkbox" id="Image" name="Image" value="Image" />Sample Image included
</td>
<td class="xl66" colspan="2">
</td>
<td class="xl120"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Location" name="Cost" value="Location" />Location:
</td>
<td class="xl122"></td>
<td class="xl123"></td>
<td class="xl121">
<input type="checkbox" id="Costing" name="Costing" value="Costing" />Costing included
</td>
<td class="xl66" colspan="2">
</td>
<td class="xl120"></td>
</tr>
</table>
</div>
</body>
</html>

This seems to work with jQuery:
Download:
https://www.jqueryscript.net/demo/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel/
Source:
<script src="scripts/jquery.table2excel.js"></script>
Script:
$("#testTable").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Worksheet Name",
filename: "Products" //do not include extension
});
It will give you the download.

Checkbox check one at a time not working

My requirement here is to make user only check one checkbox at a time. I tried with the below code:-
$('input.chkclass').on('change', function () {
$('input.chkclass').not(this).prop('checked', false);
});
and HTML
<table id="trchkOptions" style='display: none' runat="server">
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
Option 1 To
RA 1, RA 2, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 7%;">
<input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>Option
2 To
Hemant Shah, Vimal Shah, Rushank Shah, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
Option 3 To,
RA 1, RA 2, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
</td>
</tr>
</table>
here is a live preview
But it is not working.
Note I don't want to use radiobutton here. I want it with checkbox only.
Kindly suggest what is wrong

Try
$('input.chkclass').not(this).attr('checked', false);
instead
$('input.chkclass').not(this).prop('checked', false);
It may work.
Demo:
$('input.chkclass').on('change', function() {
$('input.chkclass').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="trchkOptions" style='display: block' runat="server">
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 7%;">
<input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
</td>
</tr>
</table>

Do Like That..
Uncheck other checkbox during one checkbox
Disable other checkbox during one check
1.
$('input.chkclass').on('change', function () {
$('input.chkclass').prop('checked', false);
$(this).prop('checked', ture);
});
2.
$('input.chkclass').on('change', function () {
$('input.chkclass').prop('checked', false);
$('input.chkclass').prop('disabled',true);
$(this).prop('disabled',false);
$(this)..prop('checked', true);
});

Set textbox value which is dynamically added has display:none property in Jquery

Here the scenario is i have added dynamic row to table having tds as textbox and span tag,
Now am doing some calculation here in demo you will see a multiple factor textbox , on change will update my table to last column i.e (Calculated area provided) ,
Problem i facing is i need to fetch the updated calculate value of last column (four wheeler), I am able to update span but not textbox
JSFIDDLE DEMO
JS code:
$("#apnd_tr").on('click',function(){
$(".Total_result").parents('tr').before(row_1cnt);
$(".Total_result").parents('tr').before(row_2cnt);
});
var arrParkingRowIds = new Array();
$("#myMultipleFactor").on('input', function () {
var get_factorValue = $(this).val();
var counter = 0;
$("#myTable [class*=id_]").each(function () {
counter++;
if (counter == 4) {
var da = $(this).attr('class');
var fourWhlrValue = $("." + da).find("#txtprovidedNoParfetch").val();
var setResultProvidedParking = Number(fourWhlrValue) * Number(get_factorValue);
$("." + da).find("#txtprovidedPAfetch").next().html(setResultProvidedParking.toFixed(2));
$("." + da).find("#txtprovidedPAfetch").val(setResultProvidedParking);
counter = 0;
arrParkingRowIds.push(da);
}
});
});
$("#mValue").on('click', function () {
for (var i = 0; i < arrParkingRowIds.length; i++) {
var gData = arrParkingRowIds[i];
alert($("." + gData).find('td:eq(7)').html());
}
});
var row_1cnt='<tr class="id_108"> <td colspan="8"> <input type="text" value="2323232323" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="TextTitleFetch" class="prk_txt_style" /><span class="spnrowset">Row Bunglows</span> <div class="save_prk_row btn btn-mini btn-primary myBTNTEST" id="id_108" style="display: none;">save</div> </td> </tr> <tr class="id_108"> <td id="tdSrNofetch">1</td> <td id="tdtypeOfParkingfetch">Four wheeler</td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPRFetch" /><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPRfetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style clsCal1_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredNoParfetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedNoParfetch"><span class="spnrowset">3</span> </td> <td> <input type="text" disabled="" value="9" class="prk_txt_style clsShow1_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPAfetch"><span class="spnrowset">9</span> </td> <td> <input type="text" value="9" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPAfetch"><span class="spnrowset spnadd">9</span> </td> </tr> <tr class="id_108"> <td>2</td> <td>Two wheeler</td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPR2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPR2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style clsCal2_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredNoPar2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedNoPar2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" disabled="" value="9" class="prk_txt_style clsShow2_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPA2fetch"><span class="spnrowset">9</span> </td> <td> <input type="text" value="9.00" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPA2fetch"><span class="spnrowset spnadd">9.00</span> </td></tr> <tr class="id_108"> <td>3</td> <td>bicycle</td> <td> <input type="text" value="3" style="margin-bottom: 0px; width: 80% ! important; display: none;" class="prk_txt_style" id="txtrequiredPR3fetch"><span class="spnrowset">3</span> </td> <td><input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedPR3fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style clsCal3_108" id="txtrequiredNP3fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedNP3fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" disabled="" value="0" style="width: 105px; margin-left: 0px; display: none;" id="txtrequiredPA3fetch" class="prk_txt_style clsShow3_108"><span class="spnrowset">0</span> </td> <td> <input type="text" value="0.00" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedPA3fetch"><span class="spnrowset spnadd">0.00</span> </td> </tr>';
var row_2cnt=' <tr class="id_109"> <td colspan="8"> <input type="text" value="2323232323" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="TextTitleFetch" class="prk_txt_style" /><span class="spnrowset">Hospital</span> <div class="save_prk_row btn btn-mini btn-primary myBTNTEST" id="id_108" style="display: none;">save</div> </td> </tr> <tr class="id_109"> <td id="tdSrNofetch">1</td> <td id="tdtypeOfParkingfetch">Four wheeler</td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPRFetch" /><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPRfetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="5" class="prk_txt_style clsCal1_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredNoParfetch"><span class="spnrowset">5</span> </td> <td> <input type="text" value="5" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedNoParfetch"><span class="spnrowset">5</span> </td> <td> <input type="text" disabled="" value="15" class="prk_txt_style clsShow1_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPAfetch"><span class="spnrowset">15</span> </td> <td> <input type="text" value="15" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPAfetch"><span class="spnrowset spnadd">15</span> </td> </tr> <tr class="id_109"> <td>2</td> <td>Two wheeler</td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPR2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPR2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style clsCal2_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredNoPar2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedNoPar2fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" disabled="" value="9" class="prk_txt_style clsShow2_108" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtrequiredPA2fetch"><span class="spnrowset">9</span> </td> <td> <input type="text" value="9.00" class="prk_txt_style" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="txtprovidedPA2fetch"><span class="spnrowset spnadd">9.00</span> </td></tr> <tr class="id_109"> <td>3</td> <td>bicycle</td><td> <input type="text" value="3" style="margin-bottom: 0px; width: 80% ! important; display: none;" class="prk_txt_style" id="txtrequiredPR3fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedPR3fetch"><span class="spnrowset">3</span> </td><td> <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style clsCal3_108" id="txtrequiredNP3fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" value="3" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedNP3fetch"><span class="spnrowset">3</span> </td> <td> <input type="text" disabled="" value="0" style="width: 105px; margin-left: 0px; display: none;" id="txtrequiredPA3fetch" class="prk_txt_style clsShow3_108"><span class="spnrowset">0</span> </td> td> <input type="text" value="0.00" style="width: 105px; margin-left: 0px; display: none;" class="prk_txt_style" id="txtprovidedPA3fetch"><span class="spnrowset spnadd">0.00</span> </td></tr>';
HTML markup:
multiple Factor
<input type="text" value="3" tabindex="1" id="myMultipleFactor" />
<br><br>
<div id="apnd_tr" class="btnStyle">Append TR</div><br>
<div id="mValue" class="btnStyle">Calculate Value</div>
<br>
<table border="1" id="myTable">
<tr>
<th width="5%" rowspan="2">Sr. No.</th>
<th width="20%" rowspan="2">Type of Parking</th>
<th width="25%" colspan="2">Parking ratio</th>
<th width="25%" colspan="2">No. of Parking</th>
<th width="25%" colspan="2">Calculated Done</th>
</tr>
<tr>
<th width="12.5%">Required</th>
<th width="12.5%">Provided</th>
<th width="12.5%">Required</th>
<th width="12.5%">Provided</th>
<th width="12.5%">Required</th>
<th width="12.5%">Provided</th>
</tr>
<tr > <td class="Total_result" colspan="8">Total</td></tr>
</table>

After some R&d I figured it out what is causing issue .. its the text input html which are display:none and some places disabled, its not getting update or not stay editable (maybe jquery bug ).
Related thread on the issue -- - stackoverflow.com/questions/3537326/…
Fiddle demo
There can be two way to fix it ..
Quick and easy fix is to use element.attr("value" , "yourvalue") instead of usingelement.val().
Alternative fix to change type text to hidden (all places its just one e.g.)
.
<input type="text" value="2323232323" tabindex="1" style="margin-bottom: 0px; width: 80% ! important; display: none;" id="TextTitleFetch" class="prk_txt_style" />
<input type="hidden" value="2323232323" tabindex="1" id="TextTitleFetch" class="prk_txt_style" />
As much I understand those inputs are mostly for form data or internal use so u can keep them hidden type.
Updated input demo

Categories