Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

Question

Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

After creating two JavaScript functions, I am eager to utilize both of them upon pressing the submit button on my form. The first function is already integrated into the submit button and activates a paragraph display upon submission. Now, I intend to showcase a table that includes field values extracted from the form input - such as date, text, and number types. This table will consist of 2 columns and 5 rows; the first column detailing company name, available seats count, position names, location, and application deadline, while the second column presents the actual field values obtained using the document.getElementById('ID') function within the form. It's worth noting that both functions rely on the document.getElementById('ID') method.

javascript css html

Answer 1

Answer №1

If you're looking to streamline your code, I'd suggest utilizing jQuery for this particular task. It tends to simplify things a lot.

Check out this example which demonstrates how to customize a basic form using jQuery. You can place your two functions within the event handler shown there.

$( "#target" ).submit(function( event ) {
  event.preventDefault(); // prevents the form from being submitted
  myFunction1(); // execute your first function
  myFunction2(); // execute your second function
});

If I'm understanding correctly, you already have both functions set up and just need a way to call them?

To update the text or content, you simply use:

$('#elementID').html('The new updated content'); // for divs or similar elements
$('#elementID').val('The new updated content'); // for input fields

I hope this information proves helpful to you :-)

Answer 2

If you're looking to streamline your code, I'd suggest utilizing jQuery for this particular task. It tends to simplify things a lot.

Check out this example which demonstrates how to customize a basic form using jQuery. You can place your two functions within the event handler shown there.

$( "#target" ).submit(function( event ) {
  event.preventDefault(); // prevents the form from being submitted
  myFunction1(); // execute your first function
  myFunction2(); // execute your second function
});

If I'm understanding correctly, you already have both functions set up and just need a way to call them?

To update the text or content, you simply use:

$('#elementID').html('The new updated content'); // for divs or similar elements
$('#elementID').val('The new updated content'); // for input fields

I hope this information proves helpful to you :-)

Answer 3

Answer №2

If you're unable to use JQuery, simply call your JavaScript function within the initial function as a workaround.

    function firstFunction(){
        //Your code to show a paragraph.
        secondFunction();
    }

    function secondFunction(){
        //Body of second function.
    }

This way, if your initial function is already within the submit button, your code will display the paragraph and then execute the code from the second function. However, using JQuery as mentioned by Mr. Frogurt is a cleaner and more efficient solution overall.

I hope this explanation helps!

Answer 4

If you're unable to use JQuery, simply call your JavaScript function within the initial function as a workaround.

    function firstFunction(){
        //Your code to show a paragraph.
        secondFunction();
    }

    function secondFunction(){
        //Body of second function.
    }

This way, if your initial function is already within the submit button, your code will display the paragraph and then execute the code from the second function. However, using JQuery as mentioned by Mr. Frogurt is a cleaner and more efficient solution overall.

I hope this explanation helps!

Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

Answer №1

Answer №2

Similar questions

PhantomJS fails to trigger function within page.evaluate

Transform a complex PHP array into JSON format using JavaScript

What sets apart calling an async function from within another async function? Are there any distinctions between the two methods?

What is the process for setting up a banner on one page that will automatically be reflected on all other pages?

setTimeout is only effective for durations less than 1000 milliseconds

Why is my filtering and sorting function failing to function properly?

Displaying various images within a bootstrap modal window

react scroll event not displaying drop shadow

Create an HTTP-only cookie from the resolver function in Apollo GraphQL

Encountering a 404 error while trying to use the autolinker

Google's geolocation.getCurrentPosition function fails to function properly on mobile devices after the page is refreshed

Troubleshooting the "Failed to mount component" error in Vue: fixing template or render function definition issues

The drop-down menu keeps flickering instead of remaining open when clicked

An unexpected error occurred: [$injector:modulerr] (unidentified)

Exploring an array of objects to find a specific string similar to the one being

Leverage arrays within a personalized filtering system

The location of the CHROMEDRIVER for Node.js with Selenium

Employing setInterval() without clearing previously triggered events

What is the method for converting a JSON file into an array list?

Jquery function for determining height across multiple browsers