如何使用 JS 禁用表行并在 MYSQL 中插入所选选项？答案

【问题标题】：How to disabled table row using JS and insert the chosen option in MYSQL?如何使用 JS 禁用表行并在 MYSQL 中插入所选选项？
【发布时间】：2016-09-14 07:54:14
【问题描述】：

我有一个动态显示表格行的 PHP sn-p。每一行我都有一个带有“是”和“否”选项的单选按钮。

我创建了一个JS函数，当用户选择一个选项时，会显示一个弹出框。

如果用户在单选按钮中选择“是”选项并在弹出框中单击“确定”，则表格行将被禁用，即使单选按钮也将被禁用。并且选择的选项将保存在 MYSQL 中。

如何在 MySQL 中保存选择的选项？

我的禁用一行的 JS sn-p 不起作用。如何解决这个问题？

PHP：

echo '<td id="resumeFile"><a href="' . $dir  . $file . '">Download Resume</a></td>';
        echo '<td id="radioOption">
                  <label for="Yes">Yes</label>
                    <input type="radio" id="processedOptionYes" name="processedOption" value="Yes" onclick="proccessedCheck()"/>
                  <label for="No">No</label>
                    <input type="radio" id="processedOptionNo" name="processedOption" value="No" onclick="proccessedCheck()"/></td>';

JS：

function proccessedCheck(){
    var checked = null;
    var inputs = document.getElementsByName('processedOption');
        for (var i = 0; i < inputs.length; i++){
            if (inputs[i].checked) {
            checked = inputs[i];
            break;
            }
        }

    if(checked == null){
        return false;
    } else if (checked == true){
            document.getElementById("resumeFile").disabled = true;
            document.getElementById("radioOption").disabled = true;
            document.getElementById("resumeFile").title = "This option has been disabled.";
    } else {
        return confirm('You have chosen '+ checked.value + ', is this correct?');
    }
}

【问题讨论】：

我认为您需要禁用表格行中的表单元素。
什么意思？如果用户单击该行中的“是”按钮，我需要禁用表格行
我假设您希望禁用表格行中的单选按钮。对吗？
是的，该表行中的所有数据

标签： javascript php html mysql radio-button

【解决方案1】：

好的，如果你从 PHP 中回显整个表格，只需将参数预设到表格中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script> 
<script>
function proccessedCheck(id,answer) {
    if (confirm('You have chosen '+ id +': '+ answer + ', is this correct?')) {
        $("#processedOptionYes"+id).attr('disabled',true);
        $("#processedOptionNo"+id).attr('disabled',true);
        var withlink = $("#resumeFile"+id).html();
        var withoutlink = $(withlink).html();
        $("#resumeFile"+id).html("").append(withoutlink);
        $("#input1".val(id);
        $("#input2".val(answer);
        $("#myform").submit();

    }     
}
</script>

<!-- EDIT: hidden form to submit -->

<form id="myform" method="POST" action="savedb.php">
  <input type="hidden" id="input1" name="id" />
<input type="hidden" id="input2" name="answer" />
</form>


<table>
  <tr>
    <?php
$dir="";
$file="";
$id = 0;
//foreach($array as $row) {
    $id++;
    echo '<td id="resumeFile'.$id.'"><a href="' . $dir  . $file . '">Download Resume</a></td>';
        echo '<td id="radioOption>
                  <label for="Yes">Yes</label>
                    <input type="radio" id="processedOptionYes'.$id.'" name="processedOption" value="Yes" onclick="proccessedCheck('.$id.',\'Yes\')"/>
                  <label for="No">No</label>
                    <input type="radio" id="processedOptionNo'.$id.'" name="processedOption" value="No" onclick="proccessedCheck('.$id.',\'No\')"/></td>';
//}
                    ?>
  </tr>
</table>
</body>
</html>

savedb.php 的内容，不必是单独的文件

<?php

// Check if my post array arrived, comment this line when u done
echo "<pre>";print_r($_REQUEST);echo "</pre>"; die();

// Connect to DB
// Build SQL insert string with $_REQUEST['id'] as the primary key


?>

【讨论】：

我只想使用原生js
继续使用本机代码，但我发布的解决方案有效。
但是如何在mysql中插入radio选项的值？
弹出/确认框不返回任何数据，您通过单选按钮 onclick="proccessedCheck('.$id.',\ 'Yes\') 然后，您可以获取 id 并引用一个包含 PH P 中所有数据的数组，以通过表单提交获取所选信息。我将更新代码以执行此操作
您的表中可能有重复的 id，这就是它中断的原因，也是我添加 '.$id.' 的原因。在每个 id 名称之后，您必须在回显下一行之前增加 $id，以便它们是唯一的

【解决方案2】：

对于初学者，请尝试替换：

        document.getElementById("resumeFile").disabled = true;
        document.getElementById("radioOption").disabled = true;

与：

        document.getElementById("processedOptionYes").disabled = true;
        document.getElementById("processedOptionNo").disabled = true;

【讨论】：

我正在尝试 JSFiddle 中的代码，但似乎无法正确调用该函数。您能否通过在函数顶部粘贴警告语句来确认该函数是否被正确调用？
它被正确调用了。当用户单击“是”或“否”选项时会有一条警告消息