Remove row when button is clicked - javascript

I am trying to do this using HtmlService in a Google App Script. I have researched it and I cannot figure out why the below doesn't work. https://jsfiddle.net/pfue7b71/
Script
function removeRow() {
// alert("run");
$(this).closest('tr').remove();
};
Html
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
</table>


It's because of the context of the function. The immediate code that runs on the onClick attribute, works using the object context, so it has the right reference to this as the current object, but the call to removeRow is made on Window context, so the reference to this is Window, and not the object. You could solve that with your current code doing this:
function removeRow(object){
$(object).closest('tr').remove();
};
And changing the calls to:
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
</table>
Here you go: https://jsfiddle.net/pfue7b71/2/
Also, for future reference, you should try using console.log instead of alert, and use it to log important things like, for example, $(this)


You need to make sure that this is referencing the DOM element, not the function.
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
</table>
You also need to rename the function to removeRow, as you're calling it in the HTML (was incorrect in fiddle).
function removeRow(e) {
$(e).closest('tr').remove();
};
https://jsfiddle.net/pfue7b71/3/

Related

The HTML is not updating on Jquery selector

I'm trying to retrive the HTML of element on click. This is the snippet
$( () => {
$( document ).on('click', 'button', function(){
const html = $('table').html();
console.log( html );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>
If I set a new value on the input element of each row, I expect a table HTML with input's value attribute with the correct strings
I don't know why the DOM is not updating, I added changes to the table's HTML, and it looks like as not changes. I tried to find the changes on different indexes and functions
$('table')[0].outerHTML
$('table')[0].innerHTML
$('table').clone().html()
$('table').html()
No one has the correct HTML. If I browse on the developer tools -> Elements tab I see the changes, but I can't retrieve them.
What do you propouse?

See comment inline:
$( () => {
$( document ).on('click', 'button', function(){
// Set the value attribute in the HTML to the entered value
$("input").attr("value", $("input").val());
const html = $('div').html();
console.log( html );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text">
<button>Save</button>
</div>

Update: You would have to map each field value to an array and set the values as attributes on the clone.
So, you can follow this pattern for other input like e.g. select.
serializeSelectValues – access and store the values
applySerializedSelect – apply the values
Note: If you want to handle advanced cloning, you will need to provide names with your input fields.
(($) => {
$.fn.reduce = function(callback, initial) {
return Array.prototype.reduce.call(this, callback, initial)
}
$.fn.serializeInputValues = function() {
return this.find('input').reduce((valueArr, input, index) => {
return valueArr.concat($(input).val())
}, [])
}
$.fn.applySerializedInput = function(serialized) {
this.find('input').each((index, input) => {
if (serialized[index]) $(input).attr('value', serialized[index])
})
return this
}
$.fn.cloneSerialized = function() {
return this.clone().applySerializedInput(this.serializeInputValues())
}
})(jQuery)
$(() => {
$(document).on('click', 'button', function() {
$('body').append($('.serializable').cloneSerialized())
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="serializable">
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>
A note on $.fn.clone from the docs.
Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements. When cloning input elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements.
Alternatively... avoid input fields entirely.
This way you can grab the text value of each cell without all the messy work.
$(() => {
$(document).on('click', 'button', function() {
$('body').append($('.serializable').clone())
})
});
td { border: thin solid grey }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="serializable">
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
<th>Input 4</th>
<th>Input 5</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
<tr>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
<td contenteditable=true></td>
</tr>
</tbody>
</table>
<button>Clone table!</button>

New table row is not creating using JQuery clone method

I have a table in in that table I have a button for adding new row .In that table I want to dynamically add new row when user will click the add row button. I but it is not working. The HTML and JQuery code is there in JSFiddle . Please suggest.
<table id="myTable" border="1">
<tr>
#*<td>SR</td>*#
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
#*<td>1</td>*#
<td><input size=25 type="text" id="nmbox" /></td>
<td><input size=25 type="text" id="agbox" /></td>
<td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addRow" value="Add " onclick="insRow()" /></td>
</tr>
</table>
var new_row1 = $('#mytable tr:last').clone();
$('#mytable').append(new_row1);

1) id selector mismatched $('#myTable tr:last'). caps T
2) id should be unique for each element .
function insRow(){
var new_row1 = $('#myTable tr:last').clone();
$('#myTable').append(new_row1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1">
<tr>
#*<td>SR</td>*#
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
#*<td>1</td>*#
<td><input size=25 type="text" /></td>
<td><input size=25 type="text" /></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" value="Add " onclick="insRow()" /></td>
</tr>
</table>

To add child elements into cloned one without jQuery:
clone = ElementTo.cloneNode();
while (ElementToBeCloned.firstChild){
clone.appendChild(ElementToBeCloned.lastChild);
}

user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working

/* user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working. */
<script>
function max(){ /* this is the function to check the input feilds and if find mistake alert the message in to an alert box */
_aa=document.getElementById("s1").value
if(_aa.length>10)
xx="name should be less then or equal to 10 characters"
else xx=""
_bb=document.getElementById("s2").value
if(_bb.length>10)
yy="last name should be less then or equal to 10 characters"
else yy=""
_cc=document.getElementById("s3").value
if(_cc.length<6)
zz="street adress should be greater then or equal to 6 characters"
else zz=""
_dd=document.getElementById("s4").value
if(isNaN(_dd)){jj="fill"}
else if(_dd.length!=5 || _dd.length!=0){jj="fill"} \\this does'nt work
else{jj=""}
alert([xx,yy,zz,jj]);
}
</script>
<html>
<head>
<title>Form</title>
</head>
<body>
<form >
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM <hr/></td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text"id="s1"/ ></td>
<td><p id="a1"></p></td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text"id="s2" / ></td>
<td><p id="a2"></p></td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text"id="s3" maxlength="" / ></td>
<td><p id="a3"></p></td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number"id="s5" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number"id="s6" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio"id="s7"value="6.75" name="bt" onclick="calculate(this.value)"/ >UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s8" value="8.55" name="bt" onclick="calculate(this.value)" / >UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s9"value="10.00" name="bt" onclick="calculate(this.value)" / >FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number"id="s10" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number"id="s11" min="" max="" / ></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number"id="s12" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio"id="s13"value="" name="bn" / >American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s14" value="" name="bn" / >Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s15"value="" name="bn" / >Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s16"value="" name="bn" / >MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s17"value="" name="bn" / >Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number"id="s18" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()" >place</button></td>
<td><input type="submit"id="s21" value="Cancel" / ></td>
</tr>
</table>
</body>
</html>

variable declaration was wrong
Declare all your element value in function start
And declare the all _aa with variable like var _aa
Don't forget to add {} in if else condition
Why is not working?
Because you are declare the _dd in if (_cc.length < 6) in else condition ._dd always null until if (_cc.length < 6) else statement execute
function max() {
var _aa = document.getElementById("s1").value
var _bb = document.getElementById("s2").value
var _cc = document.getElementById("s3").value
var _dd = document.getElementById("s4").value
if (_aa.length > 10) {
var xx = "name should be less then or equal to 10 characters"
} else {
xx = ""
}
if (_bb.length > 10) {
var yy = "last name should be less then or equal to 10 characters"
} else {
yy = "";
}
if (_cc.length < 6) {
var zz = "street adress should be greater then or equal to 6 characters"
} else {
zz = ""
}
if (isNaN(_dd)) {
var jj = "fill"
} else if (_dd.length != 5 || _dd.length != 0) {
jj = "fill length"
} else {
jj = ""
}
console.log([xx, yy, zz, jj]);
}
<form>
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM
<hr/>
</td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text" id="s1" /></td>
<td>
<p id="a1"></p>
</td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text" id="s2" /></td>
<td>
<p id="a2"></p>
</td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text" id="s3" maxlength="" /></td>
<td>
<p id="a3"></p>
</td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number" id="s5" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number" id="s6" min="" max="" /></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio" id="s7" value="6.75" name="bt" onclick="calculate(this.value)" />UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s8" value="8.55" name="bt" onclick="calculate(this.value)" />UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s9" value="10.00" name="bt" onclick="calculate(this.value)" />FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number" id="s10" min="" max="" /></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number" id="s11" min="" max="" /></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number" id="s12" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio" id="s13" value="" name="bn" />American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s14" value="" name="bn" />Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s15" value="" name="bn" />Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s16" value="" name="bn" />MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s17" value="" name="bn" />Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number" id="s18" min="" max="" /></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()">place</button></td>
<td><input type="submit" id="s21" value="Cancel" /></td>
</tr>
</table>

django: access elements from another template

project/
|----app1/
|----templates/
app1/
|----home.html
|----exchange.html
I need to perform calculations on the home.html using javascript, but some data is stored in the table inside exchange.html, and I don't want to put them together under one page. how would I go about that. I am very new to python and django.
{% include "exchange.html" %}
I tried this on home.html but it loads all the content which i don't need. can anybody help please.
<table class="table table-hover">
<caption>Exchange rate</caption>
<thead>
<tr>
<th></th>
<th>GBP</th>
<th>EUR</th>
<th>USD</th>
<th>CAD</th>
<th>AUD</th>
</tr>
</thead>
<tbody>
<tr>
<td>GBP</td>
<td><input type="number" value="1" readonly></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
</tr>
<tr>
<td>EUR</td>
<td><input class="rate" type="number"></td>
<td><input type="number" value="1" readonly></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
</tr>
<td>USD</td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input type="number" value="1" readonly></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<tr>
<td>CAD</td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input type="number" value="1" readonly></td>
<td><input class="rate" type="number"></td>
</tr>
<tr>
<td>AUD</td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input type="number" value="1" readonly></td>
</tr>
</tbody>
</table>
I have this table in exchage.html where users can input the exchange rate, and I need to to do some calculation on home.html using the relevant rate.

You want to create a small piece of html that contains only the information that you need, and put it in another file, calculations.html for example. You don't put all of the code from exchange.html in there, only the duplicated part.
Then use the include tag to add that HTML from both the exchange.html and home.html.
{% include calculations.html %}

Subtract HTML Textbox Values using jQuery / JavaScript

I want to subtract the values once a user put the value in textfield but unable to do so. Here is an example of sum but I want it same for subtracting:
<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
<tbody>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>2</td>
<td>Eggs</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>3</td>
<td>Bread</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>4</td>
<td>Soap</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</tbody>
</table>
Here is jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".txt").each(function(){
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum(){
var sum = 0;
$(".txt").each(function(){
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum.toFixed(2));
}
</script>

You can add a total value, and substract every time you insert something new.
$(document).ready(function(){
$("#sum").data('total', 600).html(600); // add total value of 600
$(".txt").each(function(){
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum(){
var $sum = $("#sum");
var sum = parseInt($sum.data('total'), 10); // get total value
$(".txt").each(function(){
if (!isNaN(this.value) && this.value.length != 0) {
sum -= parseFloat(this.value);
}
});
$sum.html(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table style="border-collapse:collapse;background-color:#E8DCFF" border="1" width="300px">
<tbody>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>2</td>
<td>Eggs</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>3</td>
<td>Bread</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr>
<td>4</td>
<td>Soap</td>
<td><input class="txt" name="txt" type="text"></td>
</tr>
<tr id="summation">
<td></td>
<td align="right">Total: </td>
<td align="center"><span id="sum"></span></td>
</tr>
</tbody>
</table>

Categories

Resources