Question 191539 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – My webpage refreshes whenever I complete my form but not if I only enter a few values

I am writing a program in which the user enters certain details about a book in an HTML form and then when they press the submit button it creates an object and then pushes to an array and then displays the the array. However, if I enter 3 out of the 4 input fields it does exactly what I want it to do but when i fill in all the input fields and submit it seems to refresh the page entirely and I do not understand why. I am new to javascript and I’m trying to learn about session storage and how it works

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="booksCSS.css">
    <title>Book Catalogue</title>
</head>
<body >
    <h1>Your favourite book catalogue</h1>
    <form onsubmit="false">
        <label for="title">Please enter the title of your book:</label>
        <input type="text" name="title" id="title" required><br/>

        <label for="author">Please enter the author of the book</label>
        <input type="text" name="author" id="author" required><br/>
    
        <label for="genre">Please enter the genre of the book:</label>
        <input type="text" name="genre" id="genre" required><br/>

        <label for="reviews">Please enter your review on the book:</label>
        <input type="text" name="reviews" id="reviews" required>

        <button id="addBttn">Add</button>
    </form>
    <p id="bookTitle"></p>
    <p id="bookAuthor"></p>
    <p id="bookGenre"></p>
    <p id="bookReview"></p>

    <script src="booksJS.js"></script>

</body>
</html>`

let myArray = [];
class Books {
    constructor(Title, Author, Genre, Review) {
        this.Title = Title
        this.Author = Author
        this.Genre = Genre
        this.Review = Review
    }

    getTitle(){
        return this.Title
    }
    getAuthor(){
        return this.Author
    }
    getGenre(){
        return this.Genre
    }
    getReview(){
        return this.Review
    }
}

const addBtn = document.getElementById("addBttn")
addBtn.addEventListener("click", (event) => {
    let userTitle = document.getElementById("title").value;
    let userAuthor = document.getElementById("author").value;
    let userGenre = document.getElementById("genre").value;
    let userReview = document.getElementById("reviews").value;

    const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
    myArray.push(newObj)
    console.log(newObj)
    sessionStorage.setItem("array", myArray);
})

console.log(sessionStorage.getItem("array"));`
Tags:

3

Answers


  1. 0

    You need to specify the button type, or the browser will set it automatically:

    <button type='button' id='addBttn'>Add</button>

    The default type for buttons is either ‘reset’ or ‘submit’.

    Login or Signup to reply.
  2. 0

    When you submit a form in HTML, the data goes to the POST method. Thus the page reloads it is normal.

    First, you can remove the onsubmit="false because it’s not a valid property. Then, you can do your processing on button click.

    You need to add an on click listener to your button, and on the event, call e.preventDefault() to block the normal button click behavior.

    Your html:

    <form>
     // YOUR FORM
     <button id="addBttn" type="button">Add</button>
</form>

    Your javascript:

    document.getElementById('addBttn').addEventListener('click', function(event) {
     event.preventDefault();
    // DO YOUR LOGIC HERE
}
    Login or Signup to reply.
  3. 0

    When a form is being submitted by your browser, then a request is being sent to the server and when the server’s response arrives back to your browser, it processes it, so it very much seems like the page is reloaded, but actually it’s not reloaded, it’s the request that your browser is waiting for.

    Now, you may prevent a form from being submitted via

    <form onsubmit="return false;">
    <!-- Your content -->
</form>

    I can see you attempted to do so, but you had false as the value of onsubmit, but essentially you need to return false because this is a submit handler, that is, a callback function and false is not meaningful by itself, you need to state that the return value of the function is false via return false;.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search