Agfdhyk

I am trying to make a table appear when I click on a submit button in a form.
I am using JavaScript for that function.
See code below:

<script type="text/javascript">

    function showTable1234() {

        var showtab = document.getElementsByClassName('container12');

        for(var i =0;i !=showtab.length;i++)

            showtab[i].style.display = 'block';

    }

</script>

Here is the code for the button which is calling the above function:

<button type="submit" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>

This is div element which is to be shown on clicking the submit button:

<div class="container12" >

    <h2>Hover Rows</h2>           

    <table class="table table-hover" id = "tab12">

        <thead>

            <tr>

                <th>Firstname</th>

                <th>Lastname</th>

                .....

Now as soon as I run the code on the Chrome browser and clicking on submit button, table is visible only but only for mini second or something and the disappears.
It appears again when i click on submit button but again for same amount of time.

I even tried with this code but same result

<script type="text/javascript">

    function showTable1234() {

        var showtab = document.getElementsByClassName('container12')[0];

        for(var i =0;i !=showtab.length;i++)

            showtab[i].style.display = 'block';

    }

</script>

But for this i am getting this error

Uncaught TypeError: Cannot read property 'style' of undefined

    at showTable1234 

Advance Thanks for the help.

Change this line:

<button type="submit" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>

Into this and your issue should be resolved:

<button type="button" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>

I suspect your submit button is in a form and that it is causing the form to submit. So the JavaScript works, but then the whole page gets refreshed due to the form submit.

To stop the form submit, you can add onSubmit=“return false” to the form. You can also stop the submit by returning false from your button’s onClick, or use a button of type button rather than submit.

Add a return false at the end of the function and return the returned value of showTable1234 in the click handler of the button to prevent the default action (which is submitting the form and thus refreshing the page).

<button type="submit" class="btn btn-primary btn-block" onclick="return showTable1234();">Submit</button>

<script>

function showTable1234() {

   var showtab = document.getElementsByClassName('container12');

   for(var i =0;i !=showtab.length;i++)

   showtab[i].style.display = 'block';

   return false;

}

</script>