Guide to ensuring modal box only appears once all criteria are satisfied

Question

Guide to ensuring modal box only appears once all criteria are satisfied

On my website, I have a form that requests the user's personal information. After filling out the form, a modal pops up with a "Thank you for signing up" message. The issue is that even if all fields are left blank and the button is clicked, the modal still appears. How can I make the modal appear only after all fields are completed?

I also need the user's input to remain on the page after clicking the button, but changing the button type from submit to button causes all input fields to clear as soon as the last question is answered.

If anyone has suggestions or solutions, it would be greatly appreciated!

Below is the form:

<form id="personalinfo" name="personalinfo" onsubmit="ask()">
    <b>Please sign up with us before you proceed:</b><br>
    First Name: <input name="firstname" required="" size="40" type="text"><br>
    <br>
    Last Name: <input name="lastname" required="" size="40" type="text"><br>
    <br>
    Age: <select name="dropdown">
        <option value="1">10-18</option>
        <option value="2">19-25</option>
        <option value="3">26-35</option>
        <option value="4">36-45</option>
        <option value="5">46-55</option>
        <option value="6">56-65</option>
        <option value="6">65+</option>
    </select><br>
    <br>
    Gender: <input name="gender" required="" type="radio" value="male"> Male<br>
    <input name="gender" required="" type="radio" value="female"> Female<br>
    <input name="gender" required="" type="radio" value="other"> Other<br>
    <br>
    <br>
    <button id="OK!">OK!</button>
</form>

<div id="myModal" class="modal" type="button">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Thank you for signing up with us ! You can now proceed to the test.</p>
    </div>
</div>

<script>
    var modal = document.getElementById('myModal');
    var btn = document.getElementById("OK!");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function() 
    {
        modal.style.display = "block";
    }

    span.onclick = function() 
    {
        modal.style.display = "none";
    }

    window.onclick = function(event) 
    {
        if (event.target == modal) 
        {
            modal.style.display = "none";
        }
    }

</script>
</form>

javascript forms modal-dialog radio-button requirements

Answer 1

Answer №1

One of the reasons why your form is being cleared is because it gets submitted to the server, causing the page to reload with an empty form.

To address this issue, there are two possible approaches you could take:

Traditional form submission
AJAX form submission

In the first scenario, you would send the form data, process it on the server, and then redirect to a new page displaying a welcome message (similar to the content in your modal). However, the drawback here is that your form would be cleared upon submission.

In the second scenario, you need to follow these steps in order:

Send the form data to the server using AJAX
Handle both success and error cases appropriately
Show your modal with a message based on the result (success or error)

For making changes in your code, in the HTML section:

Remove onsubmit="ask()" from the <form> tag
Add a type="submit" attribute to your submit button
Add style="display:none" to your <div id="myModal">
Include id="modalText" for the <p> tag inside your modal

In your script section, add the following lines after your existing code (you could utilize jQuery for simplification, but it's not mandatory):

// Obtain <form> element and the modal's <p> element
var formElem = document.getElementById('personalinfo');
var modalTextElem = document.getElementById('modalText');
var modalText;

// Replace the need for onsubmit="ask()"
formElem.addEventListener("submit", ask);

// The e parameter in ask refers to an Event
function ask(e) {
    // Prevent the form from being submitted
    e.preventDefault();

    // Make an AJAX POST request to send data to the server
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'process.php');

    // Implement a callback function for handling the response
    xhr.onload = function() {

        if (xhr.status === 200) { // HTTP status 200 = OK
            var data = JSON.parse(xhr.responseText);
            modalText = 'Thank you ' + data.firstname +
                ', for signing up with us! You can now proceed to the test.';
        } else if (xhr.status !== 200) {
            modalText = 'Request failed. Returned status of ' + xhr.status +
                ' with error: <b>' + xhr.responseText + '</b>';
        }
        modalTextElem.innerHTML = modalText;
        modal.setAttribute("display", "block"); // Show the modal
    };

    xhr.send(new FormData(formElem)); // Send the request
}

Here is an example of server-side processing in PHP (process.php residing in the same directory as your HTML form):

<?php
function validataData() {
    if( strlen($_POST['firstname'] ) < 2 ) {
        return "first name is too short (2+ characters required)";
    }
    if( strlen($_POST['lastname'] ) < 2 ) {
        return "last name is too short (2+ characters required)";
    }
    return "";
}
$validationResult = validataData();

if( !empty($validationResult) ) {
    http_response_code(400); // Return an error response (400 bad request)
    die($validationResult);
}

echo json_encode($_POST); // Return form data as JSON
die();

Do note that this implementation serves as a quick solution and should be customized for real-world scenarios where more extensive server-side validation and processing may be required, such as checking database entries before allowing sign-ups. If you have any doubts, feel free to seek clarification.

Answer 2

One of the reasons why your form is being cleared is because it gets submitted to the server, causing the page to reload with an empty form.

To address this issue, there are two possible approaches you could take:

Traditional form submission
AJAX form submission

In the first scenario, you would send the form data, process it on the server, and then redirect to a new page displaying a welcome message (similar to the content in your modal). However, the drawback here is that your form would be cleared upon submission.

In the second scenario, you need to follow these steps in order:

Send the form data to the server using AJAX
Handle both success and error cases appropriately
Show your modal with a message based on the result (success or error)

For making changes in your code, in the HTML section:

Remove onsubmit="ask()" from the <form> tag
Add a type="submit" attribute to your submit button
Add style="display:none" to your <div id="myModal">
Include id="modalText" for the <p> tag inside your modal

In your script section, add the following lines after your existing code (you could utilize jQuery for simplification, but it's not mandatory):

// Obtain <form> element and the modal's <p> element
var formElem = document.getElementById('personalinfo');
var modalTextElem = document.getElementById('modalText');
var modalText;

// Replace the need for onsubmit="ask()"
formElem.addEventListener("submit", ask);

// The e parameter in ask refers to an Event
function ask(e) {
    // Prevent the form from being submitted
    e.preventDefault();

    // Make an AJAX POST request to send data to the server
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'process.php');

    // Implement a callback function for handling the response
    xhr.onload = function() {

        if (xhr.status === 200) { // HTTP status 200 = OK
            var data = JSON.parse(xhr.responseText);
            modalText = 'Thank you ' + data.firstname +
                ', for signing up with us! You can now proceed to the test.';
        } else if (xhr.status !== 200) {
            modalText = 'Request failed. Returned status of ' + xhr.status +
                ' with error: <b>' + xhr.responseText + '</b>';
        }
        modalTextElem.innerHTML = modalText;
        modal.setAttribute("display", "block"); // Show the modal
    };

    xhr.send(new FormData(formElem)); // Send the request
}

Here is an example of server-side processing in PHP (process.php residing in the same directory as your HTML form):

<?php
function validataData() {
    if( strlen($_POST['firstname'] ) < 2 ) {
        return "first name is too short (2+ characters required)";
    }
    if( strlen($_POST['lastname'] ) < 2 ) {
        return "last name is too short (2+ characters required)";
    }
    return "";
}
$validationResult = validataData();

if( !empty($validationResult) ) {
    http_response_code(400); // Return an error response (400 bad request)
    die($validationResult);
}

echo json_encode($_POST); // Return form data as JSON
die();

Do note that this implementation serves as a quick solution and should be customized for real-world scenarios where more extensive server-side validation and processing may be required, such as checking database entries before allowing sign-ups. If you have any doubts, feel free to seek clarification.

Guide to ensuring modal box only appears once all criteria are satisfied

Answer №1

Similar questions

Error in AngularJS: Failed to retrieve data using $http.post()

Using an external module in a Vue SFC: a beginner's guide

Cookie parsing functionality in Node JS malfunctioning

Angular JS Unveiled: Deciphering HTML Entities

How can I turn off the animation for a q-select (quasar select input)?

Revive the JavaScript library for handling mouse wheel events

Creating dynamic URL routes for a static website using Vue

Confirm that the method has been called by utilizing the AVA testing framework

Please ensure that the table is empty before reloading data into it

Utilizing the Filter Function to Eliminate an Element from an Array

What causes my Excel file to become corrupted when inputting new data?

Error in NextJS: Attempting to access a length property of null

Converting a buffer to a string in Python 3, similar to Node.js 6.0.0

unable to include Cross-Origin header in ajax request

JavaScript is unresponsive and fails to display

How can Swipe support help you slide a menu back in?

Use of image tag inside the title attribute

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

Issues with my transpiled and typed TypeScript npm module: How can I effectively use it in a TypeScript project?

Guide to building a multi-dimensional array from a flat object