I'm trying to have a checkbox appear in the Collected column after pressing the Add Item button however, [object HTMLInputElement] appears instead. I've tried appendChild, insertBefore and removing innerHTML but obviously that's made things worse. I've tried searching on Google and Stackoverflow for similar questions for relevant answers but no one's had a similar situation to me.
function addItem() {
var a = String(document.getElementById("it").value);
var b = parseFloat(document.getElementById("iq").value);
if (a.length === 0 || isNaN(b)) {
window.alert("Required field empty, please enter values in both boxes.");
} else {
var table = document.getElementById("list");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cb = document.createElement("INPUT");
cb.setAttribute("type", "checkbox");
cell1.innerHTML = a;
cell2.innerHTML = b;
cell3.innerHTML = cb;
}
}
<table id="list" align="center">
<tr>
<td colspan="3">
<input id="it" name="item" type="text" placeholder="Item" />
<input id="iq" name="quantity" type="text" placeholder="No." />
<br />
<input value="Add Item" type="submit" onclick="addItem()" />
<hr />
</td>
</tr>
<tr>
<td><span>Item</span></td>
<td><span>Quantity</span></td>
<td><span>Collected</span></td>
</tr>
</table>
You need to use appendChild and not overwrite the innerHTML of the cell. You are adding a new element to the DOM. This can be done by writing the HTML into the cell, but you have created the element so just append it..
function addItem() {
var a = String(document.getElementById("it").value);
var b = parseFloat(document.getElementById("iq").value);
if (a.length === 0 || isNaN(b)) {
window.alert("Required field empty, please enter values in both boxes.");
} else {
var table = document.getElementById("list");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cb = document.createElement("INPUT");
cb.setAttribute("type", "checkbox");
cell1.innerHTML = a;
cell2.innerHTML = b;
cell3.appendChild(cb);
}
}
<table id="list" align="center">
<tr>
<td colspan="3">
<input id="it" name="item" type="text" placeholder="Item" />
<input id="iq" name="quantity" type="text" placeholder="No." />
<br />
<input value="Add Item" type="submit" onclick="addItem()" />
<hr />
</td>
</tr>
<tr>
<td><span>Item</span></td>
<td><span>Quantity</span></td>
<td><span>Collected</span></td>
</tr>
</table>
Related
So, I was trying to figure out how to delete a row in a table without deleting all the rows located in the local storage.
Here is my JS code, a table that collects data from a form.
var arr = new Array();
//Add data to memory
function addData() {
getData();
arr.push({
contentId: document.getElementById("contentId").value,
channel: document.getElementById("channel").value,
follows: document.getElementById("follows").value,
unfollows: document.getElementById("unfollows").value,
likes: document.getElementById("likes").value,
shares: document.getElementById("shares").value,
views: document.getElementById("views").value,
reaches: document.getElementById("reaches").value,
postDate: document.getElementById("postDate").value
});
localStorage.setItem("localData", JSON.stringify(arr));
showData();
}
function getData() {
var str = localStorage.getItem("localData");
if (str != null)
arr = JSON.parse(str);
}
function deleteData() {
localStorage.clear()
}
function showData() {
getData();
var tbl = document.getElementById("myTable");
var x = tbl.rows.length;
while (--x) {
tbl.deleteRow(x);
}
for (i = 0; i < arr.length; i++) {
var r = tbl.insertRow();
var cell1 = r.insertCell();
var cell2 = r.insertCell();
var cell3 = r.insertCell();
var cell4 = r.insertCell();
var cell5 = r.insertCell();
var cell6 = r.insertCell();
var cell7 = r.insertCell();
var cell8 = r.insertCell();
var cell9 = r.insertCell();
cell1.innerHTML = arr[i].contentId;
cell2.innerHTML = arr[i].channel;
cell3.innerHTML = arr[i].follows;
cell4.innerHTML = arr[i].unfollows;
cell5.innerHTML = arr[i].likes;
cell6.innerHTML = arr[i].shares;
cell7.innerHTML = arr[i].views;
cell8.innerHTML = arr[i].reaches;
cell9.innerHTML = arr[i].postDate;
}
}
Therefore, could anyone give me a little insight into the best solution to deleting the rows in the table by using Js.
Suppose you may need my HTML code.
<div class="formData">
<form onsubmit="addData(); return false;">
<label for="contentId">Enter ContentID:</label>
<input type="text" id="contentId" placeholder="ContentID" /></br>
<label for="follows">Enter in the social site:</label>
<input type="text" id="channel" placeholder="channel" /></br>
<label for="channel">Enter # of new followers:</label>
<input type="number" id="follows" placeholder="followers" /></br>
<label for="unfollows">Enter the # of unfollowers:</label>
<input type="number" id="unfollows" placeholder="Unfollowers" /></br>
<label for="likes">Enter the # of likes:</label>
<input type="number" id="likes" placeholder="Likes" /></br>
<label for="shares">Enter the # of shares:</label>
<input type="text" id="shares" placeholder="Shares" /></br>
<label for="views">Enter the # of views:</label>
<input type="text" id="views" placeholder="Views" /></br>
<label for="reaches">Enter the # of reaches:</label>
<input type="text" id="reaches" placeholder="reaches" /></br>
<label for="reaches">Date Posted:</label>
<input type="date" id="postDate" placeholder="date" /></br>
<br>
<input type="submit" value="Add data" />
<input type="reset" value="clear" />
<input type="button" value="delete" onclick="deleteData();" />
</form>
</div>
<h3>Monthly Social Media Data</h3>
<table id="myTable" border=1>
<tr>
<th>
Content ID
</th>
<th>
Channel
</th>
<th>
Followers
</th>
<th>
Unfollowers
</th>
<th>
Likes
</th>
<th>
views
</th>
<th>
Shares
</th>
<th>
Reaches
</th>
<th>
Date Posted
</th>
</tr>
</table>
<script>
showData();
</script>
I have a jsp page which is
"addSource.jsp"
present in eclipse as shown in the picture.
Now my question is i have a javascript function where i have to give "addSource.jsp" in it so that it can move to that page from the current jsp page on button click.The code is as follows
function addRow(type) {
if (type == '') {
alert("Field is empty");
}
else {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "text"; //set the element type
element1.setAttribute('id', 'source'); //set the id attribute
element1.setAttribute('name','source'+rowCount);
element1.setAttribute('value',type);
cell1.appendChild(element1);
}
}
function generate1() {
var table = document.getElementById('my_table');
var rowCount = table.rows.length;
alert(rowCount);
var f = document.form;
f.target="";
f.method="post";
f.action= 'addSource.jsp?rowCount='+rowCount;
}
<form id="form">
<input type="text" id="origin" name="element"/>
<table id="my_table">
<thead><tr>
<th>Source</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="Add row" name="add" onClick="addRow(document.forms[0].element.value)" />
<input type="submit" value=" Save" />
You can use location.href Add an id to your form (for example formId) and use something like this:
<script type="text/javascript">
document.getElementById("formId").onclick = function () {
location.href = "addSource.jsp";
};
var x=1
function appendRow(type)
{
var d = document.getElementById('div');
d.innerHTML += "<input type='text' id='source' name='source' value='"+ type +"'><br >";
}
<form action="Source" method="post">
<input type="text" id="origin" name="origin"/>
<div id="div">
<button onclick ="appendRow(document.forms[0].origin.value)" value="Add Row">Add Row</button>
</div>
<input type="submit" name="Save" value=" Save" />
<hr/>
</form>
Controller
#RequestMapping(value = "/Source",params="Save", method = RequestMethod.POST)
public String source(Model model,HttpServletRequest req,HttpServletResponse res,#RequestParam("source") List<String> ola) {
System.out.println("size is:" +ola.size());
for(int i=0; i<ola.size() ;i++) {
String srh = ola.get(i);
System.out.println("srh value is:" +srh);
}
return "redirect:/createPoints";
}
Add dynamically rows when user click on button. I made a script but it does not work plz help me out
<script>
var t;
t=2;
function Insert(){
var tab=document.getElementById("mytable");
var row=insertRow(t);
var cell1=insertCell(0);
var cell2=insertCell(1);
var cell3=insertCell(2);
var cell4=insertCell(3);
t=t+1;
cell2.setAttribute('contenteditable','true');
cell3.setAttribute('contenteditable','true');
cell4.setAttribute('contenteditable','true');
}
</script>
Html
<input type="button" onclick="Insert()" name="Insert Row" value="Insert Row" />
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell3 = row.insertCell(0);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="100px" border="1">
<TR>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
change your script like
<script>
var t;
t=2;
function Insert(){
var tab=document.getElementById("mytable");
var row=tab.insertRow(t);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
t=t+1;
cell2.setAttribute('contenteditable','true');
cell3.setAttribute('contenteditable','true');
cell4.setAttribute('contenteditable','true');
}
</script>
I have code written so that when a user enters a name and type and presses "add", it adds the name, type, availability and a delete button to the list. I would like that when the delete button is pressed, the corresponding row is deleted.
My JavaScript:
function AddToWishlist2() {
var table = document.getElementById("WishListTable");
nameInput2 = document.getElementById("API2").value;
search2();
radiobutton1 = document.getElementById("radio-choice-1-1").value;
radiobutton2 = document.getElementById("radio-choice-2-2").value;
// this sets the value to TV show or Movie
if (document.getElementById("radio-choice-1-1").checked == true) {
radiobuttonfinal = radiobutton1;
}
else if (document.getElementById("radio-choice-2-2").checked == true) {
radiobuttonfinal = radiobutton2;
}
//setting the value of radio button to a single switching variable
var row = table.insertRow(1);
var cell4 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell2 = row.insertCell(2);
if (nameInput2 != "" && radiobuttonfinal != 0 ) {
cell4.innerHTML = '<input id="Button" type="button" value="Delete" />';
// JUST A BULLET HERE WITH AN ONCLICK FUNCTION THAT REMOVES THE ROW WITH var Delete = row.delete(0);
//will have a bullet point
cell1.innerHTML = nameInput2;
//Title prints user input of title
cell2.innerHTML = radiobuttonfinal;
//Type prints user input of type
cell3.innerHTML = GetStatus2();
}
//if there is an entry in title and a radio button checked, it pushes it
alert(nameInput2 + " has been added to your WishList\n\nClick View My WishList to view your WishList");
//if there is an entry in title and a radio button checked, it pushes it
}
//Page two function checks questions and adds to wishlist
My HTML:
<div data-role="page" id="pagetwo">
<div> <center>
<h2> My WishList </h2>
</div>
<div>
<table align="center" style= "width:100%" id="WishListTable">
<tr>
<td> </td>
<td> Title </td>
<td> Type </td>
<td> Status </td>
</tr>
<tr>
<td></td>
</tr>
</table>
<center> <h5> Title: </h5>
<input type="text" name="WishListSearch" id="API2" class = "APIClass2">
<fieldset data-role="tvmshowtype">
<legend style = "text-align:center"> <h4> Type: </h4> </legend>
<input type="radio" name="radio-choice" id="radio-choice-1-1" value="TV Show"/>
<label for="radio-choice-1-1" style = "text-align:center">TV Show</label>
<input type="radio" name="radio-choice" id="radio-choice-2-2" value="Movie"/>
<label for="radio-choice-2-2" style = "text-align:center">Movie</label>
</fieldset>
<button onclick="AddToWishlist2()"> Add to My WishList</button>
Working fiddle
Add class delete-row to your delete button :
cell4.innerHTML = '<input id="Button" type="button" value="Delete" class="delete-row"/>';
Use jquery on() click event, like following code :
$(document).on('click','.delete-row', function(){
$(this).parents('tr').remove();
});
FULL CODE :
AddToWishlist2 = function() {
var table = document.getElementById("WishListTable");
nameInput2 = document.getElementById("API2").value;
//search2();
radiobutton1 = document.getElementById("radio-choice-1-1").value;
radiobutton2 = document.getElementById("radio-choice-2-2").value;
// this sets the value to TV show or Movie
if (document.getElementById("radio-choice-1-1").checked == true) {
radiobuttonfinal = radiobutton1;
}
else if (document.getElementById("radio-choice-2-2").checked == true) {
radiobuttonfinal = radiobutton2;
}
//setting the value of radio button to a single switching variable
var row = table.insertRow(1);
var cell4 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell2 = row.insertCell(2);
if (nameInput2 != "" && radiobuttonfinal != 0 ) {
cell4.innerHTML = '<input id="Button" type="button" value="Delete" class="delete-row"/>';
// JUST A BULLET HERE WITH AN ONCLICK FUNCTION THAT REMOVES THE ROW WITH var Delete = row.delete(0);
//will have a bullet point
cell1.innerHTML = nameInput2;
//Title prints user input of title
cell2.innerHTML = radiobuttonfinal;
//Type prints user input of type
cell3.innerHTML = GetStatus2();
}
//if there is an entry in title and a radio button checked, it pushes it
alert(nameInput2 + " has been added to your WishList\n\nClick View My WishList to view your WishList");
//if there is an entry in title and a radio button checked, it pushes it
}
//Page two function checks questions and adds to wishlist
$(document).on('click','.delete-row', function(){
$(this).parents('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="pagetwo">
<div> <center>
<h2> My WishList </h2>
</div>
<div>
<table align="center" style= "width:100%" id="WishListTable">
<tr>
<td> </td>
<td> Title </td>
<td> Type </td>
<td> Status </td>
</tr>
<tr>
<td></td>
</tr>
</table>
<center> <h5> Title: </h5>
<input type="text" name="WishListSearch" id="API2" class = "APIClass2">
<fieldset data-role="tvmshowtype">
<legend style = "text-align:center"> <h4> Type: </h4> </legend>
<input type="radio" name="radio-choice" id="radio-choice-1-1" value="TV Show"/>
<label for="radio-choice-1-1" style = "text-align:center">TV Show</label>
<input type="radio" name="radio-choice" id="radio-choice-2-2" value="Movie"/>
<label for="radio-choice-2-2" style = "text-align:center">Movie</label>
</fieldset>
<button onclick="AddToWishlist2()"> Add to My WishList</button>
I am making an php , mysql website for billing... I want to get the sum of the values in text box.. The rows can be added according to the user requirement... but .. I tried most of things.. but not getting right.... how to get the sum of all the textbox values in the last column rate... I mean without any user input such as button click..... could somebody help me with this code.....
thanks in advance..
code I made for adding rows to table..
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name="s_no[]";
element1.size="25";
element1.value = rowCount;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name="p_id[]";
element2.size="25";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name="p_name[]";
element3.size="25";
cell3.appendChild(element3);
var cell5 = row.insertCell(3);
var element5 = document.createElement("input");
element5.type = "text";
element5.name="mrp[]";
element5.size="25";
cell5.appendChild(element5);
var cell6 = row.insertCell(4);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "qty[]";
element6.size="25";
cell6.appendChild(element6);
var cell7 = row.insertCell(5);
var element7 = document.createElement("input");
element7.type = "text";
element7.name = "rate[]";
element7.size="25";
cell7.appendChild(element7);
var cell8 = row.insertCell(6);
var element8 = document.createElement("input");
element8.type = "checkbox";
element8.name = "check";
cell8.appendChild(element8);
}
Html code for table:
<th width="17%"><label>S.No</label></th>
<th width="17%">Product Id</th>
<th width="17%">Product Name</th>
<th width="17%">MRP</th>
<th width="17%">Qty</th>
<th width="18%">Rate</th>
<th width="18%">Check</th>
</tr>
Total
HTML:
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="qty[]" type="text" value="0" /><br />
<input name="sum" type="text" value="0" />
Javascript:
//Get a list of input fields to sum
var elements = document.getElementsByName("qty[]");
var element_array = Array.prototype.slice.call(elements);
//Assign the keyup event handler
for(var i=0; i < element_array.length; i++){
element_array[i].addEventListener("keyup", sum_values);
}
//Function to sum the values and assign it to the last input field
function sum_values(){
var sum = 0;
for(var i=0; i < element_array.length; i++){
sum += parseInt(element_array[i].value, 10);
}
document.getElementsByName("sum")[0].value = sum;
}
Try this:
$('input[name^="rate"]').change(function() {
var sum = 0;
$('input[name^="rate"]').each(function() {
sum = sum + parseInt($(this).val()); // Or parseFloat if you are going to allow floating point numbers.
});
console.log(sum);
//$('#total_input').val(sum); //Your input to show the total
//$('#total_input').html(sum); //If is div, paragraph or another type of container.
});
Is important to make sure the inputs only allow numbers.
HTML
<?php
for($i=1;$1<=5;$i++)
{
?>
<input type="text" id="rate<?php echo $i; ?>" class="rate" name="rate<?php echo $i; ?>">
<?php
}
?><input type="text" name="sum" name"sum">
jQuery
<script type="text/javascript">
$(document).ready(function()
{
for($j=1;$j<=5;$j++)
{
$('#rate'+$j).val('0');
}
});
$sum=0;
$(".rate').keyup(function(){
for($j=1;$j<=5;$j++)
{
$sum=$sum+$('#rate'+$j).val();
alert($sum);
}
$(".sum").html('$sum');
});
</script>
You can iterate on all input elemements using $.each() and get their values.
JavaScript
$(function(){
var inputs = $("input");
inputs.blur(function(){
var total = 0;
$.each(inputs, function(input){
var num = parseInt(inputs[input].value);
total += (!isNaN(num))? num : 0;
});
$("#total").html(total)
HTML
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<p>
Total : <span id="total"></span>
</p>
Working Example http://jsfiddle.net/w0029xuz/