どこかに送信ボタンがあるフォームがあります。
しかし、私はどういうわけか送信イベントを「キャッチ」してそれが起こらないようにしたいと思います。
私はこれを行うことができるいくつかの方法はありますか?
送信ボタンはカスタムコントロールの一部なので変更できません。
他の回答とは異なり、return false
は回答の部分のみです。 returnステートメントの前にJSエラーが発生するシナリオを考えてください。
html
<form onsubmit="return mySubmitFunction(event)">
...
</form>
スクリプト
function mySubmitFunction()
{
someBug()
return false;
}
ここでfalse
を返しても実行されず、フォームはどちらの方法でも送信されます。また、Ajaxフォーム送信に対するデフォルトのフォームアクションを防ぐためにpreventDefault
を呼び出す必要があります。
function mySubmitFunction(e) {
e.preventDefault();
someBug();
return false;
}
この場合、バグがあってもフォームは送信されません。
あるいは、try...catch
ブロックを使用することもできます。
function mySubmit(e) {
e.preventDefault();
try {
someBug();
} catch (e) {
throw new Error(e.message);
}
return false;
}
このようにインラインイベントonsubmit
を使うことができます。
<form onsubmit="alert('stop submit'); return false;" >
または
<script>
function toSubmit(){
alert('I will not submit');
return false;
}
</script>
<form onsubmit="return toSubmit();" >
今、これは大きなプロジェクトを作るときには良い考えではないかもしれません。イベントリスナを使う必要があるかもしれません。
をお読みください インラインイベントとイベントリスナー(addEventListenerおよびIEのattachEvent) here 。 Chris Baker 以上には説明できません。
どちらも正しいですが、どれもそれ自体が「最良」ではないため、開発者が両方のアプローチを使用することを選択した理由があるかもしれません。
.addEventListener()
を使用してフォームにイベントリスナーを添付してから、 .preventDefault()
を呼び出します。 event
のメソッド:
const element = document.querySelector('form');
element.addEventListener('submit', event => {
event.preventDefault();
// actual logic, e.g. validate the form
console.log('Form submission cancelled.');
});
<form>
<button type="submit">Submit</button>
</form>
Webページのロジックと構造が分離されているので、submit
イベントハンドラをonsubmit
属性を使用してインラインで定義するよりも良い方法だと思います。ロジックがHTMLから分離されているプロジェクトを維持することははるかに簡単です。 目立たないJavaScript を参照してください。
form
DOMオブジェクトの.onsubmit
プロパティを使用することは、複数の送信コールバックを1つの要素に結び付けることを妨げるため、お勧めできません。 addEventListenerとonclick を参照してください。
これを試してください...
HTMLコード
<form class="submit">
<input type="text" name="text1"/>
<input type="text" name="text2"/>
<input type="submit" name="Submit" value="submit"/>
</form>
jQueryコード
$(function(){
$('.submit').on('submit', function(event){
event.preventDefault();
alert("Form Submission stopped.");
});
});
または
$(function(){
$('.submit').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
alert("Form Submission prevented / stopped.");
});
});
以下は現時点で動作します(クロムとFirefoxでテスト済み)。
<form onsubmit="event.preventDefault(); return validateMyForm();">
validateMyForm()は検証が失敗した場合にfalse
を返す関数です。重要な点は、名前event
を使用することです。例えばには使えませんe.preventDefault()
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
return false;
}
フォームが送信されないようにするには、これを実行するだけです。
<form onsubmit="event.preventDefault()">
.....
</form>
上記のコードを使用することによって、これはあなたのフォーム送信を防ぎます。
ここで私の答え:
<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
e.preventDefault();
const name = e.target.name.value;
renderSearching();
return false;
}
</script>
onsubmit
にevent.preventDefault();
を追加すると動作します。
EventListnerをフォームに追加し、そのpreventDefault()
と以下のようにフォームデータをJSONに変換できます。
const formToJSON = elements => [].reduce.call(elements, (data, element) => {
data[element.name] = element.value;
return data;
}, {});
const handleFormSubmit = event => {
event.preventDefault();
const data = formToJSON(form.elements);
console.log(data);
// const odata = JSON.stringify(data, null, " ");
const jdata = JSON.stringify(data);
console.log(jdata);
(async () => {
const rawResponse = await fetch('/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: jdata
});
const content = await rawResponse.json();
console.log(content);
})();
};
const form = document.forms['myForm'];
form.addEventListener('submit', handleFormSubmit);
<form id="myForm" action="/" method="post" accept-charset="utf-8">
<label>Checkbox:
<input type="checkbox" name="checkbox" value="on">
</label><br /><br />
<label>Number:
<input name="number" type="number" value="123" />
</label><br /><br />
<label>Password:
<input name="password" type="password" />
</label>
<br /><br />
<label for="radio">Type:
<label for="a">A
<input type="radio" name="radio" id="a" value="a" />
</label>
<label for="b">B
<input type="radio" name="radio" id="b" value="b" checked />
</label>
<label for="c">C
<input type="radio" name="radio" id="c" value="c" />
</label>
</label>
<br /><br />
<label>Textarea:
<textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
</label>
<br /><br />
<label>Select:
<select name="select">
<option value="a">Value A</option>
<option value="b" selected>Value B</option>
<option value="c">Value C</option>
</select>
</label>
<br /><br />
<label>Submit:
<input type="submit" value="Login">
</label>
<br /><br />
</form>
控えめなJavaScript プログラミング規則に従うこと、および DOM がロードされる速度に応じて、以下を使用することをお勧めします。
<form onsubmit="return false;"></form>
ライブラリを使用している場合は、onloadまたはDOM readyを使用してイベントを関連付けます。
$(function() {
var $form = $('#my-form');
$form.removeAttr('onsubmit');
$form.submit(function(ev) {
// quick validation example...
$form.children('input[type="text"]').each(function(){
if($(this).val().length == 0) {
alert('You are missing a field');
ev.preventDefault();
}
});
});
});
label {
display: block;
}
#my-form > input[type="text"] {
background: cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
<label>Your first name</label>
<input type="text" name="first-name"/>
<label>Your last name</label>
<input type="text" name="last-name" /> <br />
<input type="submit" />
</form>
また、 NoScript runningのようなプラグインを持っている人もいるので、私は常にaction
属性を使用します。この場合、検証が無効になります。 action属性を使用している場合は、少なくともバックエンド検証に基づいてユーザーがサーバーからリダイレクトされます。あなたがwindow.location
のような何かを使っているなら、その一方で、物事は悪いでしょう。