Puis-je faire en sorte qu'un <bouton> ne soumette pas de formulaire?


516

J'ai un formulaire avec 2 boutons

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

J'utilise le bouton jQuery UI sur eux aussi, simplement comme ceci

$('button').button();

Cependant, le premier bouton envoie également le formulaire. J'aurais pensé que si ce n'était pas le cas type="submit", ce ne serait pas le cas.

Évidemment, je pourrais faire ça

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

Mais existe-t-il un moyen d'empêcher ce bouton de retour de soumettre le formulaire sans intervention JavaScript?

Pour être honnête, j'ai utilisé un bouton uniquement pour pouvoir le styliser avec jQuery UI. J'ai essayé d'appeler button()sur le lien et cela n'a pas fonctionné comme prévu (avait l'air assez moche!).



2
utiliser <button type="button">pour celui qui ne soumet pas le formulaire et <input type="submit">pour l'autre. Ensuite, attrapez-le avec jquery$('#formID').submit(function(e){});
Airwavezx

Réponses:


1131

La valeur par défaut de l' typeattribut des buttonéléments est "soumettre". Réglez-le sur type="button"pour produire un bouton qui ne soumet pas le formulaire.

<button type="button">Submit</button>

Pour reprendre les termes de la norme HTML : "Ne fait rien".


14
Selon w3schools, ce n'est pas vrai pour IE .
R0MANARMY

53
C'est juste un mauvais choix de conception.
octern


Wow, alex et toi étiez vraiment en train de vous en sortir dans les révisions. Je ne vois pas pourquoi vous vous souciez des citations ou pas d'un attribut.
ADJenks

228

L' buttonélément a un type par défaut de submit.

Vous ne pouvez rien faire en définissant un type de button:

<button type="button">Cancel changes</button>

1
@ B.ClayShannon Pas vraiment. Vous pouvez utiliser du code côté serveur pour renvoyer la même page lorsque vous cliquez sur le bouton, mais il rechargera toujours la page. En fin de compte, le bouton fait partie du document et les seules façons de dire au navigateur comment vous voulez qu'il agisse sont HTML et JavaScript.
s4y

17

Utilisez simplement du bon vieux HTML:

<input type="button" value="Submit" />

Enveloppez-le comme le sujet d'un lien, si vous le souhaitez:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

Ou si vous décidez que vous souhaitez que javascript fournisse d'autres fonctionnalités:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

7
L'utilisation d'un contrôle de bouton standard avec l'attribut de type approprié est un "bon vieux HTML" et crée un balisage beaucoup plus simple.
R0MANARMY

Ce n'est clairement pas plus simple si dans certains navigateurs il a un type de soumission par défaut et dans d'autres il a un type de bouton par défaut. Heck, même simplement avoir le type de soumission par défaut complique les choses plus que ce qui est nécessaire à l'OMI. Il devrait y avoir un balisage qui fournit facilement un bouton qui ne fait rien. Et il y a:<input type="button" />
Jeffrey Blake

+1 J'ai souvent utilisé cette technique exacte, et cela a toujours bien fonctionné pour moi. Une variante est que si vous devez annuler l'événement de publication pour un bouton côté serveur basé sur un calcul côté client, vous pouvez inclure window.event.returnValue = false; dans votre code qui s'exécute dans l'événement onclick côté client pour votre bouton ... c'est-à-dire, si l'utilisation d'un contrôle de validateur personnalisé ne coupe pas la moutarde pour vous :)
Adam McKee

1
@ JGB146: Ce n'est pas parce que tous les navigateurs par défaut n'ont pas la même valeur qu'ils ne respecteront pas le type correct s'il est défini manuellement (comme le suggère jleedev. Sans parler des questions, il est spécifiquement demandé un moyen de le faire sans JavaScript alors que votre réponse n'en tient pas compte
R0MANARMY

11
@ JGB146: Buttonest un conteneur en HTML. Cela vous permet de placer des choses comme des images ou des tableaux (vous ne savez pas pourquoi vous le feriez, mais vous le pourriez), etc. alors que inputcela ne prend pas en charge cela. Il y a une différence entre les deux, et chacun a son cas d'utilisation approprié.
R0MANARMY


5

Honnêtement, j'aime les autres réponses. Facile et pas besoin d'entrer dans JS. Mais j'ai remarqué que vous posiez des questions sur jQuery. Donc, par souci d'exhaustivité, dans jQuery si vous retournez false avec le gestionnaire .click (), cela annulera l'action par défaut du widget.

Voir ici pour un exemple (et plus de goodies, aussi). Voici également la documentation .

en un mot, avec votre exemple de code, procédez comme suit:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

Comme avantage supplémentaire, avec cela, vous pouvez vous débarrasser de la balise d'ancrage et simplement utiliser le bouton.


Curieusement, l'ajout e.preventDefault()ne fait rien pour arrêter la soumission (là où elle commence function(e)).
Sablefoste

1

Sans définir l' typeattribut, vous pouvez également revenir falsede votre OnClickgestionnaire et déclarer l' onclickattribut comme onclick="return onBtnClick(event)".


0

Oui, vous pouvez faire en sorte qu'un bouton ne soumette pas de formulaire en ajoutant un attribut de type de bouton de valeur: <button type="button"><button>


-2
  <form class="form-horizontal" method="post">
        <div class="control-group">

            <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
        </div>
        <div class="control-group">
            <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
        </div>
        <div class="control-group">
            <input type="text" class="span1" name="unit" id="inputPassword" required>
        </div>
            <div class="control-group">
            <label class="control-label" for="inputPassword">Semester</label>
            <div class="controls">
                <select name="semester">
                    <option></option>
                    <option>1st</option>
                    <option>2nd</option>
                </select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputPassword">Deskripsi</label>
            <div class="controls">
                    <textarea name="description" id="ckeditor_full"></textarea>
 <script>CKEDITOR.replace('ckeditor_full');</script>
            </div>
        </div>



        <div class="control-group">
        <div class="controls">

        <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
        </div>
        </div>
        </form>

        <?php
        if (isset($_POST['save'])){
        $subject_code = $_POST['subject_code'];
        $title = $_POST['title'];
        $unit = $_POST['unit'];
        $description = $_POST['description'];
        $semester = $_POST['semester'];


        $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
        $count = mysql_num_rows($query);

        if ($count > 0){ ?>
        <script>
        alert('Data Sudah Ada');
        </script>
        <?php
        }else{
        mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());


        mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());


        ?>
        <script>
        window.location = "subjects.php";
        </script>
        <?php
        }
        }

        ?>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.