Click here to Skip to main content
15,041,393 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
How do I stop auto-refresh after submission.. I have a JS that is going to be executed (displaying form data)?

HTML
HTML
<body>
    <noscript>Your browser does not supoort Javascript!</noscript>
    <div>
        <img src="assets/images/logo.png" width="500" class="top-centered-logo" alt="Logo">
        <div class="back-arrow">
            <a aria-current="page" class="active" href="home.htm">
                <img width="30" src="assets/images/back-arrow.png">
            </a>
        </div>
        <div>
            <div id="check-in" class="centered">
                <form id="my-form" onsubmit="results ()" method="post" class="sm-form" action="">
                    <label for="firstname"></label>
                    <input type="text" id="firstname" class="sm-form-input" placeholder="First Name" required>
                    <label for="lastname"></label>
                    <input type="text" id="lastname" class="sm-form-input" placeholder="Last Name" required>
                    <label for="location"></label>
                    <input type="text" id="location" class="sm-form-input" placeholder="City of Residence" required>
                    <button class="sm-form-button">Add Family Member</button>
                    <input type="submit" class="sm-form-button"></button>
                </form>
            </div>
        </div>    
    </div>
<script src="assets/js/checkin.js"></script>
</body>

JS
JavaScript
function results() {
    var firstname = document.getElementById("firstname").value;
    var lastname = document.getElementById("lastname").value;
    var location = document.getElementById("location").value;
    
    document.getElementById('my-form').innerHTML = "Thank you "+ firstname +" for checking in.";
    document.getElementById('my-form').style.fontFamily = 'Manrope', sans-serif;
    document.getElementById('my-form').style.color = 'white'
}


What I have tried:

<input type="submit" class="sm-form-button" onclick="return false;"></button>
Posted
Updated 30-Apr-20 7:03am
v2

Add "return" to onsubmit

onsubmit="return results ()


Have your function return false

JavaScript
function results() {

var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var location = document.getElementById("location").value;

document.getElementById('my-form').innerHTML = "Thank you "+ firstname +" for checking in.";
document.getElementById('my-form').style.fontFamily = 'Manrope', sans-serif;
document.getElementById('my-form').style.color = 'white';

return false;

}
   
Comments
thecoziest 30-Apr-20 12:32pm
   
Thank you, but the same issue still arises.
thecoziest 30-Apr-20 12:34pm
   
It works now!

<input type="submit" class="sm-form-button" onclick="return results ()"></button>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900