Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML onsubmit Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 121 - Views
⏳ 4 mins
💬 1 Comment
HTML onsubmit Attribute

Photo Credit to CodeToFun

🙋 Introduction

The onsubmit attribute is a powerful feature in HTML that allows developers to define JavaScript code that will be executed when a form is submitted.

This attribute is applied to the <form> element and provides a way to perform actions or validations before the form data is sent to the server.

🎯 Purpose of onsubmit

The primary purpose of the onsubmit attribute is to specify a JavaScript function that will be called when the form is submitted.

This function can be used to validate form data, perform calculations, or execute any custom logic before the form is processed.

💎 Values

The onsubmit attribute accepts a JavaScript function as its value. This function will be triggered when the form is submitted.

It can be a predefined function or an inline function directly specified in the attribute.

📄 Example

Let's look at a simple example of how to use the onsubmit attribute in an HTML form:

onsubmit.html
Copied
Copy To Clipboard
<form onsubmit="return validateForm()">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <input type="submit" value="Submit">
</form>

<script>
  function validateForm() {
    // Add your form validation logic here
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username === "" || password === "") {
      alert("Please fill in all fields");
      return false; // Prevent form submission
    }

    // Additional validation or processing can be added here

    return true; // Allow form submission
  }
</script>

🧠 How it Works

In this example, the onsubmit attribute is set to call the validateForm function. This function checks if the username and password fields are filled, displaying an alert if they are not.

🔄 Dynamic Values with JavaScript

You can also dynamically set the onsubmit attribute using JavaScript.

This is useful when you want to change the form submission behavior based on certain conditions or user interactions. Here's a brief example:

onsubmit.html
Copied
Copy To Clipboard
<script>
  // Dynamically set onsubmit for a form
  document.getElementById("dynamicForm").onsubmit = function() {
    // Add your dynamic logic here
    console.log("Form submitted dynamically");
    return true; // Allow form submission
  };
</script>

🧠 How it Works

In this script, the onsubmit attribute is dynamically set for a form with the id dynamicForm. The function specified in the script will be called when the form is submitted.

🏆 Best Practices

  • Use the onsubmit attribute for form validation and custom logic before submitting data to the server.
  • Ensure that the function specified in the onsubmit attribute returns true to allow form submission and false to prevent it.
  • Always test your forms with different browsers to ensure cross-browser compatibility.

🎉 Conclusion

The onsubmit attribute in HTML provides a flexible way to execute JavaScript code before submitting a form.

By utilizing this attribute, you can enhance the user experience by validating data and performing custom actions seamlessly.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
8 months ago

If you have any doubts regarding this article (HTML onsubmit Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy