page est rechargée sur le bouton cliquez sur

J'ai une page Web avec beaucoup de composants. Il y a beaucoup de boutons et quand je clique sur eux, ils n `rechargent une page, mais lorsque je clique sur les boutons qui sont dans ce codepage est rechargée sur le bouton cliquez sur

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

page est rechargée et je ne sais pas pourquoi. Je n'ai pas besoin de ce comportement.

Source

2012-01-21 Iurii Dziuban

Avez-vous vérifié le javascript? Peut être des gestionnaires sont attachés avec ces boutons. – Jashwant

Puis-je voir les autres composants? C'est trop confus avec juste cela et votre style, peut-être que certains boutons chevauchent juste l'autre. Ou essayez '' au lieu de '' –

changer la balise form d'ouverture à:

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

Source

2012-01-21 18:43:20

merci. ça fonctionne très bien. Et quand je clique sur les boutons à l'intérieur de la forme, ils font leur travail correctement. J'ai également besoin de valider les champs dans ce formulaire. Je vais essayer le plugin de validation de formulaire. Si cela fonctionne, ce sera parfait. –

Tous les boutons doivent être situés à l'intérieur de l'étiquette Form.

En cliquant sur un bouton situé à l'intérieur de la balise Formulaire, vous soumettez et publiez le formulaire sur le serveur.

Source

2012-01-21 18:41:36 Anwar

vous avez raison. c'est tout à cause de l'élément

essayer preventDefault(); dans votre javascript si vous ne voulez pas la page pour reload:

dans jQuery comme ceci:

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

    e.preventDefault(); 

});

Source

2012-01-21 18:42:50 Fabian

où est le javascript – Rafay

Il n'a pas posté le javascript mais marqué la question avec jQuery et javascript. Donc je suppose qu'il utilise javascript et posté un exemple comment empêcher le formulaire de soumettre. – Fabian

qui est parce qu'ils sont à l'intérieur d'un form, si vous ne devez soumettre il n'y a pas point d'avoir une forme, retirez

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

</form>

Source

2012-01-21 18:42:56 Rafay

Supprimez l'attribut de forme à partir du code, les champs d'entrée à l'intérieur de l'attribut Transmet le formulaire le formulaire Entrez presse ..

Source

2012-01-21 18:46:08

Supprimer la balise form et cela devrait fonctionner.

Source

2012-01-21 18:48:27

page est rechargée sur le bouton cliquez sur

Répondre

Questions connexes