I have looked at the other similar answers but can't seem to see what I'm looking for. I'm trying to open a window containing a basic html page as a help screen for a login page. Here is the HTML:
<html>
<head>
<title>Jag City Job Management System</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="jag.js"></script>
</head>
<body>
<br>
<table class='title'>
<tr><td align = 'left'><img src='jaguar.jpg'></td><td><h1 class='title'>Jag City
Management System</h1></td><td align='right'><img src='jaguar.jpg'></td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>
<?php
$d = date('d/m/Y');
?>
<table style='text-align:right;width:95%'>
<tr><td align = 'right'><?echo $d;?></td></tr>
</table>
<br>
<br>
<p class="thick">Please enter your User Name and Password to use the system.</p>
<form name="login" action= 'login.php' method='POST'>
<table border='0' style="text-align:left;width:270px">
<tr><td>User Name:</td><td><input type='text' name='eid'></td><tr>
<tr><td>Password:</td><td><input type='password' name='pword'></td><tr>
</table>
<br>
<input type='submit' value='Enter'>
<input type="button" onclick="lhelp()" value="Help">
</form>
<br>
</body>
</html>
and here is my .js file:
function lhelp() {
myWindow=window.open('/loginhelp.html','Help','width=750,height=250');
}
function jobadd()
{
var table = document.getElementById("jsadd");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var i = rowCount + 1;
var x = rowCount - 1;
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name="job["+x+"]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name="item["+x+"]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name="cat["+x+"]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name="desc["+x+"]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name="hrest["+x+"]";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name="hract["+x+"]";
element6.value = "0";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "text";
element7.name="assign["+x+"]";
cell7.appendChild(element7);
var counter = document.getElementById("row");
counter.value = x;
}
function newf(z)
{
var compbut = document.getElementById("compno");
compbut.value = z.rowIndex;
var a = document.getElementById("act");
a.value = prompt("Enter Actual Hours for Job","0");
document.forms["notcomp"].submit();
}
It works perfectly in Firefox. I have other functions which also work the same way, works in FF but not the other two. I am hoping that any help I get to solve this will point me in the right direction for the rest.
One thing to note, Javascript must be working to a degree because a cursor change for a part of a table I have works in all three!
I found the answer!! In my original .js file, I had an old function left over from a previous project the I copied the .js file from and modified it for this project. All of the lines from another function weren't terminated with a semi-colon. I removed the old function and checked all the lines in the file were correctly terminated and it now works.
Many thanks to all who tried to help!!!
Related
I have the following js code in my jsp. Im not able to retain those textbox values below after the page is refreshed. Any idea how to retain the values?
Im calling this js function onclick of a html button so that it dynamically adds the row to the table.
<script>
function addRow(tableID) {
if(validateForm()==true){
document.getElementById('cruisedowntime2').style.display = "block";
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 = "checkbox";
element1.name = "chkbox[]";
element1.defaultChecked="true";
cell1.appendChild(element1);*/
var cell0 = row.insertCell(0);
var element0=document.createElement("select");
element0.name="cruiselinedropdown";
var dropdownlist1=document.getElementById("droplist1");
var defaultselected=dropdownlist1.options[dropdownlist1.selectedIndex].value;
//window.location.replace("http://localhost:8085/Bridge_Downtime_Utility/Servlet?var="+defaultselected);
<%Map<String, String> map = new HashMap<String,String>();
for (int i = 0; i < crsenamelist.size(); i++) {
map.put(crsenamelist.get(i),crsecodelist.get(i));
}
%>
element0.options.add( new Option(defaultselected,defaultselected,true,true) );
element0.options.add( new Option("--","") );
<%
for(Map.Entry m:map.entrySet()){ %>
element0.options.add( new Option("<%=m.getValue()%>","<%=m.getValue()%>") );
cell0.appendChild(element0);<%}%>
var textbox3=document.getElementById('starttime');
var textbox7=document.getElementById('startdate');
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.title="Date: YYYY-MM-DD";
element2.type = "text";
element2.name = "starttimetextbox";
element2.value=textbox7.value+" "+textbox3.value;
cell2.appendChild(element2);
var textbox5=document.getElementById('endtime');
var textbox9=document.getElementById('enddate');
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.title="Date: YYYY-MM-DD";
element3.type = "text";
element3.name = "endtimetextbox";
element3.value=textbox9.value+" "+textbox5.value;
cell3.appendChild(element3);
var textbox1=document.getElementById('descrip');
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "descriptextbox";
if(textbox1.value==''){element4.value="-";}
else
element4.value=textbox1.value;
cell4.appendChild(element4);
//cell4.contenteditable=true;
/* var addRowBox = document.createElement("input");
addRowBox.setAttribute("type", "button");
addRowBox.setAttribute("value", "Edit");
var cell5 = row.insertCell(5);
cell5.appendChild(addRowBox);*/
var deleteRowBox = document.createElement("input");
deleteRowBox.setAttribute("type", "button");
deleteRowBox.setAttribute("value", "X");
deleteRowBox.setAttribute("onclick","SomeDeleteRowFunction(this)");
var cell6 = row.insertCell(4);
cell6.appendChild(deleteRowBox);
}}
</script>
You can store data and then load from localStorage if you want it to persist after page refresh.
To keep your data upon page refresh you need to save it somewhere, for future (after page reload) access.
Store it somewhere at your backend, and then access your, for instance, REST service upon page load.
Store it in localStorage\sessionStorage in browser.
There are no other ways to keep data without actually keeping it :)
I am writing a code in HTML + Jquery and need to add rows to a table dynamically.
I've written the code to add the rows dynamically, but it doesn't seem to work.
Here is my JScript code :
<script language="JavaScript">
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 = "date";
element1.name="datebox[];
element1.id = "dt";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var element2 = document.createElement("input");
element2.type = "select";
element2.name = "selectbox[]";
element2.id = "slct";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = rowCount + 1;
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.id = "txt";
cell3.appendChild(element3);
table.appendChild(cell1);
}
</script>
This is my Table:
<table id = "tab" style="width:500px">
<tr>
<th>Date</th>
<th>Treatment Goal</th>
<th>Comment</th>
</tr>
<tr>
<td><INPUT type="date" name="datebox[]" id = "dt"/></td>
<td>
<SELECT name="selectbox[]" id = "slct">
</SELECT>
</td>
<td><INPUT type="text" name="txtbox[]" id = "txt"/></td>
</tr>
</table>
I am calling the function in the onClick event of a button like this :
<input type="button" id="add" value="+" name="Add" onclick="addRow('tab')"/>
The html page doesn't respond to the click event and nothing happens.
Cannot understand what's going wrong.
Working Fiddle
The first problem is a syntax error on this line (you didn't close the double quote):
element1.name="datebox[];
^ missing "
The second problem is you are appending the cell to the table which is wrong, you should be appending the row:
table.appendChild(row);
^ changed to row from cell
You are missing a quotation mark on the line:
element1.name="datebox[];
after the name element.
I have a HTML table and i can add a new row to that table using javascript.
I want to call a javascript (Ajax) function using the onchange event for each of the cells on the table.
`
<script type="text/javascript" src="nextTest.js"></script>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount + 1;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.onchange = nexttest();
cell2.appendChild(element2);
}
</SCRIPT>
</HEAD>
<body>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</body>
</html>`
When i press the button, a new row is added and the onchange event is fired.
What i want to do is when ever someone enters data into those new cells, i want the onchange event to fire. The event is called 'nextTest' and it is stored in an external file.
When i insert the new row, the event fires, but if i update one of the cells, nothing happens.
What am i doing wrong?
Thanks in advance
you must assign a function, not a function-call(except the called function returns another function).
Omit the parentheses:
element2.onchange = nexttest;
function nexttest(evt){
alert(evt.target.value);
}
function addRow (tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount + 1;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.onchange = nexttest; // give a valid function identifier here .
cell2.appendChild(element2);
}
http://jsbin.com/iropam/2/edit
var i = 0;
var a = 3;
function addNewAnswer(tableID) {
var table = document.getElementById(tableID);
if(i < 10)
{
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = '<font size="2" face="Courier New"><b>Enter Answer ' + String.fromCharCode(67+i) + ':</b></font>';
var cell2 = row.insertCell(1);
var element1 = document.createElement("input");
element1.size = 40;
element1.type = "text";
element1.name = "answer"+a;
cell2.appendChild(element1);
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "radio";
element2.name = "radios";
element2.value = String.fromCharCode(67+i);
cell3.appendChild(element2);
i++;
a++;
}
}
My HTML Form:
<table>
<tr>
<form method=post name="submitform" action="verify-qedit.jsp">
<td>
<form method=post name="submitform" action="verify-qedit.jsp">
<table id="dataTable">
<tr>
<th colspan="3" align="left">Question</th>
</tr>
</table>
</form>
</td>
</form>
</tr>
</table>
When I submit the form, I only can retrieve the parameters not created by the above javascript. It only works in compatibility mode - IE 8 standards and below. Please help because I have spent days trying to find out before posting this question.
Does this work on all the browsers you are targetting?
http://jsfiddle.net/4nbB5/1
function addNewAnswer(tableID) {
var rowCount, row, cell1, cell2, cell3, element1, element2, char;
var i = 0;
var table = document.getElementById(tableID);
while (i < 10) {
rowCount = table.rows.length;
row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
char = String.fromCharCode(65 + i);
cell1.innerHTML = '<font size="2" face="Courier New"><b>Enter Answer ' + char + ':</b></font>';
cell2 = row.insertCell(1);
element1 = document.createElement("input");
element1.size = 40;
element1.type = "text";
element1.name = "answer" + i;
cell2.appendChild(element1);
cell3 = row.insertCell(2);
element2 = document.createElement("input");
element2.type = "radio";
element2.name = "radios";
element2.value = char;
cell3.appendChild(element2);
i++;
}
}
addNewAnswer('foo');
All I did was remove 'a', and declare 'i', change 'if' to while, changed 67 in fromCharCode to 65.. Looked to be what you may have wanted at some point so I stopped.
The problem had nothing to do with the javascript. It was because I was putting the form tag in the wrong place within the table after the tr tag instead of after the td tag.
<table>
<tr>
<td>
<form method=post name="submitform" action="verify-qedit.jsp">
<table id="dataTable">
<tr>
<th colspan="3" align="left">Question</th>
</tr>
</table>
</form>
</td>
</tr>
</table>
I want to add textbox dynamically in jsp page on "Add Row" button click. I have written java script to add it. No issues with that. But I am not able to retrieve those values in Servlet page. Any ideas?
Here is the script:
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 = "checkbox";
cell1.appendChild(element1);
var cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
cell4.appendChild(element4);
}
And here is the jsp where script is called:
<INPUT type="button"
value="Add Row" onclick="addRow('dataTable')" />
You need to specify the name attribute. It becomes the request parameter name.
You can just give them all the same name.
element.name = "foo";
Or if you want to "respect" IE6/7 users as well
document.createElement('<input type="text" name="foo">');
(jQuery makes it all easier and better crossbrowser compatible)
Then you can access them all as follows in the servlet
String[] foos = request.getParameterValues("foo");
They will appear in the order as they appear in the HTML DOM tree.