Dynamically deleting selected rows on button press in Javascript - javascript

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>

Related

Trying to figure out how to delete rows in table with delete all the rows in the localstorage

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>

How do I make a dynamic drop down menu using JavaScript

I have it so you type in on a form a maximum number then it creates a table after clicking a button.
I want it so after you click the button to add the row it writes a drop down menu in the table that goes from 0 to the number you put in the form
This is my HTML code:
<html>
<head>
<title>Form Generator</title>
<link rel="stylesheet" type="text/css" href="../css/converter.css"/>
<script language="JavaScript" src="../js/exercise2.js" type="text/javascript">
</script>
</head>
<body>
<p>
<button class="button" data-modal="M2KM">Form Generator</button>
</p>
<div id="M2KM" class="modal">
<div class="modal-content">
<div class="form">
<a class="close">×</a>
<form action="">
<textarea rows="1" name="Section" id="Section" cols="10">Section</textarea>
<textarea rows="1" name="Max" id="Max" cols="10">Max</textarea>
<textarea rows="1" name="Comment" id="Comment" cols="10">Comment</textarea>
<textarea rows="1" name="Mark" id="Mark" cols="10">Mark</textarea>
<input type="button" value="Add Row" name="Add Row" onclick="conversionTable('table')" />
<input type="reset" value="Clear" name="Clear">
</form>
<div id="conversion">
<table id="table">
<thead>
<tr>
<th>Section</th>
<th>Max</th>
<th>Comment</th>
<th>Mark</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
This is my JavaScript Code:
function conversionTable(tagId, from, to)
{
var section = document.getElementById("Section").value;
var max = document.getElementById("Max").value;
var comment = document.getElementById("Comment").value;
var mark = document.getElementById("Mark").value;
from = 0;
to = 1;
var total = 0;
var arr = [];
var conv = document.getElementById(tagId) ;
var pre = document.createElement("pre");
conv.appendChild(pre);
var body= conv.appendChild(document.createElement("tbody"));
for (var i=from; i<to; i++)
{ row = body.appendChild(document.createElement("tr"));
var data=row.appendChild(document.createElement("td"));
data.appendChild(document.createTextNode(section));
data=row.appendChild(document.createElement("td"));
data.appendChild(document.createTextNode(max));
var data=row.appendChild(document.createElement("td"));
data.appendChild(document.createTextNode(comment));
data=row.appendChild(document.createElement("select"));
data.setAttribute("id", "mySelect");
row.appendChild(data);
var z = document.createElement("option");
z.setAttribute("value", "volvocar");
var t = document.createTextNode("1");
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
total = total + mark;
var obj = {section: section, max: max, comment: comment, mark: mark};
arr.push(obj);
}
}
This is a screenshot showing test data:
Here's a simplified example that adds a select element with a number of options equal to the number entered by the user.
See comments in the code for an explanation of how it works.
// Identifies existing HTML elements
const maxInput = document.getElementById("max");
const button = document.getElementById("button");
const table = document.getElementById("table");
// Calls `addDropdown` when `button` is clicked
button.addEventListener("click", addDropdown);
// Defines the event listener
function addDropdown(event) { //(`event` object is available if we want it)
// Gets value from input
let max = parseInt(maxInput.value);
// Exits function early if maxInput doesn't have a number
if(!max){ return; }
// Defines the new elements
const row = document.createElement("tr");
const cell = document.createElement("td");
const dropdown = document.createElement("select");
// Enumerates options and adds them to the select element
let optNumber = -1;
while(++optNumber <= max){
let optionElement = document.createElement("option");
optionElement.value = "opt" + optNumber;
optionElement.innerHTML = "Option " + optNumber;
dropdown.appendChild(optionElement);
}
// Adds the elements to the page
cell.appendChild(dropdown);
row.appendChild(cell);
table.appendChild(row);
}
<label>
<span>Enter maximum value for dropdown:</span>
<input id="max" value="5" />
</label>
<br />
<button id="button">Add Dropdown in New Row</button>
<div id="container">
<table id="table"></table>
</div>

object HTMLInputElement appears instead of checkbox

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>

calulate function in javascript for dynamically added field

I want to calculate subtotal and total for my form
i tried some javascripts but dident worked for me
some of them were only for static table since i am adding dynamic rows they were not helpfull
can any one help me to add script
formula
1) subtotal = amount1+ amount2+...+ amount(n)
2) total = total - discount
here are my codes
function calculateSubTotal()
{
var SubTotal = +amnt.value + +amnt.value;
document.getElementById("sub_total").value = isNaN(SubTotal) ? 0 : SubTotal;
}
document.getElementById("amnt").onchange = calculateSubTotal;
document.getElementById("amnt").onkeyup = calculateSubTotal;
function calculate(elm) {
var tr = elm;
while ((tr = tr.parentElement) && tr.tagName !== 'TR');
var inputs = tr.querySelectorAll('input,select');
var myBox1 = inputs[2].value;
var myBox2 = inputs[3].value;
var myResult = myBox1 * myBox2;
inputs[4].value = myResult;
}
var count = "1";
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 1
var td1 = document.createElement("TD")
var strHtml1 = "<INPUT TYPE=\"text\" NAME=\"i_name[]\" PLACEHOLDER=\"Name\" SIZE=\"30\">";
td1.innerHTML = strHtml1.replace(/!count!/g,count);
// create table cell 2
var td2 = document.createElement("TD")
var strHtml2 = "<INPUT TYPE=\"text\" NAME=\"i_desc[]\" PLACEHOLDER=\"Description\" SIZE=\"30\">";
td2.innerHTML = strHtml2.replace(/!count!/g,count);
// create table cell 3
var td3 = document.createElement("TD")
var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"i_qty[]\" PLACEHOLDER=\"QTY\" ID=\"qty\" ONINPUT=\"calculate(this)\" SIZE=\"30\">";
td3.innerHTML = strHtml3.replace(/!count!/g,count);
// create table cell 4
var td4 = document.createElement("TD")
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"i_rate[]\" PLACEHOLDER=\"Rate\" ID=\"rate\" ONINPUT=\"calculate(this)\" SIZE=\"30\">";
td4.innerHTML = strHtml4.replace(/!count!/g,count);
// create table cell 5
var td5 = document.createElement("TD")
var strHtml5 = "<INPUT TYPE=\"text\" NAME=\"i_amnt[]\" PLACEHOLDER=\"Amount\" ID=\"amnt\" >";
td5.innerHTML = strHtml5.replace(/!count!/g,count);
// create table cell 4
var td6 = document.createElement("TD")
var strHtml6 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">";
td6.innerHTML = strHtml6.replace(/!count!/g,count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
function delRow()
{
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !="TR");
current.parentElement.removeChild(current);
}
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" >
<h3> Add New Purchase</h3>
<div class="vali-form">
<div class="col-md-3 form-group2 group-mail">
<select required name="s_account">
<option >--Select Account Name--</option>
<?php while ($row = mysqli_fetch_array($run)) {
echo '<option value="'.$row['acc_name'].'">'.$row['acc_name'].'</option>';}?>
</select>
</div>
<div class="clearfix"> </div>
<div class="col-md-4 form-group1 form-last">
<label class="control-label">Reminder</label>
<input type="text" name="s_rem" placeholder="" required="">
</div>
<div class="col-md-4 form-group1 group-mail">
<label class="control-label">Invoice Date</label>
<input type="date" name="s_idate" class="form-control1 ng-invalid ng-invalid-required" ng-model="model.date" placeholder="" required="">
</div>
<div class="col-md-4 form-group1 group-mail">
<label class="control-label ">Due Date</label>
<input type="date" name="s_ddate" class="form-control1 ng-invalid ng-invalid-required" ng-model="model.date" required="">
</div></div>
<div class="clearfix"> </div>
<div class="col-md-12 form-group1 form-last">
<div class="table-responsive">
<TABLE ID="tblPets" class="table table-striped table-bordered table-hover">
<tr>
<th><center>Item Name</center></th>
<th><center>Description</center></th>
<th><center>Qty.</center></th>
<th><center>Rate</center></th>
<th><center>Amount</center></th>
<th><center><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></center></th>
</tr>
<tr>
<th><center><div class="col-md-12 form-group2 group-mail">
<select name="i_name[]">
<option >Select</option>
<?php while ($row1 = mysqli_fetch_array($run1)) {
echo '<option value="'.$row1['itm_name'].'">'.$row1['itm_name'].'</option>';}?>
</select>
<div></center></th>
<th><center><INPUT TYPE="text" NAME="i_desc[]" PLACEHOLDER="Description" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="i_qty[]" PLACEHOLDER="QTY" ID="qty" ONINPUT="calculate(this)" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="i_rate[]" PLACEHOLDER="Rate" ID="rate" ONINPUT="calculate(this)" SIZE="30"></center></th>
<th><center><INPUT TYPE="text" NAME="i_amnt[]" PLACEHOLDER="Amount" ID="amnt" ></center></th>
<th></th>
</tr>
</TABLE>
<div class="clearfix"> </div>
<div class="vali-form">
<div class="col-md-6 form-group1 form-last">
<label class="control-label">Subtotal</label>
<input type="text" name="s_stotal" placeholder="" required="">
</div>
<div class="col-md-6 form-group1 form-last">
<label class="control-label">Discount</label>
<input type="text" name="s_discount" placeholder="" required="">
</div>
<div class="col-md-6 form-group1 form-last">
<label class="control-label">Total</label>
<input type="text" name="s_total" placeholder="" required="">
</div>
<div class="col-md-6 form-group1 form-last">
<label class="control-label">Balance Due</label>
<input type="text" name="s_bald" placeholder="" required="">
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-12 form-group">
<button type="submit" name="Submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
<div class="clearfix"> </div>
</div>
</form>
If I understood you correctly, the code you are looking for should look something like this:
var values = document.querySelectorAll('input.amnt'),//find all inputs
//that you need to add
//use regular dom selector
//like in css
subtotal = 0;
for(var i = 0, ; = values.length; i<l; i++ ) {
subtotal += values[i].value;
}
It'll always add all the vales in the documents, you can add or remove data, doesn't matter.
PS please do not use <center> tag - it's deprecated, you should be using css for that.
A little something I put together after reading your issue. This still needs plenty of work doing to it but this should get you on the right lines.
I have added comments within the source code to explain step by step.
Add more will duplicate the contents of the table but this is just for demo use to show you can still trigger events with dynamic elements.
Discount will be deducted as a percent of the price.
$(document).on('input','.Calc',function(){
// Reset Total
var Total=0;
$('.Inputs').each(function(){
// Reset Price.
var Price=0;
// Reset Decution.
var Deduction=0;
// Price x Quantity
Price=parseFloat($(this).find(".Qty").val())*parseFloat($(this).find(".Price").val());
var Percent=parseFloat($(this).find(".Disc").val());
// If Discount is greater than 0 make deductions.
if(Percent>0){
// Calculate the discount Percent of the Price.
// Example 300*40/100 = 120
Deduction=Price*Percent/100;
// Minus discount from the price.
Price=Price-Deduction;
}
// Sub total, add Price to existing Total
Total=Total+Price;
// Display Price and savings "£0 (Save £0)"
$(this).find("span").html('£'+Price+' <small>(Save £'+Deduction+')</small>');
});
// Display New Total.
$('#Total').html('Sub Total £'+Total);
});
//--------- Clone / Append (Demo Use)
$('#More').on('click',function(){
// This is used to show you can run the functions even if the elements are dynamic.
// (This is very messy but it shows that it works)
var target = document.getElementById('MyForm');
var tr = document.createElement('tr');
tr.setAttribute('class', 'Inputs'); // Edit this
target.appendChild(tr);
var td1 = document.createElement('td');
tr.appendChild(td1);
td1.innerHTML='Qty';
var td2 = document.createElement('td');
tr.appendChild(td2);
td2.innerHTML='£';
var td3= document.createElement('td');
tr.appendChild(td3);
// Add inputs.
td3.innerHTML='Discount:';
var QTY = document.createElement('input');
var PRICE = document.createElement('input');
var DISC = document.createElement('input');
QTY.setAttribute('type','text');
QTY.setAttribute('class','Qty Calc');
QTY.setAttribute('value',1);
PRICE.setAttribute('type','text');
PRICE.setAttribute('class','Price Calc');
PRICE.setAttribute('value',0);
DISC.setAttribute('type','text');
DISC.setAttribute('class','Disc Calc');
DISC.setAttribute('value',0);
td1.appendChild(QTY);
td2.appendChild(PRICE);
td3.appendChild(DISC);
td3.innerHTML=td3.innerHTML+'% <span></span>';
});
/* CSS for Demo Use. */
.Qty{width:30px;}
.Price{width:70px;}
.Disc{width:30px;}
span{color:red;font-weight:bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="More">Add</button>
<table id="MyForm">
<tr class="Inputs">
<td>Qty<input type="text" class="Qty Calc" value="1"/></td>
<td> £<input type="text" class="Price Calc" value="0"/></td>
<td> Discount:<input type="text" class="Disc Calc" value="0"/>% <span></span></td>
</tr>
</table>
<span id="Total"></span>
If you have any questions about the source code above please leave a comment below and I will reply as soon as possible.
I hope this helps. Happy coding!
This is using jQuery
Update: Replaced clone() with createElement()

On enter, search for the string in db

i have this code:
<body>
Please make your selection:
<div id="div1">
<tr>
<td>
<input type="button" value="Insert" onclick="form.html" />
</td>
<td>
<input type="button" value="View" onclick="window.location='view-master.php';" />
</td>
<td>
<input type="button" value="Edit" onclick="edit.html" />
</td>
<td>
<input type="button" value="Search" onclick="showsearchform()" />
</td>
</tr>
</div>
</body>
then the JS:
<script type="text/javascript">
function showsearchform()
{
var tr = document.createElement("tr");
var td = document.createElement("td");
var label = document.createElement("label");
label.id = "label1";
label.value = "Surname";
var input = document.createElement("input");
tr.appendChild(td);
td.appendChild(label);
td.appendChild(input);
var element = document.getElementById("div1");
element.appendChild(tr);
$('#input').keyup(function (e) {
var str = $('#search').val();
var url = "search.php";
if (e.keyCode == 13) {
location.href = url;
}
});
}
</script>
when i click on search i get the inoutbox, but what i want to do now is when i type a surname into the box and hit enter i want to connect to the db and search for this surname
I can do the db stuff just not sure of the JS and Jquery
html
<input type="text" name="txt" onkeypress="Search" />
javascript
<script>
function Search(e){
if(e.keyCode === 13){// enter key value is 13
**// Your ajax request write here , and in server side you can
**check corresponding results in database and return if data is present and take it as ajax replay****
}
return false;
}
</script>

Categories

Resources