On click of the button my page reloads why

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

What is the element with the ID `getBetween` in your markup? Is it a ` — Ilya Streltsyn, May 13 '20 at 05:42

Kunal Vohra · Answer 1 · 2020-05-13T07:41:28.827

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

I tried the way1 but still the issue was the same. Am sorry I didn't get the way2 — Punam, May 13 '20 at 08:18

Don Nisnoni · Answer 2 · 2020-05-13T05:23:18.763

0

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>

edited May 13 '20 at 05:23

answered May 13 '20 at 05:12

Don Nisnoni

104
9

On click of the button my page reloads why

2 Answers2