Javascript 表单重新加载

问：

我目前正在创建一个后端代码，在第一个按钮“submitBtn”上是该项目的预览，然后第二个按钮将其发送到 json 数据库“submitit”，它当前在“submitBtn”上重新加载，并且不显示项目的预览，并且不存储要放入 json 数据库的数据，当用户单击“submitit”

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('previewBtn').addEventListener('click', function(event) {
        event.preventDefault(); // Prevent default button behavior

        // Get form values
        var productName = document.getElementById('productName').value;
        var category = document.getElementById('category').value;
        var condition = document.getElementById('condition').value;
        var price = document.getElementById('price').value;
        var description = document.getElementById('description').value;
        var image = document.getElementById('image').files[0];

        // Display item preview
        displayItemPreview(productName, description, price, condition, category, image);
    });

    document.getElementById('sellf').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission behavior

        // Send data to server
        sendDataToServer();
    });
});

function displayItemPreview(productName, description, price, condition, category, image) {
    document.getElementById('itemname').textContent = productName;
    document.getElementById('itemdesc').textContent = description;
    document.getElementById('pricecang').textContent = "£" + price;
    document.getElementById('itemcond').textContent = condition;
    document.getElementById('itemcat').textContent = category;

    // Display the selected image
    var imgPreview = document.getElementById('itemimg');
    imgPreview.src = URL.createObjectURL(image);
}

function sendDataToServer() {
    var productName = document.getElementById('productName').value;
    var category = document.getElementById('category').value;
    var condition = document.getElementById('condition').value;
    var price = document.getElementById('price').value;
    var description = document.getElementById('description').value;
    var image = document.getElementById('image').files[0];

    var formData = new FormData();
    formData.append('productName', productName);
    formData.append('category', category);
    formData.append('condition', condition);
    formData.append('price', price);
    formData.append('description', description);
    formData.append('image', image);

    fetch('http://localhost:3000/submitForm', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.text();
    })
    .then(data => {
        // Handle success
        console.log(data);
    })
    .catch(error => {
        // Handle error
        console.error('Error sending data:', error);
    });
}

            <form id="sellf">
                <div class="text3">
                    <h2 class="text3">Your Items first step:</h2>
                </div>
                <fieldset>
                    <legend class="text3">Item Information</legend>
                    <div class="text3">
                        <label for="productName">What's your item called?</label>
                        <input type="text" id="productName" name="productName" placeholder="Product Name" required>
                    </div>
                    <div class="text3">
                        <label for="category">What category does your item fall under?</label>
                        <select name="category" id="category" required>
                            <option value="Electronics">Electronics</option>
                            <option value="Clothing">Clothing</option>
                            <option value="Furniture">Furniture</option>
                            <option value="Toys">Toys</option>
                            <option value="Books">Books</option>
                            <option value="Unspecified">Other</option>
                        </select>
                    </div>
                    <div class="text3">
                        <label for="condition">What condition is your item in?</label>
                        <select name="condition" id="condition" required>
                            <option value="new">New</option>
                            <option value="nobox">New - No Box</option>
                            <option value="used">Used</option>
                            <option value="broken">Broken</option>
                        </select>
                    </div>
                    <div class="text3">
                        <label for="price">What price are you selling your item for?</label>
                        <input type="number" id="price" name="price" placeholder="Price" required>
                    </div>
                    <div class="text3">
                        <label for="description">What is your item's description?</label>
                        <textarea name="description" id="description" cols="30" rows="10" placeholder="Description" required></textarea>
                    </div>
                    <div class="text3" style="align-items: center;">
                        <label for="image">What is your item's image?</label>
                        <br>
                        <input type="file" id="image" accept="image/*" required>
                    </div>
                </fieldset>
                <div class="text3">
                    <h3 class="text3">All happy? Click review to review.</h3>
                    <input type="button" id="submitBtn" class="submit" value="Click review to review"></input>
                </div>
        </section>
        <section>
            <div class="text3">
                <h2>Your Second Step, <br> Review your Item.</h2>
            </div>
        </section>
        <section>
            <div class="box2">
                <h2 id="itemname">Your Item Name</h2>
                <img src="/assets/images/hexxa.png" alt="Product 2" id="itemimg">
                <p id="itemdesc">Your Items Description</p>
                <p id="rating"><img src="/assets/images/800px-Five-pointed_star.svg.png" style="height: 30px; width: 30px;"><img src="/assets/images/800px-Five-pointed_star.svg.png" style="height: 30px; width: 30px;"><img src="/assets/images/800px-Five-pointed_star.svg.png" style="height: 30px; width: 30px;"><img src="/assets/images/800px-Five-pointed_star.svg.png" style="height: 30px; width: 30px;"><img src="/assets/images/800px-Five-pointed_star.svg.png" style="height: 30px; width: 30px;"></p>
                <p id="itemcond">Your Items Condition</p>
                <p id="itemcat">Your Items Category</p>
                <p id="pricecang">Your Items Price</p>
                <button class="add-to-cart">Add to Cart</button>
            </div>
        </section>
        <section>
            <div class="text3">
                <h2>Your Third Step,</h2>
            </div>
        </section>
        <section>
            <button type="submit" class="submitit" id="submitit">Send it on Hexxa!</button>
        </section>
            </form>

我期待该网站向我显示预览，当我单击下一步按钮提交它时，它将正确存储它。