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>

我的问题是：1）为什么我的控制台无法登录这个当我提交？当我使用chrome测试时，在发送提交和b）后，控制台是空的，我如何从sendForm（）内部访问表单的输入？我是否需要直接引用该表单，或者有什么方法可以在我调用它时将数据传递给sendForm（）？

来源

2017-02-03 Daniel Paczuski Bak

您需要停止窗体实际提交，因为当它提交时，它将刷新页面并清除控制台。选择保留控制台日志页面刷新或将'return false;'添加到'sendForm（）'。 –

@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>

我们附上提交事件到你的页面的每个表单和捕获数据。如果你将有很多的形式在您的网站，尝试将抓住正确的事件给body（事件传播）：

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

来源

2017-02-03 21:01:51 nikoskip

HTML表单：发送数据到javascript函数

回答

相关问题