javascript - HTML 表单 : send data to javascript function

标签 javascript php html

我有一个 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() ?

最佳答案

按照 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>

关于javascript - HTML 表单 : send data to javascript function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42031950/

相关文章:

javascript - 使用sequelize,尝试创建像Rails一样的关联函数,在其中将模型作为函数调用并返回关联

javascript - 当鼠标悬停在 HTML 表格中的 TD 上时,有没有办法获取 TH 的值?

php - 发送联系表格 7 中的所有下拉列表

javascript - 为什么我的 Angular JS 应用程序无法运行?

html - 使视频成为全屏大小的 CSS

javascript输入掩码货币

javascript - Angular - ngRepeat Order before Filter(分页+排序)

php - 确定用户是在 php 聊天应用程序中登录还是注销

php - 我尝试以这种方式将数据更新到数据库中,但对于第一个 if 语句 if ( !empty($_POST) ) 可能不起作用

javascript - 将父单元格 ID 存储在列表中