单击时将 DIV 的值发送到 SQL table

Question

我在检索分配给我的 DIV 的值时遇到一些问题。 DIV 包含调查的答案。（我无法使用其他输入，例如 select、单选按钮）

表格如下：

<form id='Form01' action=''>    
<div class="box" id='input01' onclick="submit_answer()" value='1'>YES</div>                                     
<div class="box" id='input02' onclick="submit_answer()" value='2'>NO</
</form>

下面是检索答案的函数：

function submit_answers(e) {
    OPTION1: var answer = $(#input01).attr('value'); // RETURNS "1" 
    OPTION2: var answer= $(this).attr('value');  // **RETURNS "Undefined"**
    console.log(answer) ;   
    $.post('input_answers.php',{value:answer});
}

如果受访者点击 "YES" 我想插入 '1'，对于 "NO" 我想插入 '2' 但是 var value01 = $(this).attr('value'); returns '未定义。

感谢您的帮助。

Answer 1

您的代码有两处错误：

您没有访问触发点击的 HTML 元素。
值是输入元素的属性（div 不是）。

要正确修复您的 JS（并继续使用 jQuery），请尝试以下操作：

function submit_answers(e) {
    var value01 = $(this).attr('value');
    $.post('input_answers.php',{value:value01});
}

我注意到您的代码的其他问题：

有多个 HTML 具有相同的 HTML id。 "id" 应该是唯一标识符（如果您将其用于设置样式或附加 JavaScript 事件，请考虑使用 class 属性）
换一种输入方式会更好。考虑使用单选按钮或 select，因为这样更容易访问
大多数 Web 开发人员不赞成使用 onclick HTML 属性 - 考虑通过 JavaScript 附加事件（例如使用 jQuery 的 .on 或 vannila JS 的 element.addEventListner())

编辑：更新问题后 自从我最初的回答以来 JavaScript 和 HTML 已经发生了很大的变化。进一步的问题是：

onclick属性中指定的函数和JS部分写的函数不匹配
在选项 1 中定义答案时，#input01 周围需要引号（无论如何这是不正确的，因为它总是 select 第一个 div）
select或者可能需要e.target。

在（大量）编辑中修复的问题：

ID 重复
值不是 non-input 元素的 JavaScript 属性

Answer 2

像这样尝试

$("#input01,#input02").click(function(){
     var answer=  $(this).attr('value'); 

    console.log(answer) ;   
    $.post('input_answers.php',{value:answer});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='Form01' action=''>    
<div class="box" id='input01'  value='1'>YES</div>                                     
<div class="box" id='input02' value='2'>NO</div>
</form>

单击时将 DIV 的值发送到 SQL table

Sending the value of a DIV into an SQL table when clicked

php

sql

survey