Show table when form is submitted

Question

I have a form, if nothing is submitted then it should't show the table #mytable Only when the form has been submitted is should show the table #mytable

How do i do that?

<form action="" id="myform" method="get">
   <strong>Søg på fritekst :</strong>
   <input type="text" name="searchword" id="searchword" value=""/>
   <input type="submit" id="show" value="Søg"/>
</form>


<table width="100%" id="mytable" class="sortable" border="0" cellpadding="2" cellspacing="2" style="border:1px solid #D4D4D4;">
<tr>
<th bgcolor="#313c95" width="100" style="color: #FFF; font-weight:bold; text-align: left;">EAK Kode:</th>
<th bgcolor="#313c95" width="350" style="color: #FFF; font-weight:bold; text-align: left;">Beskrivelse:</th>
<th style="display:none;"></th>
<th style="display:none;"></th>
<th style="display:none;"></th>

</tr>
</table>

Answer 1

Make sure your table with id mytable is hidden (use display: none or something similar), then use this jQuery:

$('#myform').submit(function() {
  $('#mytable').show();
  return false;
});

Note that this prevents the form action being processed (ie POSTed to your server).

Answer 2

You can use the onsubmit attribute in the form to run a javascript function:

<form ... onsubmit="return showTable();">

Then have a javascript function

function showTable()
{
    document.getElementById('mytable').style.visibility = 'visible';//shows the table
    return false; //tells the form not to actaully load the action page
}

That's assuming that the table is initially hidden.

Hope that helps

Answer 3

You could use a server side language to check for a post or get variable and if it exists include the table in the html.
You could also do something with javascript and cookies. http://plugins.jquery.com/project/cookie

Answer 4

The easiest way to do this is from your backend code. What language are you using?

If you want to do on a client side you need to add a query param to your action attribute so when the page reloads you can see if the form has been posted.

How are you submitting your form? Do you want to post your data via the form or AJAX? Please elaborate a bit.

..fredrik

Answer 5

First of all, assign "display:none" into your table just like following coding.

<form action="" id="myform" method="get">
    <strong>
        Søg på fritekst : 
    </strong>
    <input type="text" name="searchword" id="searchword" value=""/>
    <input type="submit" id="show" value="Søg"/>
</form>
<table width="100%" id="mytable" class="sortable" border="0" cellpadding="2" cellspacing="2" style="border:1px solid #D4D4D4; display:none;">
    <tr>
        <th bgcolor="#313c95" width="100" style="color: #FFF; font-weight:bold; text-align: left;">
            EAK Kode: 
        </th>
        <th bgcolor="#313c95" width="350" style="color: #FFF; font-weight:bold; text-align: left;">
            Beskrivelse: 
        </th>
        <th style="display:none;">
        </th>
        <th style="display:none;">
        </th>
        <th style="display:none;">
        </th>
    </tr>
</table>

After submitting, do like that following coding.

function showTable()
{
    document.getElementById('mytable').style.display = "inline"
}

Answer 6

So you want to be able to change your page after a normal submit without doing anything on the server? I don't think you can (if you're doing a normal post that is).

A normal post will cause a navigation, so you will lose your current client-side state. That makes most of the suggestions here incorrect, I think. So you would have to do it client-side right when the page is loaded. At this point, you'll need to know whether it was loaded as a result of a post, or a normal first-round get. I don't think you can do this without putting something in there in the back-end.

Of course, you could do your submit through ajax. This will not cause a navigation and then you can just display the table client-side. Render the table with display:none set for it's style, then use jQuery('#myTable').show() ;