How to show success of a form in an iframe?
How to show success of a form in an iframe?
1 answer
by
lindsey.homenick ,
3 months ago
@ryleigh
To show the success of a form in an iframe, you can use JavaScript to dynamically update the content of the iframe after the form is successfully submitted. Here are the steps you can follow:
- Add an event listener to the form submission that triggers a function when the form is submitted successfully.
- In the function, update the source of the iframe to a new URL that displays a success message or a success page.
- You can also use JavaScript to show a success message within the iframe itself by updating its content or injecting HTML elements dynamically.
Here is an example code snippet that demonstrates how you can show the success of a form submission in an iframe:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Success in Iframe</title>
</head>
<body>
<!-- Form -->
<form id="myForm">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<button type="submit">Submit</button>
</form>
<!-- Iframe -->
<iframe id="successIframe" src="form-success.html"></iframe>
<script>
// Get the form element
const form = document.getElementById('myForm');
// Add event listener for form submission
form.addEventListener('submit', (event) => {
event.preventDefault();
// Simulate form submission success
// Update the iframe source to display the success message
document.getElementById('successIframe').src = "form-success.html";
});
</script>
</body>
</html>
|
In this example, when the form is submitted, the iframe source is updated to a new URL "form-success.html" that displays a success message. You can customize the success message content in the "form-success.html" file to fit your needs.