Kann ich mit einem <Button> kein Formular senden?

Ich habe ein Formular mit 2 Schaltflächen

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

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

Ich benutze auch die Schaltfläche der jQuery-Benutzeroberfläche, einfach so

$('button').button();

Die erste Schaltfläche sendet jedoch auch das Formular. Ich hätte gedacht, wenn es das nicht hätte 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, das Zurücksenden des Formulars ohne JavaScript-Intervention zu verhindern?

Um ehrlich zu sein, habe ich nur eine Schaltfläche verwendet, um sie mit der jQuery-Benutzeroberfläche zu gestalten. Ich habe versucht, button()den Link aufzurufen , und es hat nicht wie erwartet funktioniert (sah ziemlich hässlich aus!).

Der Standardwert für das typeAttribut von buttonElementen ist "submit". Stellen Sie ein, type="button"um eine Schaltfläche zu erstellen, die das Formular nicht sendet.

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

Mit den Worten des HTML-Standards : "Tut nichts."

Das buttonElement hat den Standardtyp submit.

Sie können nichts tun, indem Sie einen Typ festlegen button:

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

Verwenden Sie einfach gutes altes HTML:

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

Wickeln Sie es als Thema eines Links ein, wenn Sie dies wünschen:

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

Oder wenn Sie möchten, dass Javascript andere Funktionen bietet:

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

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

Ehrlich gesagt mag ich die anderen Antworten. Einfach und ohne dass Sie in JS einsteigen müssen. Aber ich habe bemerkt, dass Sie nach jQuery gefragt haben. Der Vollständigkeit halber wird in jQuery die Standardaktion des Widgets negiert, wenn Sie mit dem Handler .click () false zurückgeben.

Hier finden Sie ein Beispiel (und auch weitere Extras). Hier ist auch die Dokumentation .

Kurz gesagt, mit Ihrem Beispielcode tun Sie Folgendes:

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

Als zusätzlichen Vorteil können Sie damit das Ankertag entfernen und einfach die Schaltfläche verwenden.

Ohne das typeAttribut festzulegen, können Sie auch falsevon Ihrem OnClickHandler zurückkehren und das onclickAttribut als deklarieren onclick="return onBtnClick(event)".

Ja, Sie können festlegen, dass eine Schaltfläche kein Formular sendet, indem Sie ein Attribut vom Typ der Wertschaltfläche hinzufügen: <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
        }
        }

        ?>