<button>でフォームを送信しないようにできますか?


516

ボタンが2つあるフォームがあります

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

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

私もそれらのjQuery UIのボタンを使用します。

$('button').button();

ただし、最初のボタンもフォームを送信します。がない場合はないと思いtype="submit"ます。

明らかに私はこれを行うことができました

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

しかし、JavaScriptの介入なしにその戻るボタンがフォームを送信しないようにする方法はありますか?

正直なところ、ボタンのみを使用して、jQuery UIでスタイルを設定できるようにしました。button()リンクを呼び出してみましたが、期待どおりに動作しませんでした(かなり醜く見えました!)。



2
使用<button type="button">フォームを送信していないもののために<input type="submit">他のいずれかの。次に、jqueryでそれをキャッチします$('#formID').submit(function(e){});
Airwavezx

回答:


1131

要素type属性button のデフォルト値「送信」です。に設定してtype="button"、フォームを送信しないボタンを作成します。

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

HTML標準の言葉では、「何もしない」です。


14
w3schoolsによると、それはIEには当てはまりません
R0MANARMY 2010

53
それは、驚くほど悪いデザインの選択です。
octern 2015


うわー、あなたとアレックスは改訂で本当にそれを公にしていた。なぜあなたはどちらも引用符を気にするか、属性について気にしないのかわかりません。
ADJenks

228

button要素は、デフォルトのタイプがありますsubmit

タイプをbutton次のように設定することで、何も行わないようにすることができます。

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

1
@ B.ClayShannon本当にそうではありません。サーバー側のコードを使用して、ボタンがクリックされたときに同じページを返すこともできますが、ページは再読み込みされます。結局のところ、ボタンはドキュメントの一部であるため、ボタンの動作をブラウザに伝える唯一の方法はHTMLとJavaScriptです。
s4y、2015年

17

古き良きHTMLを使用するだけです。

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

必要に応じて、リンクの対象としてラップします。

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

または、JavaScriptで他の機能を提供する場合:

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

7
適切なtype属性を持つ標準のボタンコントロールを使用することは「古き良きhtml」であり、はるかに単純なマークアップを作成します。
R0MANARMY 2010

一部のブラウザではデフォルトのタイプの送信があり、他のブラウザではデフォルトのタイプのボタンがある場合、それは明らかに単純ではありません。いや、デフォルトのタイプの送信だけでも、必要なIMOよりも複雑になります。何もしないボタンを簡単に提供できるマークアップがあるはずです。そして、あります:<input type="button" />
ジェフリーブレイク

+1私はこの正確なテクニックを何度も使用してきましたが、それはいつも私にとってうまくいきました。1つのバリエーションは、クライアント側の計算に基づいてサーバー側ボタンのポストバックイベントをキャンセルする必要がある場合、window.event.returnValue = falseを含めることができます。ボタンのクライアント側のonclickイベントで実行されるコードで...つまり、カスタムバリデーターコントロールを使用してもマスタードがカットされない場合:)
Adam McKee

1
JGB146 @:。ただ、同じ値にないすべてのブラウザのデフォルトのためには、jleedevによって提案されたとして(手動で設定しています場合は質問に言及していない、具体的にそれを行う方法を尋ね、彼らは正しい型を尊重しないという意味ではありませんなしJavaScriptはあなたの答えはそれを考慮に入れていません
R0MANARMY

11
@ JGB146:ButtonHTMLのコンテナーです。これは、画像やテーブルなどを配置することを可能にします(なぜこれを行うのかわかりませんが、可能です)など、それをinputサポートしていません。2つには違いがあり、それぞれに適切なユースケースがあります。
R0MANARMY 2010


5

正直、私は他の答えが好きです。簡単でJSに入る必要はありません。しかし、私はあなたがjQueryについて尋ねていることに気づきました。したがって、完全を期すために、jQueryで.click()ハンドラーを使用してfalseを返すと、ウィジェットのデフォルトアクションが無効になります。

例についてはこちらを参照してください(さらに多くの特典もあります)。 こちらもドキュメントです。

一言で言えば、サンプルコードでこれを行います:

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

追加の利点として、これにより、アンカータグを削除してボタンを使用することができます。


不思議なことに、追加e.preventDefault()しても送信は停止されません(それがで始まる場合function(e))。
Sablefoste 2017

1

type属性を設定しないとfalseOnClickハンドラーから戻り、onclick属性をとして宣言することもできますonclick="return onBtnClick(event)"


0

はい、値ボタンのタイプの属性を追加することで、ボタンがフォームを送信しないようにすることができます。 <button type="button"><button>


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

        ?>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.