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

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!).

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

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>

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();"/>

<form onsubmit="return false;">
   ...
</form>

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.

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

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>

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

        ?>