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

I am no longer able to connect to mySQL using node js

What could be causing the span tag to not have CSS applied and the background image to not be displaying

Combining Files with Gulp.js and Handling File Names

Update an existing JSON document

Is it possible to modify the HTML/CSS of a child component using the parent component in Angular 2+?

Generating consecutive numerical values within the auto table JSPDF column VusJs

Using Bootstrap 3 to create a carousel with a seamless fading transition as the background

Encountering a TypeScript error when attempting to utilize indexOf on a Typed Array, leading to restriction

Ways to conceal numerous objects

Automating the click of JavaScript buttons with Selenium

Setting the current date of a jQuery datepicker to the value of an input tag

Is it possible to extend the Object class in order to automatically initialize a property when it is being modified?

Is it possible for $templateCache to preload images?

`Sending binary data to client through GraphQL: A comprehensive guide`

Unforeseen outcomes arise when toggling expansion in JavaScript

Changing an array in JavaScript within a function

Managing Margins and Padding in Multiple Lines of Divs in CSS

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

Creating dynamic links between two cells of two HTML tables within an HTML email using JavaScript

What methods can I use to get my kahoot botter to produce unpredictable answers?