Kann ich eine <Schaltfläche> dazu bringen, ein Formular nicht abzuschicken?

Question

Ich habe ein Formular mit 2 Schaltflächen

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

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

Ich verwende die jQuery UI-Schaltfläche auch auf ihnen, einfach wie folgt

$('button').button();

Mit der ersten Schaltfläche wird das Formular jedoch auch abgeschickt. Ich hätte gedacht, dass, wenn es nicht die type="submit" würde es nicht.

Offensichtlich könnte ich das tun

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

Aber gibt es eine Möglichkeit, wie ich verhindern kann, dass die Schaltfläche "Zurück" das Formular ohne JavaScript-Eingriff sendet?

Um ehrlich zu sein, habe ich eine Schaltfläche nur verwendet, damit ich sie mit jQuery UI gestalten kann. Ich habe versucht, aufzurufen button() auf den Link und es funktionierte nicht wie erwartet (sah ziemlich hässlich aus!).

Answer 1

Ehrlich gesagt, gefallen mir die anderen Antworten. Einfach und keine Notwendigkeit, in JS zu bekommen. Aber ich habe bemerkt, dass Sie über jQuery gefragt wurden. Also der Vollständigkeit halber, in jQuery, wenn Sie false mit der .click() Handler zurückgeben, wird es die Standardaktion des Widgets negieren.

Siehe hier für ein Beispiel (und noch mehr Leckereien). Hier ist auch die Dokumentation .

kurz gesagt, mit Ihrem Beispielcode, tun Sie dies:

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

Ein zusätzlicher Vorteil besteht darin, dass Sie den Anker-Tag loswerden und nur die Schaltfläche verwenden können.

Answer 2

Ohne die Einstellung der type Attribut können Sie auch false von Ihrem OnClick Handler, und deklarieren Sie die onclick Attribut als onclick="return onBtnClick(event)" .

Answer 3

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

        ?>