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

我想插入＆＃39; 1＆＃39;如果被访者点击了＆＃34;是＆＃34;，＆＃39; 2＆＃39;为＆＃34; NO＆＃34;但 var value01 = $(this).attr('value');返回＆＃39; UNDEFINED。

感谢您的帮助。

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属性）
另一种输入会更好。考虑使用单选按钮或选择，因为这样可以更容易访问
大多数Web开发人员不赞成使用onclick HTML属性 - 考虑通过JavaScript附加事件（例如使用jQuery的.on或vannila JS的element.addEventListner（））

编辑：更新后的问题 由于我的初步答案，JavaScript和HTML已经发生了很大变化。进一步的问题是：

onclick属性中指定的函数与JS部分中编写的函数不匹配。
在选项1中定义答案时，＃input01周围需要引号（这是不正确的，因为它始终会选择第一个div）
选择器可能需要e.target。

（实质性）编辑中修复的问题：

重复ID
值不是非输入元素的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表

2 个答案: