Getting a Table to Appear on the Same Page

JavaScript
1

Hello all,

I’m having some issues getting my table to appear directly over another table after clicking the submit button using document.write in the function. Also, I need my submit button to be aligned in the middle of the

data. I have tried using <td= text-align:center> which did nothing. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
<!--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 the acceptInput()-->
<button id="push" onclick="acceptInput()">Send it!</button>

<br>
<br>
<!--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>
</body>
</html>

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 arithemtic 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 data from above table into 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);
}

//Checks for radio-button selection.
function setMaleFemale(gender){
    if(getGender()){
        document.getElementById('m2').value = "Female";
    }else {
        document.getElementById('m2').value = "Male";
    }
}
2

It is helpful to link the challenge you are working on so other users can test it in context for you. Try using the ask for help button if you can.

As far as the table positioning goes it’s hard to tell without seeing it myself. However, with centering your button text-align will not work because it only aligns the TEXT, try to find a way with a different styling type, something like display or margins could be your answer.

3

Hello thanks for reply

Many examples/challenges often list the input data as a Form-type and not as a table, or with PhP or JQuery involved or .innerHTML added.

It is difficult to find a solution to a table taking input fields from user, to display as a table after submission with data using only javascript and HTML.

My solution is to use the document.write but I am unsure how to implement it with the current table above. For Top-Down reading of Javascript, it would be more reasonable to insert the document.write part between the

weight=parseInt(document.getElementById(‘w1’).value);

document.getElementById('fname2').value = fullname;

elements. Will the document.write('resultTable') proccess this result? or will it involve

document.write(' ```
<table id="tableOne" border="1">
    <tr>
    <th>
    Full Name:
    </th>
    <td>
        <input type="text" name="FullName" id="fname">
    </td>
    </tr>'); instead to display desired result?
4

So if I understand correctly you want the second table out of sight until the user completes the form and clicks the button.

You might consider using css display or visibility properties to cloak your table until the button is clicked. That way you don’t need to write the html on the fly with javascript every time the button is clicked. The table is there all the time but you just keep it out of the way until you want to show it.

display:none and visibility:hidden each have some compromises. You could read up on these some to decide which might work best for you. It is fairly easy to find online articles that weigh the pros and cons of these two side by side.