CODEWITHSUNDEEP
javascriptformselement
Augie Gross
Augie Gross

Reputation: 23

how to call original form from button click in Javascript

I'm trying to get back to the original form by way of a button after a second form has replaced the original. Pretty new to JS, but I have a pretty good understanding of how this should work. Here is my example:

<!DOCTYPE html>
<html>
<center>
<head>
<title>Test2</title>
<script>
    function formReset()
    {
        document.getElementById("table").innerHTML = "???";
    }
    function nextPage()
    {
        if (document.getElementById("1").checked == true){
            document.getElementById("main").innerHTML = document.getElementById("test1").innerHTML;}
            else
        if (document.getElementById("2").checked == true){
            document.getElementById("main").innerHTML = document.getElementById("test2").innerHTML;}
            else
        if (document.getElementById("3").checked == true){
            document.getElementById("main").innerHTML = document.getElementById("test3").innerHTML;}
        return true;
    }
</script>
</head>
    <body>
     <h1>This is a test of the radio buttons</h1>
     <br />
     <div name="table" id="table">
    <form name="main" id="main">
        <input type="radio" name="grp1" id="1">1<br>
        <input type="radio" name="grp1" id="2">2<br>
        <input type="radio" name="grp1" id="3">3<br>
        <br />
        <input type="button" name="button" value="Next" onClick="nextPage()">
    </form>
</div>
<br />
<div name="test1" id="test1" style="display:none">
    <h2>You chose<br />1</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test2" id="test2" style="display:none">
    <h2>You chose<br />2</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test3" id="test3" style="display:none">
    <h2>You chose<br />3</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
</body>
</center>
</html>

When the question marks are displayed, that's when I need the original form(id="main") to display.

I expected: document.getElementById("table").innerHTML = document.getElementById("main").innerHTML; to work but it doesn't. Any help would be appreciated as I've been looking for a solution for days.

Upvotes: 2

Views: 278

Answers (1)

Jericho
Jericho

Reputation: 10953

Please try this

<!DOCTYPE html>
<html>
<center>
<head>
<title>Test2</title>
<script>
    function formReset()
    {
        document.getElementById("final").innerHTML ="";
        document.getElementById("normal").style.display = 'block';
    }
    function nextPage()
    {
        if (document.getElementById("1").checked == true){
            document.getElementById("final").innerHTML = document.getElementById("test1").innerHTML;
            document.getElementById("normal").style.display = 'none';
            }
            else
        if (document.getElementById("2").checked == true){
            document.getElementById("final").innerHTML = document.getElementById("test2").innerHTML;
            document.getElementById("normal").style.display = 'none';
            }
            else
        if (document.getElementById("3").checked == true){
            document.getElementById("final").innerHTML = document.getElementById("test3").innerHTML;
            document.getElementById("normal").style.display = 'none';
            }
        return true;
    }
</script>
</head>
    <body>
     <h1>This is a test of the radio buttons</h1>
     <br />
     <div name="table" id="table">
    <form name="main" id="main">
        <div id="final"></div>
        <div id="normal">
        <input type="radio" name="grp1" id="1">1<br>
        <input type="radio" name="grp1" id="2">2<br>
        <input type="radio" name="grp1" id="3">3<br>
        <br />
        <input type="button" name="button" value="Next" onClick="nextPage()">
        </div>
    </form>
</div>
<br />
<div name="test1" id="test1" style="display:none">
    <h2>You chose<br />1</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test2" id="test2" style="display:none">
    <h2>You chose<br />2</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test3" id="test3" style="display:none">
    <h2>You chose<br />3</h2>
    <input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
</body>
</center>
</html>

Upvotes: 1

Related Questions