Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptでページをリロードするためのフォームの作成を停止します

達成する必要があるのは、ユーザーがこのHTMLフォームを送信するときに、クライアント側で送信イベントを処理し、フォームが送信されるとすぐにブラウザが再読み込みされないようにすることです。

HTMLフォーム 

<form name="formcontact1" action="#">
<input
type='text'
name='email'
size="36"
placeholder="Your e-mail :)"/>
<input
   type="submit"
   name="submit"
   value="SUBMIT"
   onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>

さて、これを行う最も簡単で信頼できる方法は、ValidateEmail（）関数を微調整して、その定義の一番上に次の行を含めることです-

function ValidateEmail(event, inputText){
   event.preventDefault();
   //remaining function logic goes here
}

PreventDefault（）が行うことは、ブラウザにデフォルトの動作を防止し、クライアント側でフォーム送信イベントを処理できるようにすることです。

このための完全なHTMLコードは-

です。

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="formcontact1" action="#">
<input
type='text'
name='email'
size="36"
placeholder="Your e-mail :)"/>
<input
   type="submit"
   name="submit"
   value="SUBMIT"
   onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>
<script>
{
   function ValidateEmail(event, inputText){
      event.preventDefault();
      //remaining function logic goes here
   }
}
</script>
</body>
</html>

  1. フォーム送信用のJavaScript作成送信ボタンと入力をクリアするための別のボタン

    以下のコードのように、input type =” submit”を使用してフォームを送信し、別のinput type =” button”を使用して入力onclickをクリアします- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale= 1.0">

  2. JavaScriptでフォーム送信の入力値を変更しますか？

    入力の値を変更するには、ドキュメントの概念を使用します。構文は次のとおりです- document.yourFormName.yourTextName.value=anyValue; 次は、[フォームの送信]をクリックしたときにsubmitForm（）を呼び出す入力タイプであるとしましょう- <form name="studentForm" onsubmit="submitForm();">    <input type="hidden" name="txtInput" val