страница перезагружается при нажатии кнопки

Question

У меня есть веб-страница с большим количеством компонентов.Есть много кнопок, и когда я нажимаю на них, они не перезагружают страницу, но когда я нажимаю на кнопки, которые находятся внутри этого кода, страница

<div style="width:300px; height:250px; float:left; position:absolute; z-index:4">
    <form style="width:100%;">
        <fieldset style="width:250px; height:210px;">
        <legend><b>Authors</b></legend>
        <div id="authors" style="width:250px; height:150px; position:absolute; overflow:scroll">
            <div style="white-space: nowrap;">
                <button class="button removeclick" style="display:block; float:left;"><img src="img/list-remove.png" alt="remove" /></button>
                <button class="button upclick" style="display:block; float:left;"><img src="img/arrow-up.png" alt="arrow-up" /></button>
                <button class="button downclick" style="display:block; float:left;"><img src="img/arrow-down.png" alt="arrow-down" /></button> 
                <input  class="resizable" type="text" style="height:29px"/>
            </div>
            <div style="white-space: nowrap;">
                <button class="button removeclick" style="display:block; float:left;"><img src="img/list-remove.png" alt="remove" /></button>
                <button class="button upclick" style="display:block; float:left;"><img src="img/arrow-up.png" alt="arrow-up" /></button>
                <button class="button downclick" style="display:block; float:left;"><img src="img/arrow-down.png" alt="arrow-down" /></button> 
                <input  class="resizable" type="text" style="height:29px"/>
            </div>
        </div>
        <div style="position:absolute; top:180px;"><button id="add" class="button" style="display:block; float:right;"><img src="img/add_new.png" alt="add new" /> Add New</button></div>
        </fieldset>
    </form>
    </div>

перезагружается, и я не знаю почему.Мне не нужно это поведение.

Answer 1

изменить открывающий тег формы на:

<form style="width:100%;" onsubmit="return false;">

Answer 2

Удалите тег form и он должен работать.

Answer 3

Удалите атрибут формы из кода, поля ввода внутри атрибута формы отправляют форму при нажатии Enter.

Answer 4

, потому что они находятся внутри form, если вам не нужно отправлять, нет смысла иметь форму, удалите

<form style="width:100%;">

и

 </form>

Answer 5

попробуйте preventDefault(); в вашем javascript, если вы не хотите, чтобы страница перезагрузилась:

в jQuery, как это:

$("#buttonID").click(function(e){

    e.preventDefault();

});

Answer 6

Все кнопки должны быть расположены внутри тега Форма .

Нажатие кнопки, расположенной внутри тега Form , отправляет и отправляет форму на сервер.