HTMLフォーム：データをjavascript関数に送信

私はhtmlページを持っています。それは多くの形式を持っています。HTMLフォーム：データをjavascript関数に送信

フォームを送信した後にそのフォームの入力をすべて受け取り、それを別のサーバーにJSONとして送信する汎用関数が必要です。

私が理解から、私が欲しいのは以下の通りです：

<form enctype="application/json" name="createStudentForm" onsubmit="sendForm()"> 
    Student ID (must be 3 digit number): 
    <input type="text" name="student_id"><br> 
    Nickname: 
    <input type="text" name="student_nickname"><br> 
    <input type="submit"> 
</form>

以降：

<script> 
    function sendForm(){ 
     console.log('sent form'); 
    } 
</script>

は、私の質問は：私が提出したときa）は、なぜ私のコンソールはこれをログに記録しないのですか？クロムを使用してテストすると、とb）を送信した後にコンソールが空になります。sendForm（）の内部からフォームの入力にアクセスするにはどうすればよいですか？そのフォームを直接参照する必要があるのですか？それを呼び出すときにsendForm（）にデータを渡す方法がありますか？

出典

2017-02-03 Daniel Paczuski Bak

送信すると、ページを更新してコンソールをクリアするため、実際に送信しないようにフォームを停止する必要があります。ページの更新時にコンソールログを保存するか、 'sendForm（）'に 'return false;'を追加するかを選択します。 –

@GeorgeJempty - 'console.log'の実装が非同期であると聞いたことがあります。それにかかわらず、私はここでは関係ありません。 –

できる場合は、jQueryを使用します。 'https：// api.jquery.com/serializeArray /' –

は、マイケルが言ったことにフォローアップとの少しを使用してjqueryあなたは非常に簡単にこの作業を行うことができます。

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
    function sendForm(form){ 
    console.log('sent form: ' + $(form).serialize()); 
    return false; 
    } 
</script> 
<body> 
<form enctype="application/json" name="createStudentForm" onsubmit="return sendForm(this)"> 
    Student ID (must be 3 digit number): 
    <input type="text" name="student_id"><br> 
    Nickname: 
    <input type="text" name="student_nickname"><br> 
    <input type="submit"> 
</form> 
</body> 
</html>

出典

2017-02-03 21:24:51 mcallahan

このスクリプトを試すことができます。

$(function() { 
 
    var formHandler = function (e) { 
 
     e.preventDefault(); // Avoid form submit 
 
     var data = $(this).serializeArray(); 
 
     data = JSON.stringify(data); // To JSON 
 
     console.log(data); 
 
    }; 
 
    
 
    $('form').submit(formHandler); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Form 1 
 
<form> 
 
Field 1: <input name="field1"> 
 
Field 2: <input name="field2"> 
 
Field 3: <select name="field3"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
     </select> 
 
<input type="submit"> 
 
</form> 
 

 
<hr> 
 

 
Form 2 
 
<form> 
 
Field 1: <input name="field1"> 
 
Field 2: <input name="field2"> 
 
Field 3: <select name="field3"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
     </select> 
 
<input type="submit"> 
 
</form> 
 

 
<hr> 
 

 
Form 3 
 
<form> 
 
Field 1: <input name="field1"> 
 
Field 2: <input name="field2"> 
 
Field 3: <select name="field3"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
     </select> 
 
<input type="submit"> 
 
</form>

私たちはあなたのページの各フォームにイベントを提出し、データをキャプチャ取り付けます。あなたのサイト上のフォームの多くを持ってしようとしている場合は、右の1（イベント伝播を）引くbodyにイベントをアタッチしよう：

$('body').on('submit', 'form', formHandler);

出典

2017-02-03 21:01:51 nikoskip

HTMLフォーム：データをjavascript関数に送信

答えて

関連する問題