Click here to Skip to main content
15,892,927 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;

}
 
Share this answer
 
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>
 
Share this answer
 

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