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

继续迈克尔所说的并使用一点点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 个答案: