Posso fare in modo che un <pulsante> non invii un modulo?

Ho un modulo, con 2 pulsanti

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

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

Uso anche il pulsante dell'interfaccia utente di jQuery su di essi, semplicemente così

$('button').button();

Tuttavia, anche il primo pulsante invia il modulo. Avrei pensato che se non avesse avuto type="submit", non avrebbe.

Ovviamente potrei farlo

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

Ma c'è un modo per impedire a quel pulsante Indietro di inviare il modulo senza l'intervento di JavaScript?

Ad essere sincero, ho usato un pulsante solo per poterlo modellare con l'interfaccia utente di jQuery. Ho provato a chiamare button()il link e non ha funzionato come previsto (sembrava abbastanza brutto!).

Il valore predefinito per l' typeattributo degli buttonelementi è "submit". Impostalo su type="button"per produrre un pulsante che non invia il modulo.

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

Nelle parole dello standard HTML : "Non fa nulla".

L' buttonelemento ha un tipo predefinito di submit.

Puoi fare in modo che non faccia nulla impostando un tipo di button:

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

Usa solo un buon vecchio HTML:

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

Avvolgilo come oggetto di un link, se lo desideri:

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

Oppure, se decidi di volere che JavaScript fornisca altre funzionalità:

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

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

Onestamente, mi piacciono le altre risposte. Facile e senza bisogno di entrare in JS. Ma ho notato che stavi chiedendo di jQuery. Quindi, per completezza, in jQuery se si restituisce false con il gestore .click (), si annullerà l'azione predefinita del widget.

Vedi qui per un esempio (e anche altre chicche). Ecco anche la documentazione .

in poche parole, con il tuo codice di esempio, fai questo:

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

Come ulteriore vantaggio, con questo, puoi sbarazzarti del tag anchor e usare semplicemente il pulsante.

Senza impostare l' typeattributo, potresti anche tornare falsedal tuo OnClickgestore e dichiararlo onclickcome onclick="return onBtnClick(event)".

Sì, puoi fare in modo che un pulsante non invii un modulo aggiungendo un attributo del tipo di pulsante valore: <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
        }
        }

        ?>