Show a toast message and reset the form upon submission

Question

Show a toast message and reset the form upon submission

Here I have created a contact form using HTML, CSS, and JavaScript. However, I'm facing an issue where the form redirects me to a page displaying the submitted details after clicking the submit button. I want to display a toast message instead and reset the form upon submission. To help troubleshoot, I've added an extra button to test the toast functionality, but I'm still stuck!

Any assistance would be greatly appreciated!

Try out the form demo here

(function() {
  // Javascript code
})();

// CSS and JS libraries

javascript html jquery css forms

Answer 1

Answer №1

If you want to trigger an event when a button is clicked and reset the form values, you can achieve this by including the following code snippet in your script:

$('.button-success').on('click', function(e){
        e.preventDefault(); // Prevent page from loading
        $("#myToast").toast('show'); // Display toast message
        document.getElementsByName('data-form')[0].reset(); // Reset the form field values
    })

Make sure to assign a name parameter to your form tag so that you can access it within the function. (For example, you can use 'data-form' as the name)

Answer 2

If you want to trigger an event when a button is clicked and reset the form values, you can achieve this by including the following code snippet in your script:

$('.button-success').on('click', function(e){
        e.preventDefault(); // Prevent page from loading
        $("#myToast").toast('show'); // Display toast message
        document.getElementsByName('data-form')[0].reset(); // Reset the form field values
    })

Make sure to assign a name parameter to your form tag so that you can access it within the function. (For example, you can use 'data-form' as the name)

Show a toast message and reset the form upon submission

Answer №1

Similar questions

IE/Firefox returning empty value for Ajax requests

Is there a way to use jQuery to retrieve the date and time from a timestamp within an input field?

Performing multiple requests using Axios library in a React application

The only numbers that can be typed using Typescript are odd numbers

Using Express.js, Passport.js, and SockJS to Link User Socket with deserializeUser

Struggling with integrating Bootstrap into a Vue.js application due to a compatibility problem with

Spin the connections around a circular path

Displaying information post-inquiry - Google Visualizations

Utilizing only JavaScript to parse JSON data

JavaScript regex substitution not functioning as expected

AngularJS is patiently anticipating the population of the scope for ng-show

Is it feasible to retrieve an object from AWS S3 in Blob format using AWS SDK for JavaScript V3?

Transferring data from the server side using ejs to Ajax

javascript best practice for processing form data with arrays

Safari CSS issue: Relative parent and child with pseudo selector not producing consistent output across different browsers

Exploring the power of Next JS by implementing server-side rendering with a

Secure your Express.js session cookies for enhanced protection

Indicator count for multiple slick carousels

Dimension of images within bootstrap column division

Having trouble updating the value of my textfield in material-ui using formik