Jason Maxwell
asked on
Table Appear ontop of Existing Table
How do I have a table appear directly ontop of another table in browser after the user has clicked the submit button so only the resulting table is shown? I need to move the existing table from below only to appear after the submit button where the first table is situated.
EDIT: Am looking for solution where the resulting table appears after submit button. It cannot appear as a dialog/pop-up but only directly on the page. The resulting table is located in the same place where the first table is. Only resulting table must show.
index.html
app.js
EDIT: Am looking for solution where the resulting table appears after submit button. It cannot appear as a dialog/pop-up but only directly on the page. The resulting table is located in the same place where the first table is. Only resulting table must show.
index.html
app.js
ASKER
Hello,
Thank you for your contribution, but the table cannot be as an alert(type) dialogue. Only the resulting table must appear after the user has clicked the submit button where the first table was.
Thank you for your contribution, but the table cannot be as an alert(type) dialogue. Only the resulting table must appear after the user has clicked the submit button where the first table was.
check this : https://jsfiddle.net/jv0f9kcq/2/
<div id="table1">
<!--table 1-->
<table id="tableOne" border="1">
<tr>
<th>
Full Name:
</th>
<td>
<input type="text" name="FullName" id="fname">
</td>
</tr>
<th>
Member ID:
</th>
<td>
<input type="text" name="MemberID" id="mid1">
</td>
<tr>
<th>
Gender:
</th>
<td>
<input type="radio" name="Male" id="m1" value="Male">
<label for="m1">Male</label>
<input type="radio" name="Male" id="f1" value="Female">
<label for="f1">Female</label>
</td>
</tr>
<tr>
<th>
Height:
</th>
<td>
<input type="text" name="Height" id="h1">
</td>
</tr>
<th>
Weight:
</th>
<td>
<input type="text" name="Weight" id="w1">
</td>
</table>
<!--processes acceptInput()-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" id="push" onclick="acceptInput()">
Report it!
</button>
</div>
<br>
<br>
<div id="table2" class="hide" >
<!--table 2-->
<table id="resultTable" border="1">
<tr>
<th>
Full Name:
</th>
<td>
<input type="text" name="FullName2" id="fname2" readonly>
</td>
</tr>
<th>
Member ID:
</th>
<td>
<input type="text" name="MemberID2" id="mid2">
</td>
<tr>
<th>
Gender:
</th>
<td>
<input type="text" name="Male2" id="m2"value="" readonly>
<input type="hidden" name="Male2" id="f2" value="1" readonly>
</td>
</tr>
<tr>
<th>
Height:
</th>
<td>
<input type="text" name="Height2" id="h2"readonly>
</td>
</tr>
<th>
Weight:
</th>
<td>
<input type="text" name="Weight2" id="w2" readonly>
</td>
<tr>
<th>
Ideal Weight:
</th>
<td>
<input type="text" name="IdealWeight" id="iw" readonly>
</td>
</tr>
</table>
</div>
var bm1=false;
var bf1=true;
var oneh=100;
var fullname;
var mid;
var height;
var sum2;
var sum1;
var weight;
var iweight;
//Sum1 and Sum2 Arithmetic based on gender
function calculateResult(height)
{
sum1=(height-oneh)- (height-oneh) * 0.1;
sum2=(height-oneh) - (height-oneh)* 0.15;
if (getGender()){
return sum2;
}
else{
return sum1 ;
}
}
function getGender(){
return document.getElementById('f1').checked;
}
//Takes values from table above to table below.
function acceptInput()
{
fullname=document.getElementById('fname').value;
mid=document.getElementById('mid1').value;
bm1=document.getElementById('m1').boolValue;
bf1=document.getElementById('f1').boolValue;
height=parseInt(document.getElementById('h1').value);
weight=parseInt(document.getElementById('w1').value);
document.getElementById('fname2').value = fullname;
document.getElementById('mid2').value = mid;
setMaleFemale();
document.getElementById('h2').value = height;
document.getElementById('w2').value = weight;
document.getElementById('iw').value = calculateResult(weight);
document.getElementById("table1").className = "hide";
document.getElementById("table2").className = "";
}
//Checks to for written radio table value.
function setMaleFemale(gender){
if(getGender()){
document.getElementById('m2').value = "Female";
}else {
document.getElementById('m2').value = "Male";
}
}
.hide {
display:none;
}
ASKER
Hello, thank you for your input!
The page now does reload with the second table showing only the result. I see that the original second-table is hidden using .hide element in CSS and set as a div.
What method was used to show the second table after the submit button? That would be the ideal method of loading the second table directly onto the page after submit is clicked more preferably than css hidden configuration.
The page now does reload with the second table showing only the result. I see that the original second-table is hidden using .hide element in CSS and set as a div.
What method was used to show the second table after the submit button? That would be the ideal method of loading the second table directly onto the page after submit is clicked more preferably than css hidden configuration.
1 - put your original table in a form
2 - be sure to use a name for every fields
3 - use the same name for button radio and checkboxes but different value
4 - the action parameter of the form (1) is the name of a second page where you put the second table
5 - not sure if you have PHP, JAVA or any other language on your server, so use GET parameter as method of your form
6 - retrieve the parameter using the GUP function (just google it if needed or use this one here)
7 - remove this acceptInput in your first page as you get value of fields using gup (7)
This link may help you understand what I mean : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
2 - be sure to use a name for every fields
3 - use the same name for button radio and checkboxes but different value
4 - the action parameter of the form (1) is the name of a second page where you put the second table
5 - not sure if you have PHP, JAVA or any other language on your server, so use GET parameter as method of your form
6 - retrieve the parameter using the GUP function (just google it if needed or use this one here)
7 - remove this acceptInput in your first page as you get value of fields using gup (7)
This link may help you understand what I mean : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
ASKER
Hello,
Unfortunately The first table cannot be converted into a form-type text-field as it has to remain as a <table> type.
External languagesprograms/framewor ks/plugins are also not available as only Javascript/html is being used.
Database/URL connections are also not available.
Unfortunately The first table cannot be converted into a form-type text-field as it has to remain as a <table> type.
External languagesprograms/framewor
Database/URL connections are also not available.
The first table cannot be converted into a form-type text-field as it has to remain as a <table>
Which point let you understand you need to change it in my previous comment?
ASKER
Hello,
A form is usually information to be filled such as this using the <form> tags below:
While usually a <table> is inserted into a <form> the original question must remain as a <table> type as requested. Table that intakes field data, and a table that shows as result on same page. This is preferred using document.write so that the table is shown immediately. The issue is simply transferring the existing second table to reload upon submit.
If there is anyone available that can fullfill the requested above with vanilla javascript/html, the question is opened. Unfortunately there unavailability to use any external frameworks/plugins/network s/Urls/lan guages for this request.
A form is usually information to be filled such as this using the <form> tags below:
While usually a <table> is inserted into a <form> the original question must remain as a <table> type as requested. Table that intakes field data, and a table that shows as result on same page. This is preferred using document.write so that the table is shown immediately. The issue is simply transferring the existing second table to reload upon submit.
If there is anyone available that can fullfill the requested above with vanilla javascript/html, the question is opened. Unfortunately there unavailability to use any external frameworks/plugins/network
greetings Jason Maxwell, , I may not understand what you are trying to do ? ? ?
leakim971 has given you some examples that seem to do what you want ? ?
But I can not really tell?
You say in your comment -
"The issue is simply transferring the existing second table to reload upon submit. "
But I do not know what you mean by "reload upon submit"
But I did some javascriot to read the input values on a table and then CREATE a <table> with javascript. and place some rows and cells in it,
It looks like it works? ? to me anyway.
leakim971 has given you some examples that seem to do what you want ? ?
But I can not really tell?
You say in your comment -
"The issue is simply transferring the existing second table to reload upon submit. "
But I do not know what you mean by "reload upon submit"
But I did some javascriot to read the input values on a table and then CREATE a <table> with javascript. and place some rows and cells in it,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Activity 1:Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<scriptd src="app.js" type="text/javascript"></scriptd>
<script>
function acceptInput() {
var tbl1 = document.getElementById('tableOne');
var rows = tbl1.rows, table = document.createElement('table'), ih = 1;
table.border = 1;
table.width = 250;
for (var i=0; i < rows.length; ++i) {
var tr = document.createElement('tr');
var clone = rows[i].cells[0].cloneNode(true);
tr.appendChild(clone);
var td = document.createElement('td');
if (i == 3) { ih = rows[i].cells[1].getElementsByTagName("input")[0].value ? rows[i].cells[1].getElementsByTagName("input")[0].value : '1';
ih = parseInt(ih);
}
if (i != 2) {
td.appendChild(document.createTextNode(rows[i].cells[1].getElementsByTagName("input")[0].value));
} else {
if (rows[i].cells[1].getElementsByTagName("input")[0].checked) {
td.appendChild(document.createTextNode("M"));
ih = (ih-100)- (ih-100) * 0.1;
} else
td.appendChild(document.createTextNode("F"));
ih = (ih-100)- (ih-100) * 0.15;
}
tr.appendChild(td);
table.appendChild(tr);
}
tr = document.createElement('tr');
var clone = rows[0].cells[0].cloneNode(true);
clone.innerHTML = "Ideal Weight";
tr.appendChild(clone);
var td = document.createElement('td');
td.appendChild(document.createTextNode(""+ih));
tr.appendChild(td);
table.appendChild(tr);
document.getElementById('showTable2').appendChild(table);;
}
</script>
<style>
#container {
position: relative;
}
#showTable2 {
position: absolute;
top: 1px;
left: 0px;
background: white;
}
#showTable2 table td{
padding: 2px;
}
</style>
</head>
<body>
<div id="container">
<!--table 1-->
<table id="tableOne" border="1">
<tr>
<th>
Full Name:
</th>
<td>
<input type="text" name="FullName" id="fname">
</td>
</tr>
<th>
Member ID:
</th>
<td>
<input type="text" name="MemberID" id="mid1">
</td>
<tr>
<th>
Gender:
</th>
<td>
<input type="radio" name="Male" id="m1" value="Male">
<label for="m1">Male</label>
<input type="radio" name="Male" id="f1" value="Female">
<label for="f1">Female</label>
</td>
</tr>
<tr>
<th>
Height:
</th>
<td>
<input type="text" name="Height" id="h1">
</td>
</tr>
<th>
Weight:
</th>
<td>
<input type="text" name="Weight" id="w1">
</td>
</table>
<div id="showTable2"></div>
</div>
<!--processes acceptInput()-->
<button id="push" onclick="acceptInput()">Report it!</button>
<br>
<br>
the end
</body>
</html>
It looks like it works? ? to me anyway.
ASKER
Hello, thank you for your contribution.
By transferring and reloading the previous table is moving the Element tags from Table 2 to be written directly into the HTML document by using javascript.
Have found solution to answer as this here
By transferring and reloading the previous table is moving the Element tags from Table 2 to be written directly into the HTML document by using javascript.
Have found solution to answer as this here
document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");
. The last two above solutions also work but without <HTML> tags.
@Jason Maxwell
OK, I read your comment but I do not understand what needs to be done.
Sorry but I did not understand, or get your meaning when you said -
"By transferring and reloading the previous table is moving the Element tags from Table 2 to be written directly into the HTML document by using javascript."
also you show an example of javascript that uses the document.write( ) method and in your comments you say - "This is preferred using document.write so that the table is shown immediately"
My view is, the document.write( ) method is rarely used in modern web pages, and it is not a way to place content into the shown web page with a button Click that runs a function like acceptInput( ), , I mostly use TWO ways to place content on the existing web page, One way if to create the elements in JS and then push those elements into an element on the page, so If I wanted the page content of this JS -
OK, I read your comment but I do not understand what needs to be done.
Sorry but I did not understand, or get your meaning when you said -
"By transferring and reloading the previous table is moving the Element tags from Table 2 to be written directly into the HTML document by using javascript."
also you show an example of javascript that uses the document.write( ) method and in your comments you say - "This is preferred using document.write so that the table is shown immediately"
My view is, the document.write( ) method is rarely used in modern web pages, and it is not a way to place content into the shown web page with a button Click that runs a function like acceptInput( ), , I mostly use TWO ways to place content on the existing web page, One way if to create the elements in JS and then push those elements into an element on the page, so If I wanted the page content of this JS -
document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");
to do this from a function I might write code to create elements -function newContent1( ) {
var newEl = document.createElement("H1");
var newText = document.createTextNode("Hello World!");
newEl.appendChild(newText);
document.getElementById('div1').appendChild(newEl);
var newEl = document.createElement("p");
var newText = document.createTextNode("Have a nice day!");
newEl.appendChild(newText);
document.getElementById('div1').appendChild(newEl);
}
OR I might us JS to place a string into an element as the New HTML for that Elementfunction newContent2( ) {
document.getElementById('div1').innerHTML = "<h1>Hello World!</h1><p>Have a nice day!</p>";
}
so you could get an Input Value, and then use .innerHTML to add a table to the content-function showVerifacation( ) {
var NAME = document.getElementById('name').value;
var newHTML = "<form action='newSub.jsp'><h3>Verify Submission</h3>"+
"<table><tbody><tr><td>name</td><td><input type='text' name='Name' value='"+ NAME +"'></td></tr>"+
"<tr><td><input type='submit' value='Correct - Submit'></td><td><button onclick='cancel()'>Cancel</button></td></tr>"+
"</tbody></table></form>";
document.getElementById('div1').innerHTML = newHTML;
}
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Open in new window