2012-01-21 3 views
1

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

<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> 

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

+0

Вы проверили javascript? Возможно, с этими кнопками могут быть обработчики. – Jashwant

+0

Могу ли я увидеть другие компоненты? Это слишком запутанно с этим и вашим стилем, может быть, некоторые кнопки просто перекрывают друг друга. Или попробуйте '' вместо '' –

ответ

3

изменения открытия тега формы, чтобы быть:

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

спасибо. он отлично работает. И когда я нажимаю кнопки внутри формы, они делают свои вещи правильно. Мне также нужно проверить поля в этой форме. Я попробую модуль проверки правильности. Если это сработает, это будет прекрасно. –

0

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

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

+0

Вы правы. это все из-за

элемент. –

0

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

в JQuery, как это:

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

    e.preventDefault(); 

}); 
+0

где javascript – Rafay

+1

Он не размещал javascript, но отметил вопрос с помощью jQuery и javascript. Поэтому я предполагаю, что он использует javascript и отправил пример того, как предотвратить отправку формы. – Fabian

1

это потому, что они находятся внутри form, если вам не нужно представить нет точки, имеющей форму, удалить

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

и

</form> 
1

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

1

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

Смежные вопросы