How to refresh only a specific section of a page except using Ajax

April 20, 2022

I have a simple form to get user email address. But I also need to get the users name and age as well and display them in the page for only a one time. When the user submit his name and age, it will be displayed in the same page using HTML JavaScript DOM. Now what I need to do is that I want to prevent the whole page from refreshing once the user submit his email cause it will clear the users name and age which was given only for a temporary time and I also don’t need to store them in the database as well. Is there have any idea of how to do that except using Ajax? Any help will be greatly appreciated!

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>

Thank you!

>Solution :

Try this!

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>

<iframe src="email.html" frameborder="0" id="form2" style="display: none;"></iframe>

Include your second form inside a new HTML file called email.html and this will prevent the page from reloading.

Thanks and best regards!