HTML DOM Submit Object: A Comprehensive Guide to Submit Buttons

The HTML DOM (Document Object Model) Submit object represents an HTML <input type="submit"> element or a <button type="submit"> element in JavaScript. This object allows you to access and manipulate submit buttons within a web page, enabling dynamic control of form submission processes. This guide will walk you through how to access, modify, and interact with submit buttons using the DOM Submit object.

What is the HTML DOM Submit Object?

The HTML DOM Submit object provides a programmatic interface to the HTML submit button element. It allows you to:

• Access and read the button’s properties such as value, name, type, and disabled state.
• Modify these properties, dynamically changing how the button behaves or looks.
• Attach event listeners to capture user interactions such as clicks, triggering actions like form validation or custom submit handlers.

Key Properties and Methods

The HTML DOM Submit object inherits properties and methods from its parent interfaces, namely HTMLElement and HTMLInputElement or HTMLButtonElement depending on the HTML tag used for submit button, and provides several useful properties and methods specific to submit button elements:

Property/Method	Type	Description
`type`	String	Returns the type of the button, which is always `”submit”`.
`value`	String	Returns or sets the value of the submit button (the text displayed on the button).
`name`	String	Returns or sets the name of the submit button, used when submitting the form.
`form`	HTMLFormElement	Returns a reference to the form that the submit button belongs to.
`disabled`	Boolean	Returns or sets whether the button is disabled.
`click()`	Method	Programmatically clicks the button, simulating a user click.
`formAction`	String	Gets or sets the URL to which the form will be submitted when the button is clicked, overriding the form’s action.
`formEnctype`	String	Gets or sets how the form data is encoded when the form is submitted, overriding the form’s enctype.
`formMethod`	String	Gets or sets the HTTP method used to submit the form, overriding the form’s method.
`formNovalidate`	Boolean	Gets or sets a boolean indicating that form validation should be bypassed when the form is submitted.
`formTarget`	String	Gets or sets where to display the response after submitting the form, overriding the form’s target attribute.

Accessing Submit Buttons

You can access submit button elements using various DOM methods, such as getElementById(), getElementsByName(), querySelector() or querySelectorAll(). Let’s illustrate these with examples.

Accessing by ID

The getElementById() method is commonly used to access a submit button when it has a unique ID:

<form id="myForm">
  <input type="submit" id="submitButton" value="Submit Form">
</form>

<script>
  const submitButton_id = document.getElementById('submitButton');
  console.log(submitButton_id.value); // Output: Submit Form
  console.log(submitButton_id.type); // Output: submit
  console.log(submitButton_id.name); // Output: ""
  console.log(submitButton_id.disabled); // Output: false
</script>

Output:

Submit Form
submit
false

Accessing by Name

When submit buttons share the same name, getElementsByName() returns an HTMLCollection:

<form id="myFormName">
  <input type="submit" name="formSubmit" value="Submit 1">
  <button type="submit" name="formSubmit" value="Submit 2">Submit 2</button>
</form>

<script>
  const submitButtons_name = document.getElementsByName('formSubmit');
  submitButtons_name.forEach((button, index) => {
        console.log(`Button ${index+1} Value: ${button.value}, type: ${button.type}`);
  });
</script>

Output:

Button 1 Value: Submit 1, type: submit
Button 2 Value: Submit 2, type: submit

Accessing by querySelector()

The querySelector() method allows you to use CSS selectors to access submit button elements:

<form id="myFormQuery">
  <input type="submit" class="formButton" value="Submit Using Query">
</form>

<script>
    const submitButton_query = document.querySelector('input.formButton[type="submit"]');
    console.log(submitButton_query.value); // Output: Submit Using Query
</script>

Output:

Submit Using Query

Accessing by querySelectorAll()

If you have multiple submit buttons that match a CSS selector, use querySelectorAll():

<form id="myFormQueryAll">
  <input type="submit" class="formBtn" value="Submit A">
  <button type="submit" class="formBtn" value="Submit B">Submit B</button>
</form>

<script>
 const submitButtons_queryAll = document.querySelectorAll('.formBtn[type="submit"]');
  submitButtons_queryAll.forEach((button, index) => {
    console.log(`Button ${index + 1} Value: ${button.value}`);
  });
</script>

Output:

Button 1 Value: Submit A
Button 2 Value: Submit B

Modifying Submit Button Properties

The DOM Submit object allows you to modify properties of the submit button, such as value, disabled, name, and more, dynamically.

Changing the Value and Disabling

<form id="myFormMod">
  <input type="submit" id="changeValueBtn" value="Initial Submit">
</form>

<script>
    const submitButton_mod = document.getElementById('changeValueBtn');
    submitButton_mod.value = "Changed Value";
    submitButton_mod.disabled = true;
    console.log(submitButton_mod.value);
    console.log(submitButton_mod.disabled);
</script>

Output:

Changed Value
true

Setting formAction, formMethod, and formTarget

You can set these properties on the submit button to override the form’s corresponding attributes. This allows you to have different submit buttons that submit the same form to different places, with different methods, etc.

<form id="myFormOverride" action="/default-action" method="post" target="_blank">
  <input type="submit" id="overrideButton" value="Submit with Override">
</form>

<script>
  const submitButton_override = document.getElementById('overrideButton');
  submitButton_override.formAction = '/custom-action';
  submitButton_override.formMethod = 'get';
  submitButton_override.formTarget = '_self';
  console.log(submitButton_override.formAction)
  console.log(submitButton_override.formMethod)
  console.log(submitButton_override.formTarget)
</script>

Output:

/custom-action
get
_self

Note: Modifying submit button properties is a powerful way to create dynamic and user-friendly forms. 📝

Interacting with Submit Buttons

The DOM Submit object allows you to interact with submit buttons by attaching event listeners and triggering actions.

Handling Click Events

The most common interaction is handling the click event. This example prevents form submission and logs a message instead:

<form id="myFormClick">
  <input type="submit" id="clickButton" value="Click Me">
</form>

<script>
  const submitButton_click = document.getElementById('clickButton');
  submitButton_click.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Submit button clicked');
  });
</script>

Output: (Open browser console to see the message when you click the button.)

Submit button clicked

Note: event.preventDefault() is used here to prevent the form from being submitted. It’s useful when you want to perform custom actions, such as form validation, before actual submission. 💡

Programmatically Triggering a Submit Button Click

You can programmatically trigger a submit button click using the click() method:

<form id="myFormProgram">
  <input type="submit" id="programClickBtn" value="Triggered">
</form>

<script>
  const submitButton_program = document.getElementById('programClickBtn');
  submitButton_program.addEventListener('click', () => {
    console.log("Submit Clicked programmatically")
  })
  setTimeout(() => {
    submitButton_program.click();
  }, 1000);
</script>

Output: (Open browser console to see the message after 1 second.)

Submit Clicked programmatically

This example demonstrates how to use click() method to trigger the button click after 1 second using setTimeout.

Real-World Applications

The DOM Submit object is vital for creating interactive web forms. Here are some use cases:

• Dynamic Form Validation: Validate form fields before submission.
• AJAX Submissions: Submit forms without a full page refresh.
• Conditional Submissions: Disable or modify the submit button based on form conditions.
• Custom Submit Handlers: Perform actions before form submission.
• User Feedback: Provide visual feedback when the form is submitted.

Example: Dynamic Form Submission

Let’s create a scenario where the submit button is initially disabled until the user has filled in some required fields.

<form id="dynamicForm">
  <input type="text" id="nameInput" placeholder="Enter your name" required><br>
  <input type="email" id="emailInput" placeholder="Enter your email" required><br>
  <input type="submit" id="dynamicSubmit" value="Submit" disabled>
</form>

<script>
    const nameInput_dynamic = document.getElementById('nameInput');
    const emailInput_dynamic = document.getElementById('emailInput');
    const submitButton_dynamic = document.getElementById('dynamicSubmit');

    function validateForm() {
        if (nameInput_dynamic.value && emailInput_dynamic.value) {
            submitButton_dynamic.disabled = false;
        } else {
            submitButton_dynamic.disabled = true;
        }
    }

    nameInput_dynamic.addEventListener('input', validateForm);
    emailInput_dynamic.addEventListener('input', validateForm);
    submitButton_dynamic.addEventListener('click', (event) => {
      event.preventDefault();
      console.log("Form submitted!")
    });
</script>

In this example, the submit button is initially disabled and becomes enabled only when both name and email fields are filled. This is a common pattern to enforce data integrity.

Browser Support

The DOM Submit object is supported by all modern web browsers, ensuring consistent behavior across different platforms.

Note: While widely supported, always test your forms on various browsers to ensure complete compatibility and optimal functionality. 🧐

Conclusion

The HTML DOM Submit object is an essential tool for web developers, providing dynamic control over submit buttons. By understanding and using the properties, methods, and event handling capabilities of this object, you can create more interactive, user-friendly, and robust web forms. This guide has provided comprehensive insights to get you started with accessing and manipulating submit button elements efficiently. Happy coding!