Here is an HTML file I have found on internet :
<HTML>
<HEAD>
<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(el, backColor,textColor){
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
}
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;
try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;
}
function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i<a_obj.cells.length;i++)
a_obj.cells(i).style.color=a_color;
}
</script>
</HEAD>
<BODY>
<br><br><br>
<table border=1 align=center>
<caption>Statistics</caption>
<th>Year</th>
<th>Team</th>
<tr onClick="HighLightTR(this,'#c9cc99','cc3333');">
<td align=right>1930</td>
<td align=right>Detroit</td>
</tr>
<tr onClick="HighLightTR(this,'#c9cc99','cc3333');">
<td align=right>1933</td>
<td align=right>Detroit</td>
</tr>
<tr onClick="HighLightTR(this,'#c9cc99','cc3333');">
<td align=right>1934</td>
<td align=right>Detroit</td>
</tr>
<tr onClick="HighLightTR(this,'#c9cc99','cc3333');">
<td align=right>1935</td>
<td align=right>Detroit</td>
</tr>
</table>
</BODY>
</HTML>
If I load it in a webbrowser with :
WebBrowser1.Navigate("C:\Users\Mike\VB\HTMLScript\bin\Debug\testfile.html")
the script is correctly executed and works fine.
But doing like this :
Dim sb As StringBuilder = New StringBuilder()
sb.Append("<HTML>")
sb.Append("<HEAD>")
sb.Append("<script>")
sb.Append("var preEl ;")
sb.Append("var orgBColor;")
sb.Append("var orgTColor;")
sb.Append("function HighLightTR(el, backColor,textColor){")
sb.Append(" if(typeof(preEl)!='undefined') {")
sb.Append(" preEl.bgColor=orgBColor;")
sb.Append(" try{ChangeTextColor(preEl,orgTColor);}catch(e){;}")
sb.Append(" }")
sb.Append(" orgBColor = el.bgColor;")
sb.Append(" orgTColor = el.style.color;")
sb.Append(" el.bgColor=backColor;")
sb.Append("")
sb.Append(" try{ChangeTextColor(el,textColor);}catch(e){;}")
sb.Append(" preEl = el;")
sb.Append("}")
sb.Append("function ChangeTextColor(a_obj,a_color){ ;")
sb.Append(" for (i=0;i<a_obj.cells.length;i++)")
sb.Append(" a_obj.cells(i).style.color=a_color;")
sb.Append("}")
sb.Append("</script>")
sb.Append("</HEAD>")
sb.Append("<BODY>")
sb.Append("<br><br><br>")
sb.Append("<table border=1 align=center>")
sb.Append("<caption>Statistics</caption>")
sb.Append("<th>Year</th>")
sb.Append("<th>Team</th>")
sb.Append("<tr onClick=""HighLightTR(this,'#c9cc99','cc3333');"">")
sb.Append("<td align=right>1930</td>")
sb.Append("<td align=right>Detroit</td>")
sb.Append("</tr>")
sb.Append("<tr onClick=""HighLightTR(this,'#c9cc99','cc3333');"">")
sb.Append("<td align=right>1933</td>")
sb.Append("<td align=right>Detroit</td>")
sb.Append("</tr>")
sb.Append("<tr onClick=""HighLightTR(this,'#c9cc99','cc3333');"">")
sb.Append("<td align=right>1934</td>")
sb.Append("<td align=right>Detroit</td>")
sb.Append("</tr>")
sb.Append("<tr onClick=""HighLightTR(this,'#c9cc99','cc3333');"">")
sb.Append("<td align=right>1935</td>")
sb.Append("<td align=right>Detroit</td>")
sb.Append("</tr>")
sb.Append("</table>")
sb.Append("</BODY>")
sb.Append("</HTML>")
WebBrowser1.DocumentText = sb.ToString()
generates a script error. It tells me that a ; is needed after the word function in the line below :
sb.Append("function HighLightTR(el, backColor,textColor){")
Or sometimes that HighLightTR property value is null or undefined, not a function object
I know that WebView2 is recommended but I really need to solve this problem in this old project. Please help me to solve this !
Thanks.
Thanks to jmcilhinney, replacing sb.Append with sb.AppendLine solved the problem !
The correct code is :
Dim sb As StringBuilder = New StringBuilder()
sb.AppendLine("<HTML>")
sb.AppendLine("<HEAD>")
sb.AppendLine("<script>")
sb.AppendLine("var preEl ;")
sb.AppendLine("var orgBColor;")
Etc...
Related
It seems like my remove eventlistener doesn't work? I want the player to be able to remove the green color from the ´td´element if they click it again.
This is the html document and it is the TD element that I add and eventlistener on click and make the selected area green, then if clicked again I would like to remove the color again.
<html>
<head>
<title>Brogaarden bingo</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet">
<link rel="stylesheet" rev="stylesheet" href="bingo-card.css" />
<script type="text/javascript" src="bingo-card.js">
</script>
</head>
<body>
<h1>Velkommen til Brogaardens Dyre Banko 2021!</h1>
<p>Mere uddybende info kommer</p>
<table>
<tr>
<th>B</th>
<th>R</th>
<th>O</th>
<th>G</th>
<th>A</th>
<th>A</th>
<th>R</th>
<th>D</th>
<th>E</th>
<th>N</th>
</tr>
<tr>
<td ><img id="square0" src=""></td>
<td><img id="square1" src=""></td>
<td id="free"></td>
<td><img id="square2" src=""></td>
<td><img id="square3" src=""></td>
<td id="free"></td>
<td><img id="square4" src=""></td>
<td id="free"></td>
<td id="free"></td>
<td><img id="square5" src=""></td>
</tr>
<tr>
<td id="free"></td>
<td><img id="square6" src=""></td>
<td><img id="square7" src=""></td>
<td id="free"></td>
<td><img id="square8" src=""></td>
<td><img id="square9" src=""></td>
<td id="free"></td>
<td><img id="square10" src=""></td>
<td id="free"></td>
<td><img id="square11" src=""></td>
</tr>
<tr>
<td><img id="square12" src=""></td>
<td id="free"></td>
<td><img id="square13" src=""></td>
<td><img id="square14" src=""></td>
<td id="free"></td>
<td><img id="square15" src=""></td>
<td id="free"></td>
<td><img id="square16" src=""></td>
<td><img id="square17" src=""></td>
<td id="free"></td>
</tr>
</table>
<p>KLIK HER For at lave en ny bingo plade</p>
<button onclick="window.print()">Vil du printe pladen? Så kan du klikke her</button>
</body>
</html>
window.onload = initAll;
var images = [
'assets/abe.svg',
'assets/and.svg',
'assets/bjorn.svg',
'assets/boffel.svg',
'assets/pingvin.svg',
'assets/solove.svg',
'assets/elefant.svg',
'assets/elg.svg',
'assets/flamingo.svg',
'assets/flodhest.svg',
'assets/fugl.svg',
'assets/faar.svg',
'assets/ged.svg',
'assets/guldfisk.svg',
'assets/haj.svg',
'assets/hane.svg',
'assets/hest.svg',
'assets/hjort.svg',
'assets/hone.svg',
'assets/hund.svg',
'assets/kaenguru.svg',
'assets/kakadue.svg',
'assets/kamel.svg',
'assets/kanin.svg',
'assets/kat.svg',
'assets/ko.svg',
'assets/lama.svg',
'assets/lemur.svg',
'assets/marsvin.svg',
'assets/mus.svg',
'assets/nasehorn.svg',
'assets/papegoje.svg',
'assets/love.svg',
'assets/struds.svg',
'assets/rotte.svg',
'assets/skildpadde.svg',
'assets/svin.svg',
'assets/zebra.svg'
];
// init: giver reloadevne til #reload og loader første dyre array med setSqaure
function initAll() {
if (document.getElementById) {
document.getElementById("reload").onclick = setSquare;
setSquare();
} else {
alert("Your browser does not support this script.");
}
}
//fylder html src ud med 18 random dyr taget fra arrayet
function setSquare() {
//spørger efter 18 random elementer fra images arrayet
var randomArray = getRandom(images, 18);
//løb over de 18 pladser og sæt src til randomArrays plads nr. i
for (var i = 0; i < 18; i++) {
document.getElementById("square" + i).src = randomArray[i];
}
function clickHandler() {
this.style.background = "green";
clickDone();
}
// here I add the eventlistener on click
document.querySelectorAll('td')
.forEach(e => e.addEventListener("click", clickHandler));
}
//THIS IS THE ISSUE, here I try to remove it, with no succes
function clickDone (){
document.querySelectorAll('td')
.forEach(e => e.removeEventListener("click", clickHandler));
}
//arr er et array og n er antallet af random elementer fra det array du ønsker
//derefter returnerer den et nyt array med n random elementer
function getRandom(arr, n) {
var result = new Array(n),
len = arr.length,
taken = new Array(len);
if (n > len)
throw new RangeError("getRandom: more elements taken than available");
while (n--) {
var x = Math.floor(Math.random() * len);
result[n] = arr[x in taken ? taken[x] : x];
taken[x] = --len in taken ? taken[len] : len;
}
return result;
}
clickHandler is defined inside setSquare
You are trying to read it inside clickDone which is not defined inside setSquare.
It is out of scope so unreachable.
Further reading: Scope on MDN.
i created a html button in jsp using while loop i want to get the value of the specific button that was clicked but it shown result as undefined.
i don't no what to do and also don't no is it possible or not i am new to java Script.
Please help me thanks in advance.
Blockquote
this is what i tried but its not working giving the resut as undefined
<td><button value="<%= path%>" onclick="myFunction()"><%= path %></button></td>
<script>
function myFunction() {
alert(this.value);
<% session.setAttribute("gurufile",path );%>
}
</script>
Blockquote
this is my whole code i fetch the value of the button from the database
<%#page import="java.util.ArrayList"%>
<%#page import="java.sql.Statement"%>
<%#page import="java.sql.DriverManager"%>
<%#page import="java.sql.Connection"%>
<%#page import="java.sql.ResultSet"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
out.println(request.getParameter("roll_no"));
%>
<h3 align="center" style="color:BROWN;"> Dr.A.P.J. Abdul Kalam Technical University, Uttar Pradesh, Lucknow</h3>
<h4 align="center" >( Formerly Uttar Pradesh Technical University )</h4>
<h4 align="center" style="color:blue;">AKTU-OneView</h4>
</br>
<hr align="center" style="color:lightgrey;">
<h3>Student Result</h3>
<%!
//golbally declear
String class_name=null;
String branch=null;
String rollno =null;
String path =null;
ArrayList a = new ArrayList();
int count =0;
%>
<%
//String roll_no = "1634010009";
String roll_no = request.getParameter("roll_no");
String url="jdbc:mysql://localhost/student_result";
String username="root";
String password="bilalminto";
String query="select * from new_student where roll_no='"+roll_no+"'";
System.out.println("rollno "+roll_no);
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con=DriverManager.getConnection(url, username, password);
Statement st=con.createStatement();
ResultSet rs=st.executeQuery(query);
String student_name=null;
//String class_name=null;
//String branch=null;
//String rollno =null;
String father_name = null;
String mother_name = null;
if(rs.next()){
student_name=rs.getString("student_name");
class_name=rs.getString("class");
branch=rs.getString("branch");
rollno=rs.getString("roll_no");
father_name=rs.getString("fathers_name");
mother_name=rs.getString("mothers_name");
}
//Statement stm=con.createStatement();
//ResultSet rst=stm.executeQuery(query);
%>
<hr align="center" style="color:lightgrey;"></br>
<table width=100% border=1 cellspacing="0">
<tr align="left">
<td><b>Institute Code & Name :</b></td>
<td colspan="5"> (340) VIVEKANANDA COLLEGE OF TECHNOLOGY & MANAGEMENT, ALIGARH</td>
<td rowspan="5">print view</td>
</tr>
<tr>
<td><b>Course Code & Name:</b></td>
<td colspan="2"><%=class_name%></td>
<td ><b>Branch Code & Name</b></td>
<td colspan="2"><%=branch%></td>
<%
System.out.println("branch "+branch);
%>
</tr>
<tr>
<td><b>Roll No:</b></td>
<td colspan="2"><%=roll_no %></td>
<td><b>Enrollment No</b></td>
<td colspan="2">163401047822</td>
</tr>
<tr>
<td><b>Name:</b></td>
<td colspan="2"><%=student_name%></td>
<td><b>Mother Name</b></td>
<td> <%=mother_name%></td>
</tr>
<tr>
<td><b>Father's Name:</b></td>
<td colspan="2"><%=father_name%></td>
<td><b>Gender</b></td>
<td colspan="2">M</td>
</tr>
</table></br>
<%
}
catch(Exception e){
e.printStackTrace();
}
session.setAttribute("roll_no", roll_no);
%>
<hr align="center" style="color:lightgrey;">
<h3>One View Result</h3>
<hr align="center" style="color:lightgrey;">
<%
//String roll_no=session.getAttribute("roll_no").toString();
String query1 = "select distinct semester from subject where class_name='"+class_name+"' && branch='"+branch+"'";
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con=DriverManager.getConnection(url, username, password);
Statement st=con.createStatement();
ResultSet rs=st.executeQuery(query1);
Statement st1 =con.createStatement();
ResultSet rs1 =null;
Statement st4 =con.createStatement();
ResultSet rs4 =null;
Statement st5 =con.createStatement();
ResultSet rs5 =null;
String semester =null;
String subject_code=null;
String subject_name=null;
String max_marks=null;
String marks_obtained = null;
//String path =null;
while(rs.next()){
semester=rs.getString("semester");
%>
<lable><b>Samester:</b></lable><label><%=semester%></label><lable><b>Total Subjects:</b></lable><label></label></br>
<lable><b>Total Marks:</b></lable><label>900</label><lable><b>Marks Obt:</b></lable><label>500</label></br>
</br>
<table width=100% border=1 cellspacing="0">
<tr>
<td><b>Code</b></td>
<td><b>Name</b></td>
<td><b>Max Marks</b></td>
<td><b>Marks Obtain</b></td>
<td><input type="text" name="" value="view copy"></td>
</tr>
<%
String query2 ="select * from subject where semester='"+semester+"'";
rs1=st1.executeQuery(query2);
while(rs1.next()){
subject_code=rs1.getString("subject_code");
subject_name=rs1.getString("subject_name");
max_marks=rs1.getString("max_marks");
String query3 ="select * from add_marks where roll_no='"+roll_no+"' and subject_code='"+subject_code+"'";
System.out.println(subject_code);
rs4 = st4.executeQuery(query3);
if(rs4.next() && rs4.getString("roll_no").equalsIgnoreCase(roll_no) && rs4.getString("subject_code").equalsIgnoreCase(subject_code)){
// if(rs4.next()){
marks_obtained=rs4.getString("marks_obtained");
path=rs4.getString("path");
}else{
marks_obtained = "Not Updated";
path = "Not Updated";
}
//session.setAttribute("gurufile",path );
a.add(count, path);
//out.println("pathof" +path);
%>
<tr>
<td><%=subject_code%></td>
<td><%=subject_name%></td>
<td><%=max_marks%></td>
<td><%=marks_obtained%></td>
<td><button value="<%= path%>" onclick="myFunction()"><%= path %></button></td>
</tr>
<%
count++;
}
%>
</table>
</br>
</br></br>
<%
}
%>
<%
}
catch(Exception e){
e.printStackTrace();
}
session.setAttribute("roll_no", roll_no);
%>
</body>
</html>
<script>
function myFunction() {
alert(this.value);
<% session.setAttribute("gurufile",path );%>
}
</script>
Blockquote or there is any other technique to get the the value of the button that was clicked
You need to pass the this reference to the function:
<button value="<%= path%>" onclick="myFunction(this)">
This way you get the clicked button as a parameter in the function:
function myFunction(button) {
alert(button.value);
}
I'm new to web developing and start to take path, recently I'm building a time manager for my brother's internet cafe and choose jquery and javascript to work with. I'm having troubled to provide a unique ID value for the append , the reason that i need to have a unique ID for each tag is i need to edit the values. Could anyone or someone help?
<head>
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/sys.js"></script>
<script src="scripts/moment.js"></script>
<script src="scripts/jquery.playSound.js"></script>
<style>
td{
align:center;
}
</style>
</head>
<body>
<div>
<table border="1" width="80%" height="10%" align="center">
<tr>
<td width="20%" align="center">Client/PC</td>
<td width="20%" align="center">Start Time</td>
<td width="20%" align="center">End Time</td>
<td width="20%" align="center">₱ Amount</td>
<td width="20%" align="center">Status</td>
</tr>
</table>
</div>
<div id="here_table"></div>
<button id="addnew" style="position:relative; margin-top:10px; left:43%;">Add Cafeteria</button>
</body>
here is my java-script
$(document).ready(function (){
$('#addnew').click(function(){
var client = prompt('PC/Client number?');
if (client > 6){
alert('PC/Client not found');
return false;
}
else if (isNaN(client)){
alert('Invalid Entry,must be a number');
return false;
}
else if(client === null){
return false;
}
else if (client == 0){
alert('No entry!')
return false;
}
var tothour = prompt('Hours?');
var amount = tothour * 10;
if (tothour == 3 ){
tothour = 3 + 1;
}
var status = "<select style='padding:2px; margin:4px;'><option></option><option>Paid</option><option>Unpaid</option></select>";
var starttime = new Date();
starttime = starttime.toLocaleString('en-US', { hour: 'numeric', minute:'numeric', hour12: true });
endtime = moment().add('hours', tothour).format('h:mm A')
var tab = '<table border="1" width="80%" height="10%" align="center">'
for(i=0; i<1; i++){
tab += '<tr><td width="20%" align="center">' + client + '</td><td width="20%" align="center">'+ starttime +'</td><td width="20%" align="center">'+ endtime +'</td><td width="20%" align="center">'+ amount + '</td><td align="center">' + status + '</td></tr>';
}
tab +="</table>"
$('#here_table').append(tab);
setTimeout(function(){$.playSound('notif.mp3');},3600000*tothour);
});
});
I'm playing around with trying to make tablesorter work for a simple table created using JSP and a Java Bean that reads information from the file.
Here is my jsp that creates the table:
<%
out.println("<table id=\"infoTable\" class=\"tablesorter\" border=\"1\" bgcolor=\"#57976b\" " +
"style=\"border-collapse:collapse;\">");
//Print Table Headings
out.println("<thead><tr>");
for(int i = 0; i < 19; i++) {
String par = parameters.get(i);
out.println("<td>" + par + "</td>");
}
out.println("</tr></thead>");
out.println("<tbody>");
ArrayList<String> values = fileBean.getAllValues();
for(int i = 0; i < values.size(); i++) {
if(i%19 == 0) {
out.println("<tr>");
}
out.println("<td>" + values.get(i) + "</td>");
if(values.get(i).contains("grading") && i%19 != 0) {
out.println("</tr>");
}
}
out.println("</tbody>");
out.println("</table>");
%>
With this script in my <head> tag:
<script>
$(document).ready(function() {
$("#infoTable").tablesorter();
})
</script>
And here is the HTML created using inspect element on the said page:
<table id="infoTable" class="tablesorter" border="1" bgcolor="#57976b" style="border-collapse:collapse;">
<thead><tr>
<td>Grading</td>
<td>Teaching</td>
<td>Name</td>
<td>Title</td>
<td>Home Address</td>
<td>Additional Details</td>
<td>Course Name</td>
<td>Course Credits</td>
<td>Student ID</td>
<td>Additional Duties</td>
<td>Details</td>
<td>Course Grade</td>
<td>Phone Number</td>
</tr></thead>
<tbody>
<tr>
<td>1 </td>
<td>1 </td>
<td>John Doe</td>
<td>Student </td>
<td>Home Address </td>
<td>Web Development! </td>
<td>SWE 432 </td>
<td>4 </td>
</tr>
</tbody>
</table>
The values don't match the headers as this is just an example. I have included <thead> and <tbody> appropriately and the table looks just how I want it. Any idea why tablesorter is not recognizing my table?
i have a page where i can add and delete rows with a textbox with class 'prijs'. when the page is loaded there is already one row.
now i need to sum the values of all textboxes with class 'prijs' and display it in a TD with id 'totaalexbtw'. here is my problem: it doesn't loop through the added textboxes. also, when a textbox is deleted the total should be affected.
Some help would be very appreciated!! I am stuck for days!
Thanks in advance!
<html>
<head>
<script type="text/javascript" src="javascript/jquery_v2.0.3.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function kiesklant(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("klantinfo").innerHTML="<table><tr><td>Naam:</td><td</td></tr><td>Adres:</td><td></td></tr><td>Tel:</td><td></td></tr>";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("klantinfo").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "kiesklant.php?q="+str, true);
xmlhttp.send();
};
var linenumber = 0;
function addLine()
{
linenumber++;
var newRow = document.createElement('tr');
var newCell = document.createElement('td');
newCell = document.createElement('td');
var inputNode = document.createElement('input');
inputNode.name = 'dienstomschrijving';
inputNode.setAttribute('type', 'text');
inputNode.setAttribute('style', 'width: 200px');
newCell.appendChild(inputNode);
newRow.appendChild(newCell);
newCell = document.createElement('td');
inputNode = document.createElement('input');
inputNode.name = 'prijs';
inputNode.setAttribute('type', 'text');
inputNode.setAttribute('style', 'width: 100px');
inputNode.className = 'prijs';
newCell.appendChild(inputNode);
newRow.appendChild(newCell);
newCell = document.createElement('td');
inputNode = document.createElement('input');
inputNode.name = 'verwijder_dienst';
inputNode.setAttribute('type', 'button');
inputNode.setAttribute('onclick', 'delLine(this)');
inputNode.value = 'Verwijder dienst';
newCell.appendChild(inputNode);
newRow.appendChild(newCell);
document.getElementById('dienst').appendChild(newRow);
};
function delLine(line)
{
var row = line.parentNode.parentNode;
row.parentNode.removeChild(row);
};
function bereken()
{
var sumexbtw = $('.prijs').sum(function()
{
return +parseFloat(this.value) || 0;
});
$('#totaalexbtw').val(sumexbtw.toFixed(2));
var btw = sumexbtw * 0,21;
$('#btw').val(btw.toFixed(2));
var totaal = sumexbtw + btw;
$('#totaal').val(totaal.toFixed(2));
};
$(document).on('change', 'input.prijs', bereken);
</script>
</head>
<body>
<?php
include("function.php");
// haal max factuurnr op uit database
$sth1 = maakConnectie() -> prepare("SELECT MAX(factuurnummer) as 'max' FROM factuur");
$sth1 -> execute();
$result = $sth1 -> fetchAll(PDO :: FETCH_ASSOC);
// tel hier 1 bij op zodat er steeds opeenvolgende nummers worden genereerd
foreach($result as $rij)
{
$factuurnr = $rij['max'] + 1;
}
$datum = date("d-m-Y");
$sth2 = maakConnectie() -> prepare("SELECT voornaam, achternaam FROM gebruiker");
$sth2 -> execute();
$result2 = $sth2 -> fetchAll (PDO::FETCH_ASSOC);
?>
<form method="GET" action="aanmaken_factuur.php" class="formulier">
<table>
<tr>
<td>Factuur nr:</td>
<td align="right"><?php print($factuurnr);?></td>
</tr>
<tr>
<td>Datum:</td>
<td align="right"><?php print($datum);?></td>
</tr>
</table>
<br>
<table>
<tr>
<td><select name="klanten" onchange="kiesklant(this.value)">
<option value="" selected>Kies klant</option>
<?php foreach($result2 as $rij)
{
print("<option value=\"".$rij["voornaam"]." ".$rij["achternaam"]."\">".$rij["voornaam"]." ".$rij["achternaam"]."</option>");
}?>
</select>
</td>
</tr>
</table>
<div id="klantinfo">
<table>
<tr>
<td>Naam:</td>
<td></td>
</tr>
<tr>
<td>Adres:</td>
<td></td>
</tr>
<tr>
<td>Tel:</td>
<td></td>
</tr>
</table>
</div>
<br>
<table id="dienst2">
<tbody id="dienst">
<tr>
<th align="left">Dienstomschrijving</th>
<th align="left">Prijs</th>
</tr>
<tr>
<td><input style="width: 200px" type="text" name="dienstomschrijving"></td>
<td><input style="width: 100px" type="text" name="prijs" class="prijs"></td>
<td><input type="button" name="verwijder_dienst" value="Verwijder dienst" onclick="delLine(this);"/></td>
</tr>
</tbody>
<tr>
<td><input type="button" name="toevoegen_dienst" value="Voeg dienst toe" onclick="addLine();" /></td>
</tr>
</table><br>
<table id="totaal">
<tr>
<td align="right">Totaal excl. BTW</td>
<td align="center" id="totaalexbtw"></td>
</tr>
<tr>
<td align="right">BTW 21%</td>
<td align="center" id="btw"></td>
</tr>
<tr>
<td colspan=2 align="center">_________________________________________</td>
</tr>
<tr>
<td align="right">Factuur totaal</td>
<td align="center" id="totaal"></td>
</tr>
<tr>
<td align="right"><button onclick="index2.php" name="annuleren">Annuleren</button></td>
<td align="right"><input type="submit" name="submit" value="Maak factuur aan"></td>
</tr>
</table>
</form>
There are two errors in your code
$('.prijs').each.change(berekentotaalexbtw());
^^^^ ^^
No need to use each and you are not assigning the function, you are calling it.
$('.prijs').change(berekentotaalexbtw);
Since i just made the same thing yesterday:
(function($) {
$.fn.sum = function (callback) {
var sum = 0;
this.each(function () {
sum += 1 * callback.apply(this);
});
return sum;
};
})(jQuery);
this is just a helper function function so you can do: $('.prijs').sum( .... ); instead of using .each(.... )
and here's your answer
// If you do $('.prijs').change() it binds it to the currently existing elements.
// i think you are adding and deleting them dynamically, so you needed a delegated event.
function berekentotaalexbtw() {
var sum = $('.prijs').sum(function() {
// just a shorter version of all the 'isNan' stuff you got going on.
// defaults to 0 if it's NaN
return +parseFloat(this.value) || 0;
});
// Since you want it printed like a currency: use sum.toFixed(2) to format it :-)
$('#totaalexbtw').val( sum.toFixed(2) );
}
$(document).on('change','input.prijs',berekentotaalexbtw);
// and on deletion of an element: berekentotaalexbtw();