John Davidson

function submitForm(){

    if (document.getElementById("age").value > 10){

        document.getElementById("postNameText").innerHTML = document.getElementById("name").value;

        document.getElementById("form2").style.display = "block";

    } else {

        document.getElementById("showData").innerHTML = "You are not eligible to use this site.";

    }

    document.getElementById("showData").style.display = "block";

    document.getElementById("form1").style.display = "none";

}

<form id="form1">

    <input type="text" name="name" id="name" placeholder="Name">

    <input type="number" name="age" id="age" placeholder="Age">

    <button type="button" onclick="submitForm()">Send</button>

</form>



<h2 id="showData" style="display: none;">Your name is <span id="postNameText"></span> and you are eligible to use this site.</h2>



<form action="process.php" method="post" style="display: none;" id="form2">

    <input type="email" name="email" id="email" placeholder="Email">

    <input type="submit" value="Submit" id="submitData">

</form>

---

My Answer:
One way to achieve this without using Ajax is to prevent the default form submission behavior and instead use JavaScript to handle the form submission and update the specific section of the page.

You can modify your `submitForm` function to prevent the form from submitting and refreshing the page by adding `event.preventDefault()` at the beginning of the function. Then, you can update the specific section of the page with the user's email without refreshing the entire page.

Here's an example of how you can modify your `submitForm` function:

javascript
function submitForm(event){
event.preventDefault(); // prevent form submission and page refresh

if (document.getElementById("age").value > 10){
document.getElementById("postNameText").innerHTML = document.getElementById("name").value;
document.getElementById("form2").style.display = "block";
} else {
document.getElementById("showData").innerHTML = "You are not eligible to use this site.";
}
document.getElementById("showData").style.display = "block";
document.getElementById("form1").style.display = "none";
}


And update your form tag to pass the event object to the `submitForm` function:

html

Send

With this approach, the form will still be submitted and the email will be sent to the server, but the specific section of the page displaying the user's name and age will not be affected.