Czy mogę <przycisk> nie przesyłać formularza?

515

Mam formularz z 2 przyciskami

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

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

Używam na nich również przycisku jQuery UI, po prostu tak

$('button').button();

Jednak pierwszy przycisk również przesyła formularz. Myślałbym, że gdyby nie miał type="submit", nie zrobiłby tego.

Oczywiście mógłbym to zrobić

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

Ale czy jest jakiś sposób, aby powstrzymać ten przycisk powrotu przed przesłaniem formularza bez interwencji JavaScript?

Szczerze mówiąc, użyłem tylko przycisku, aby móc stylizować go za pomocą interfejsu użytkownika jQuery. Próbowałem wywołać button()link i nie działało to zgodnie z oczekiwaniami (wyglądało dość brzydko!).

alex
źródło
Możliwy duplikat przycisku HTML, aby NIE przesłać formularza
just.another.programmer
2
użyj <button type="button">dla tego, który nie przesyła formularza i <input type="submit">dla drugiego. Następnie złap go za pomocą jquery$('#formID').submit(function(e){});
Airwavezx

Odpowiedzi:

1129

Domyślna wartość typeatrybutu buttonelementów to „prześlij”. Ustaw go, aby type="button"wyświetlał przycisk, który nie przesyła formularza.

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

Słowami standardu HTML : „Nic nie robi”.

Josh Lee
źródło
14
Według w3schools nie jest to prawdą w przypadku IE .
R0MANARMY
53
To tylko szokująco zły wybór projektu.
octu
Wszyscy: proszę przeczytać html.spec.whatwg.org/multipage/syntax.html#unquoted
Josh Lee
Wow, ty i Alex naprawdę dukaliście to w wersjach. Nie rozumiem, dlaczego którymś z was zależy na cytatach, czy nie na atrybucie.
ADJenks,
228

buttonElementem ma typ domyślny submit.

Możesz sprawić, że nic nie zrobisz, ustawiając typ button:

<button type="button">Cancel changes</button>
s4y
źródło
1
@ B.ClayShannon Nie bardzo. Możesz użyć kodu po stronie serwera, aby zwrócić tę samą stronę po kliknięciu przycisku, ale nadal przeładuje stronę. Ostatecznie przycisk jest częścią dokumentu, więc jedynym sposobem, aby powiedzieć przeglądarce, jak ma działać, są HTML i JavaScript.
s4y
17

Po prostu użyj starego dobrego HTML:

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

Jeśli chcesz, zapakuj go jako temat linku:

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

Lub jeśli zdecydujesz, że chcesz, aby javascript zapewniał inne funkcje:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
Jeffrey Blake
źródło
7
Użycie standardowej kontrolki przycisku z odpowiednim atrybutem typu to „dobry stary HTML” i tworzy znacznie prostsze znaczniki.
R0MANARMY
Oczywiście nie jest to prostsze, jeśli w niektórych przeglądarkach ma domyślny typ wysyłania, aw innych ma domyślny typ przycisku. Cholera, nawet sam domyślny typ przesyłania komplikuje rzeczy bardziej niż jest to konieczne IMO. Powinny istnieć znaczniki, które łatwo zapewniają przycisk, który nic nie robi. I jest:<input type="button" />
Jeffrey Blake,
+1 Używałem tej techniki wiele razy i zawsze działała dla mnie dobrze. Jednym z wariantów jest to, że jeśli musisz anulować zdarzenie zwrotne dla przycisku po stronie serwera w oparciu o niektóre obliczenia po stronie klienta, możesz dołączyć window.event.returnValue = false; w twoim kodzie, który wykonuje się w zdarzeniu onclick po stronie klienta dla twojego przycisku ... to znaczy, jeśli użycie niestandardowego kontrolera sprawdzania poprawności nie obetnie dla ciebie musztardy :)
Adam McKee
1
@ JGB146: To, że nie wszystkie przeglądarki domyślnie mają tę samą wartość, nie oznacza, że ​​nie będą szanować poprawnego typu, jeśli zostanie ustawiony ręcznie (jak sugeruje Jleedev. Nie wspominając o pytaniach konkretnie pytających o sposób na obejście tego bez JavaScript, a twoja odpowiedź nie bierze tego pod uwagę
R0MANARMY
11
@ JGB146: Buttonto kontener w HTML. To pozwala ci umieszczać takie rzeczy jak obrazy lub tabele (nie jestem pewien, dlaczego to zrobiłeś, ale możesz) itp., Podczas gdy inputnie obsługuje tego. Istnieje różnica między nimi, a każda z nich ma odpowiedni przypadek użycia.
R0MANARMY
6
<form onsubmit="return false;">
   ...
</form>
zzjove
źródło
5

Szczerze, podobają mi się inne odpowiedzi. Łatwo i nie trzeba wchodzić do JS. Ale zauważyłem, że pytasz o jQuery. Tak więc ze względu na kompletność, w jQuery, jeśli zwrócisz false za pomocą procedury obsługi .click (), spowoduje to zanegowanie domyślnej akcji widgetu.

Zobacz tutaj przykład (i więcej gadżetów). Oto także dokumentacja .

w skrócie, z przykładowym kodem, wykonaj następujące czynności:

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

Dodatkową korzyścią jest to, że możesz pozbyć się tagu kotwicy i po prostu użyć przycisku.

TCCV
źródło
Co ciekawe, dodawanie e.preventDefault()nie powoduje zatrzymania przesyłania (tam, gdzie zaczyna się function(e)).
Sablefoste
1

Bez ustawiania typeatrybutu można również powrócić falsez programu OnClickobsługi i zadeklarować onclickatrybut jako onclick="return onBtnClick(event)".

DennisVM-D2i
źródło
0

Tak, możesz sprawić, że przycisk nie prześle formularza, dodając atrybut typu wartość przycisku: <button type="button"><button>

Githaiga Geoffrey
źródło
-2
  <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
        }
        }

        ?>
Andrzej
źródło