Show last 5 submitted data using only JS and HTML

I have a small question, I am yet a beginner with Java Script and I don’t have that much of knowledge with it. My question is:

I need to create a fake donation form. The form contains fields where the user can write his data like his phone number, donate amount etc… and when the user hit submit his donate amount and his name should be shown in a table, besides the last other 4 donations of the other people. I think that my code should look like that

<body>
    <div id="container">
        <form action="#" name="myForm" id="myForm">

            <br>name: <input type="text" name="name" id="donatorName"></br>
            <span id="Enter your name"></span>

            <br>Donate amount: <input type="number" name="donateAmount" id="amount"></br>
            <span id="Your total donate amount"></span>
            <br/>

            <button type="button" value="submit" onclick="return validation(); document.getElementById('container').style.display='none'">submit</button>
        </form>
    </div>

    <div id="new_container">
        <p id="displa_name"></p>
        <p id="display_total_amount"></p>

        <div id="Btn"></div>
    </div>

    <script type="text/javascript">

        function validation(){
            var donatorName = document.getElementById("donatorName").value;
            var donateAmount = document.getElementById("amount").value;

            // donatorName validation
            if(donatorName == ""){
                document.getElementById("donatorName").innerHTML = "Name cannot be empty";
                document.getElementById("donatorName").style.color = "#ff0000";
                return false;
            }

            // donateAmount validation
            if(donateAmount == ""){
                document.getElementById("amount").innerHTML = "Total amount cannot be empty";
                document.getElementById("amount").style.color = "#ff0000";
                return false;
            }
            if(donateAmount < 1){
                document.getElementById("amount").innerHTML = "Donate amount should be greater than 0";
                document.getElementById("amount").style.color = "#ff0000";
                return false;
            }
            showDetails();
        }
    
        function showDetails(){
            document.getElementById('container').style.display='none';
            // name
            const  = document.getElementById("amount").value;
            document.getElementById("display_name").innerHTML = `DonatorName: ${donatorName}`;    
            document.getElementById("display_total_amount").innerHTML = `TotalAmount: ${donateAmount}`;    
    
</script>

</body>

JavaScript
​x
 
<body>
    <div id="container">
        <form action="#" name="myForm" id="myForm">
​
            <br>name: <input type="text" name="name" id="donatorName"></br>
            <span id="Enter your name"></span>
​
            <br>Donate amount: <input type="number" name="donateAmount" id="amount"></br>
            <span id="Your total donate amount"></span>
            <br/>
​
            <button type="button" value="submit" onclick="return validation(); document.getElementById('container').style.display='none'">submit</button>
        </form>
    </div>
​
    <div id="new_container">
        <p id="displa_name"></p>
        <p id="display_total_amount"></p>
​
        <div id="Btn"></div>
    </div>
​
    <script type="text/javascript">
​
        function validation(){
            var donatorName = document.getElementById("donatorName").value;
            var donateAmount = document.getElementById("amount").value;
​
            // donatorName validation
            if(donatorName == ""){
                document.getElementById("donatorName").innerHTML = "Name cannot be empty";
                document.getElementById("donatorName").style.color = "#ff0000";
                return false;
            }
​
            // donateAmount validation
            if(donateAmount == ""){
                document.getElementById("amount").innerHTML = "Total amount cannot be empty";
                document.getElementById("amount").style.color = "#ff0000";
                return false;
            }
            if(donateAmount < 1){
                document.getElementById("amount").innerHTML = "Donate amount should be greater than 0";
                document.getElementById("amount").style.color = "#ff0000";
                return false;
            }
            showDetails();
        }
    
        function showDetails(){
            document.getElementById('container').style.display='none';
            // name
            const  = document.getElementById("amount").value;
            document.getElementById("display_name").innerHTML = `DonatorName: ${donatorName}`;    
            document.getElementById("display_total_amount").innerHTML = `TotalAmount: ${donateAmount}`;    
    
</script>
​
</body>
​

I am not sure about my code, so please help me and explain to me how else I can do it. I want to keep it simple for now so please give me some advices 😀

Answer

I recommend you use backend language for this, like PHP, but if javaScript is what you needed, here’s a simple way for that. You can store the data in an array, or cache them so that the data will not be lost even when tab is refreshed. But let’s use array for this example. You already have your form so let’s skip it.

For the table in HTML:

<table>
    <thead>
        <th>Name</th>
        <th>Amount</th>
    </thead>
    <tbody id="displayDonations">
        <!-- Data will be displayed here thru javaScript -->
    </tbody>
</table>

JavaScript
 
<table>
    <thead>
        <th>Name</th>
        <th>Amount</th>
    </thead>
    <tbody id="displayDonations">
        <!-- Data will be displayed here thru javaScript -->
    </tbody>
</table>
​

javaScript:

let donations = [];

function validation() { // This is called when you submit the form
    // Put your validations here
    // Example Validation: return false if not valid
    if (!isValid()) return false; 

    // Remove first element of the array if length == 5
    if (donations.length == 5) {
        donations.shift();
    }

    // Push object into the donations array
    donations.push(
        {
            "name"   : document.getElementById("donatorName").value,
            "amount" : document.getElementById("amount").value
        }
    );

    showDetails();
}

function showDetails() {
    let tableBody = "";

    donations.forEach((element) =>{
        // Construct what you want to display
        tableBody += ""
            + "<tr>"
            +   "<td>" + element.name + "</td>"
            +   "<td>" + element.amount + "</td>"
            + "</tr>"
        ;
    });
    
    // Write the tableBody to the HTML
    document.getElementById("displayDonations").innerHTML = tableBody;
}

JavaScript
 
let donations = [];
​
function validation() { // This is called when you submit the form
    // Put your validations here
    // Example Validation: return false if not valid
    if (!isValid()) return false; 
​
    // Remove first element of the array if length == 5
    if (donations.length == 5) {
        donations.shift();
    }
​
    // Push object into the donations array
    donations.push(
        {
            "name"   : document.getElementById("donatorName").value,
            "amount" : document.getElementById("amount").value
        }
    );
​
    showDetails();
}
​
function showDetails() {
    let tableBody = "";
​
    donations.forEach((element) =>{
        // Construct what you want to display
        tableBody += ""
            + "<tr>"
            +   "<td>" + element.name + "</td>"
            +   "<td>" + element.amount + "</td>"
            + "</tr>"
        ;
    });
    
    // Write the tableBody to the HTML
    document.getElementById("displayDonations").innerHTML = tableBody;
}
​

Advertisement

Answer