jQuery(function($) { $('#the-form').submit(function(event) { // HTMLでの送信をキャンセル event.preventDefault(); // 操作対象のフォーム要素を取得 var $form = $(this); // 送信ボタンを取得 // (後で使う: 二重送信を防止する。) var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', // (デモ用に入力値をちょいと操作します) timeout: 10000, // 単位はミリ秒 // 送信前 beforeSend: function(xhr, settings) { // ボタンを無効化し、二重送信を防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタンを有効化し、再送信を許可 $button.attr('disabled', false); }, // 通信成功時の処理 success: function(result, textStatus, xhr) { // 入力値を初期化 $form[0].reset(); $('#result').text('OK'); }, // 通信失敗時の処理 error: function(xhr, textStatus, error) {} }); }); // デモ用に入力値を設定 var $form = $('#the-form'); $form.find('[name=name]').val('名無しさん'); $form.find('[name=mail]').val('[email protected]'); $form.find('[name=sex][value=male]').prop('checked', true); $form.find('[name=message]').val('こんにちはこんにちは!'); });
<form id="the-form" action="/echo/json" method="POST"> <input type="text" name="name" value="" placeholder="Name" /><br /> <input type="email" name="mail" value="" placeholder="Mail" /><br /> <label><input type="radio" name="sex" value="male" />男性</label> <label><input type="radio" name="sex" value="female" />女性</label><br /> <textarea name="message" placeholder="Messages"></textarea><br /> <button>送信!</button> </form> <div id="result"></div>