Swap out the HTML button element for text once the form is submitted

Question

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plain text. How can I replace the main button on the main page once the modal is closed?

function handleSubmit() {
  alert('yes');
  var replacement = document.getElementById('mainButton');
  replacement.style.display = 'none';
}

<body>
  <button id="mainButton"> Click here </button>
  <div class="modal">
    <form onsubmit="handleSubmit()">
      <input type="text">
      <button> Done </button>
    </form>
  </div>
</body>

In my `handleSubmit` function, I attempted the following:

Removing the button using:

document.getElementById('mainButton').innerHTML = '';

I also tried: document.getElementById('mainButton').style.display = 'none'

javascript html css button modal-dialog

Answer 1

Answer №1

When dealing with a submit button in your form, the default behavior is for the form to submit when clicked, causing the current page to unload. This prevents any further display modifications from taking effect.

To work around this limitation, consider redirecting the form to another page where you can set up the desired content by specifying the destination URL in the action attribute of the form element.

If submitting data to a server is not necessary, you can change the button type to a standard button and handle the click event instead of the submission event. This allows you to enhance the user experience without refreshing the page.

In addition to hiding elements using display:none, you can also reveal pre-configured content that is initially hidden by toggling its visibility from display:none to display:block at the appropriate time.

function submitForm() {
  alert('yes');
  var button = document.getElementById('mainButton');
  button.style.display = 'none';
  
  // Remove the class that hides the element that you want to now see
  document.querySelector(".afterClick").classList.remove("afterClick");
}

.afterClick { display:none; } /* Defaults to hidden */

<body>
  <button id="mainButton"> Click here </button>
  <div class="afterClick">Thanks!</div>
  <div class="modal">
    <form onclick="submitForm()">
      <input type="text">
       <button type="button"> Done </button>
    </form>
  </div>
</body>

Answer 2

When dealing with a submit button in your form, the default behavior is for the form to submit when clicked, causing the current page to unload. This prevents any further display modifications from taking effect.

To work around this limitation, consider redirecting the form to another page where you can set up the desired content by specifying the destination URL in the action attribute of the form element.

If submitting data to a server is not necessary, you can change the button type to a standard button and handle the click event instead of the submission event. This allows you to enhance the user experience without refreshing the page.

In addition to hiding elements using display:none, you can also reveal pre-configured content that is initially hidden by toggling its visibility from display:none to display:block at the appropriate time.

function submitForm() {
  alert('yes');
  var button = document.getElementById('mainButton');
  button.style.display = 'none';
  
  // Remove the class that hides the element that you want to now see
  document.querySelector(".afterClick").classList.remove("afterClick");
}

.afterClick { display:none; } /* Defaults to hidden */

<body>
  <button id="mainButton"> Click here </button>
  <div class="afterClick">Thanks!</div>
  <div class="modal">
    <form onclick="submitForm()">
      <input type="text">
       <button type="button"> Done </button>
    </form>
  </div>
</body>

Answer 3

Answer №2

If you want to swap out your button for a div that displays the same text, you can use this code snippet:

const originalButton = document.getElementById('originalButton');
const buttonText = originalButton.textContent;

const newDiv = document.createElement('div');
newDiv.textContent = buttonText;

document.body.removeChild(originalButton);
document.body.appendChild(newDiv);

Answer 4

If you want to swap out your button for a div that displays the same text, you can use this code snippet:

const originalButton = document.getElementById('originalButton');
const buttonText = originalButton.textContent;

const newDiv = document.createElement('div');
newDiv.textContent = buttonText;

document.body.removeChild(originalButton);
document.body.appendChild(newDiv);

Swap out the HTML button element for text once the form is submitted

Answer №1

Answer №2

Similar questions

Trouble with Selecting an un-ordered list menu item in Selenium Java's side bar navigation

Clearing existing HTML content in the TR body

How can I select elements in CSS that are "between x and y"?

Tips on updating arrow button icon when clicked using jquery

"Optimizing the placement of a range slider for pricing options

Customizing form designs with the combination of Django and Bootstrap

Titanium: Picture -> "automatically"

The presence of whitespace is causing disruptions in the text alignment within div elements

Use the arrow key to move through the different layers

Is it possible to have unique color tags in Material UI Autocomplete?

``on click of the back button of the browser, automatically submit the form

Display or conceal numerous WTForm labels

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

Utilizing the 'PUT' update technique within $resource

The application has encountered an unexpected error and is currently unavailable

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

Ways to specify the default value for a component

Is it possible to share an .ics file using SparkPost in a Node.js environment?

Choose options from an array in AngularJS using the same ng-model for a dropdown menu

Harness the power of electrons with the simple push of a button - initiating program execution