单击时将 DIV 的值发送到 SQL 表中

Question

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

下面是表格：

<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});
}

如果受访者点击“是”，我想插入“1”，“否”则插入“2”，但是 var value01 = $(this).attr('value'); 返回“未定义”。

感谢您的帮助。

Answer 1

这样试试

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

Answer 2

您的代码有两处错误：

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

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

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

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

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

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

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

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

• ID 重复
• 值不是非输入元素上的 JavaScript 属性