Kan ik een <button> geen formulier verzenden?

Ik heb een formulier, met 2 knoppen

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

Ik gebruik ook de jQuery UI-knop op hen, gewoon zo

$('button').button();

De eerste knop verzendt echter ook het formulier. Ik had gedacht dat als het niet de type="submit"had, het niet zou hebben.

Natuurlijk zou ik dit kunnen doen

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

Maar is er een manier om te voorkomen dat de terug-knop het formulier verzendt zonder tussenkomst van JavaScript?

Om eerlijk te zijn, heb ik alleen een knop gebruikt, zodat ik deze kon stylen met jQuery UI. Ik heb geprobeerd button()te bellen op de link en het werkte niet zoals verwacht (zag er nogal lelijk uit!).

Antwoord 1, autoriteit 100%

De standaardwaarde voor het typeattribuut van buttonelementenis“submit”. Stel het in op type="button"om een ​​knop te maken die het formulier niet verzendt.

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

In de woorden van de HTML-standaard: “Doet niets.”

Antwoord 2, autoriteit 18%

Het button-elementheeft het standaardtype submit.

Je kunt ervoor zorgen dat het niets doet door een type buttonin te stellen:

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

Antwoord 3

Gebruik gewoon goede oude HTML:

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

Verpak het desgewenst als onderwerp van een link:

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

Of als u besluit dat u wilt dat javascript een andere functionaliteit biedt:

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

Antwoord 4

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

Antwoord 5

Ja, u kunt ervoor zorgen dat een knop geen formulier verzendt door een kenmerk van het type waardeknop toe te voegen:
<button type="button"><button>

Antwoord 6

Eerlijk gezegd vind ik de andere antwoorden leuk. Makkelijk en je hoeft niet in JS te komen. Maar ik merkte dat je naar jQuery vroeg. Dus voor de volledigheid: als je in jQuery false retourneert met de .click()-handler, wordt de standaardactie van de widget teniet gedaan.

Zie hier voor een voorbeeld(en nog meer lekkers). Hier is ook de documentatie.

in een notendop, met uw voorbeeldcode, doe dit:

<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 bijkomend voordeel kunt u hiermee de ankertag verwijderen en gewoon de knop gebruiken.

Antwoord 7

Zonder het kenmerk typein te stellen, kunt u ook falseretourneren vanuit uw onclick-handler en de onclickkenmerk als onclick="return onBtnClick(event)".

Antwoord 8

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