Display the table upon completion of the form submission

Question

Display the table upon completion of the form submission

I am trying to create a form where the table #mytable is only displayed after the form has been submitted. If nothing is entered in the form, the table should remain hidden.

Any suggestions on how I can achieve this?

<form action="" id="myform" method="get">
   <strong>Search by keyword :</strong>
   <input type="text" name="searchword" id="searchword" value=""/>
   <input type="submit" id="show" value="Search"/>
</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 Code:</th>
<th bgcolor="#313c95" width="350" style="color: #FFF; font-weight:bold; text-align: left;">Description:</th>
<th style="display:none;"></th>
<th style="display:none;"></th>
<th style="display:none;"></th>

</tr>
</table>

javascript jquery html css forms

Answer 1

Answer №1

Ensure that your table identified as mytable is not visible (utilize display: none or a similar method), and then apply the following jQuery code:

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

Please be aware that this will prevent the form action from being processed (i.e., POSTed to your server).

Answer 2

Ensure that your table identified as mytable is not visible (utilize display: none or a similar method), and then apply the following jQuery code:

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

Please be aware that this will prevent the form action from being processed (i.e., POSTed to your server).

Answer 3

Answer №2

If you want to trigger a JavaScript function using the onsubmit attribute in a form, follow these steps:

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

Create the following JavaScript function:

function displayData()
{
    document.getElementById('mytable').style.visibility = 'visible'; // This will make the table visible
    return false; // Prevents the form from loading the action page
}

This solution assumes that the table is initially hidden.

I hope this explanation proves helpful!

Answer 4

If you want to trigger a JavaScript function using the onsubmit attribute in a form, follow these steps:

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

Create the following JavaScript function:

function displayData()
{
    document.getElementById('mytable').style.visibility = 'visible'; // This will make the table visible
    return false; // Prevents the form from loading the action page
}

This solution assumes that the table is initially hidden.

I hope this explanation proves helpful!

Answer 5

Answer №3

One approach is to employ a server-side language to verify the presence of a post or get variable, and then embed the table in the HTML document as needed.
Alternatively, you could utilize JavaScript along with cookies for a different implementation. http://plugins.jquery.com/project/cookie

Answer 6

One approach is to employ a server-side language to verify the presence of a post or get variable, and then embed the table in the HTML document as needed.
Alternatively, you could utilize JavaScript along with cookies for a different implementation. http://plugins.jquery.com/project/cookie

Answer 7

Answer №4

To tackle this issue effortlessly, it's best approached from the backend code. What programming language do you typically use for your projects?

If you're keen on handling this task on the client side, consider appending a query parameter to the action attribute to monitor form submission upon page reload.

How exactly are you planning to submit your form? Are you looking to send your data through traditional form submission or via AJAX? Feel free to provide more details for better assistance.

...with regards, Fredrik

Answer 8

To tackle this issue effortlessly, it's best approached from the backend code. What programming language do you typically use for your projects?

If you're keen on handling this task on the client side, consider appending a query parameter to the action attribute to monitor form submission upon page reload.

How exactly are you planning to submit your form? Are you looking to send your data through traditional form submission or via AJAX? Feel free to provide more details for better assistance.

...with regards, Fredrik

Answer 9

Answer №5

To begin, make sure to set the "display:none" property for your table using the code below.

<form action="" id="myform" method="get">
    <strong>Search by text : </strong>
    <input type="text" name="searchword" id="searchword" value=""/>
    <input type="submit" id="show" value="Search"/>
</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 Code: 
        </th>
        <th bgcolor="#313c95" width="350" style="color: #FFF; font-weight:bold; text-align: left;">
            Description: 
        </th>
        <th style="display:none;">
        </th>
        <th style="display:none;">
        </th>
        <th style="display:none;">
        </th>
    </tr>
</table>

After submission, use the following code snippet to display the table:

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

Answer 10

To begin, make sure to set the "display:none" property for your table using the code below.

<form action="" id="myform" method="get">
    <strong>Search by text : </strong>
    <input type="text" name="searchword" id="searchword" value=""/>
    <input type="submit" id="show" value="Search"/>
</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 Code: 
        </th>
        <th bgcolor="#313c95" width="350" style="color: #FFF; font-weight:bold; text-align: left;">
            Description: 
        </th>
        <th style="display:none;">
        </th>
        <th style="display:none;">
        </th>
        <th style="display:none;">
        </th>
    </tr>
</table>

After submission, use the following code snippet to display the table:

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

Answer 11

Answer №6

Are you looking to make changes to your page without having to interact with the server after a standard submission? It seems unlikely if you are using a regular post method.

A standard post request will trigger a navigation, causing the loss of any current client-side data. This renders most suggestions mentioned here invalid. You may need to handle this on the client-side as soon as the page loads. Determining whether it was loaded due to a post or an initial get request will likely require some backend intervention.

Alternatively, you could consider submitting your form via AJAX. By doing so, there won't be any navigation, allowing you to display the table directly on the client-side. Initially render the table with display:none in its style attribute and then reveal it using jQuery('#myTable').show().

Answer 12

Are you looking to make changes to your page without having to interact with the server after a standard submission? It seems unlikely if you are using a regular post method.

A standard post request will trigger a navigation, causing the loss of any current client-side data. This renders most suggestions mentioned here invalid. You may need to handle this on the client-side as soon as the page loads. Determining whether it was loaded due to a post or an initial get request will likely require some backend intervention.

Alternatively, you could consider submitting your form via AJAX. By doing so, there won't be any navigation, allowing you to display the table directly on the client-side. Initially render the table with display:none in its style attribute and then reveal it using jQuery('#myTable').show().

Display the table upon completion of the form submission

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

using javascript to access an opened html div

Is there a way to bring my popup closer to my button?

Using Vue.js to iterate through a nested array from an object key

Build a custom Angular2 pipe to convert JSON data into an array through iteration

Web scraping with Cheerio in Node.js sometimes yields undefined results

What is the best way to center align all elements using a wrapper in CSS grid?

In IE7, the string comparison in jQuery exhibits unique behavior

Retrieving an item from AsyncStorage produces a Promise

Facing difficulties in resetting the time for a countdown in React

jQuery only works partly with IE

Is it possible to construct an IFrame using URL parameters?

CSS fluid layout with three columns

How to send data from JavaScript to ASP.NET

Triggering the Bootstrap modal multiple times with each increment

Locate button elements with the class "button" that do not have any images inside them

Leverage environment variables in React JS to define distinct API URLs for production and development environments

Could someone kindly clarify the workings of this jQuery script for me?

Issue with sticky positioning not functioning properly with overlapping scrolling effect

Launch the file explorer using JavaScript/HTML

Node.js: Leveraging Express to Compare URL Parameters and Handle Delete Requests with Array Values