HTML 表單：將數據發送到 javascript 函數

Question

我有一個 html 頁面。 它有多種形式。

我想要一個通用函數，在提交任何表單后，它將獲取該表單的所有輸入並將其作為 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) 為什么我提交時我的控制台沒有記錄這個？ 當我使用 chrome 進行測試時，發送提交和 b) 后控制台為空，如何從 sendForm() 內部訪問表單的輸入？ 我是否需要直接引用該表單，還是有一種方法可以在我調用它時將數據傳遞給 sendForm()？

Answer 1

跟進 Michael 所說的並使用一點 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>

Answer 2

你可以試試這個腳本：

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

我們將提交事件附加到您頁面的每個表單並捕獲數據。 如果您的站點上有很多表單，請嘗試將事件附加到捕獲正確表單的body （事件傳播）：

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

HTML 表單：將數據發送到 javascript 函數

問題描述

2 個解決方案

解決方案1
1 已采納 2017-02-03 21:24:51

解決方案2
0 2017-02-03 21:01:51

HTML 表單：將數據發送到 javascript 函數

問題描述

2 個解決方案

解決方案1 1 已采納 2017-02-03 21:24:51

解決方案2 0 2017-02-03 21:01:51

解決方案1
1 已采納 2017-02-03 21:24:51

解決方案2
0 2017-02-03 21:01:51