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

Label the timeline map generated with the leaftime plug-in for leaflet in R with the appropriate tags

Determining the data type of a textbox value in JavaScript: String or Number?

Loading pages asynchronously using Ajax with added interactivity through custom JavaScript scripts

How to resolve the error of "Objects are not valid as a React child" in NextJs when encountering an object with keys {children}

A tutorial on how to create the appearance of disabled buttons that look the same as enabled buttons through the use

Save log discrepancies to a document

Determine whether the response from a jQuery AJAX call is in JSON format or binary. If it is found to be binary, proceed

Having trouble making JSON work alongside Ajax and jQuery?

The functionality of a button within a web component is restricted to only trigger the click event once after it has been

Is it common to have numerous operations in a single controller in AngularJS?

Include an extra hyperlink in the adaptive menu bar

Struggling to populate React Components with JS objects only to encounter the error message "Functions cannot be used as React children"?

I am encountering an issue with a JS addition operator while working with node.js and fs library

What could be causing the issue of images not loading in Chrome while they are loading perfectly in Mozilla when using CSS3?

Vanilla JS Rock, Paper, Scissors Game - Fails to reset classes upon restarting

Display different text based on the property value

Basic AngularJS framework with minimal external dependencies

Linking model attribute to checkbox in AngularJs

working with html data in a bootstrap modal using javascript

How come my countdown application functions properly when accessed through the browser via the HTML page, but encounters issues when utilized with an HTTP server?