单击按钮时，我的页面重新加载原因

Question

I have written a JavaScript code were in I have calendar and a button the code is properly running outside joget. While in joget application if I click on the button the page reloads, how can I stop this reloads of the page and display my actual on click function in joget.

`$('#getBetween').click(function () {
                var start = $("#date_picker1").datepicker("getDate"),
                    end = $("#date_picker2").datepicker("getDate"),
                    currentDate = new Date(start),
                    between = []
                    ;

                while (currentDate <= end) {
                    between.push(new Date(currentDate));
                    currentDate.setDate(currentDate.getDate() + 1);
                }

                $(document).ready(function () {
                    $("#results").html(between.map(function (value) {
                        return $('#results:last').after('<div class="block">' + value + '<button class="remove">x</button></div>')
                    }));
                    $('.remove').click(function () {
                        $(this).parent().remove();
                        console.log(between)
                    })
                });


            });

`

The getbetween is the function of my button. Ones I click on the button it displays the content at the same moment it refreshes the page, reloads the page in joget. While its properly working in Visual Studio. Can you please help me with this

Answer 1

Can you add code: That happens when href is empty. change it to href:"#" .

Otherwise please add your code snippet.

---

After updating the question here is what you can do.

Way 1:

`$('#getBetween').click(function () {
                    var start = $("#date_picker1").datepicker("getDate"),
                        end = $("#date_picker2").datepicker("getDate"),
                        currentDate = new Date(start),
                        between = []
                        ;

                    while (currentDate <= end) {
                        between.push(new Date(currentDate));
                        currentDate.setDate(currentDate.getDate() + 1);
                    }

                    $(document).ready(function () {
                        $("#results").html(between.map(function (value) {
                            return $('#results:last').after('<div class="block">' + value + '<button  class="remove">x</button></div>')
                        }));
                        $('.remove').click(function (e) {
                         e.preventDefault()
                            $(this).parent().remove();
                            console.log(between)
                        })
                    });


                });

Just add preventdefault()

or Way 2 is not certain but you can add onClick= "" on button

Answer 2

I think you must do prevent default behavior from your JS code.

for example:

<form id="my-form">
    <!-- Your fields -->
    <input type="text">
    <button type="submit">Submit</button>
</form>

<script>
var myForm = document.querySelector("#my-form")
myForm.addEventListener('submit', (event)=> {
    event.preventDefault()
    // Do another stuffs after it
}) 
</script>