如何在JavaScript中使用文本框值保存每個問題的復選框值？-有解無憂

我正在創建一個 HTML 問卷并從 API 呼叫中獲取所有資料。我已將資料設定為陣列并顯示它們。現在我需要將問卷資料保存到資料庫中。我對復選框答案有疑問。每個問題都有一個復選框，其值稱為“其他”。如果用戶單擊該復選框，它將顯示一個文本框。我需要將這些復選框的答案添加到物件陣列中。像下面，

{QType: 'Questionnaire', QuesID: '1', OpId: '1', option: '1'}
{QType: 'Questionnaire', QuesID: '1', OpId: '2', option: '2'}
{QType: 'Questionnaire', QuesID: '2', OpId: '6', option: '6'}
{QType: 'Questionnaire', QuesID: '2', OpId: '7', option: '7'}

而且如果用戶選中另一個選項，文本框值也會與 idsquestion 連接。

{QType: 'Questionnaire', QuesID: '2', OpId: '8 'this is textbox value' ', option: '8'}

這是我嘗試過的；

let Questions = [
    { idsquestion: "1", questionname: "Where do you use internet?" },
    { idsquestion: "2", questionname: "What type of credit card do you have?" },
];
let Ans = [
    { idqoption: "1", idsquestion: "1", qoption: "Home" },
    { idqoption: "2", idsquestion: "1", qoption: "School" },
    { idqoption: "3", idsquestion: "1", qoption: "Office" },
    { idqoption: "4", idsquestion: "1", qoption: "Other" },
    { idqoption: "5", idsquestion: "2", qoption: "VISA" },
    { idqoption: "6", idsquestion: "2", qoption: "Mastercard" },
    { idqoption: "7", idsquestion: "2", qoption: "American Express" },
    { idqoption: "8", idsquestion: "2", qoption: "Other" },
];

function getData() {
    const parent = document.getElementById("questions-container");
    const frag = document.createDocumentFragment();

    for (const questionObj of Questions) {
        const container = document.createElement("div");
        container.className = "question-list";

        const questionElm = document.createElement("p");
        questionElm.textContent = questionObj.questionname;
        questionElm.className = "question-p";

        container.append(questionElm);

        const ansElm = document.createElement("div");
        ansElm.className = "answer-container";
        ansElm.id = questionObj.idsquestion;

        for (const ansObj of Ans) {
            if (questionObj.idsquestion == ansObj.idsquestion) {
                const checkBoxElm = document.createElement("input");
                checkBoxElm.setAttribute("type", "checkbox");
                checkBoxElm.id = ansObj.idquestionoption;
                checkBoxElm.name = ansObj.idsquestion;
                checkBoxElm.className = "check-box-class";
                checkBoxElm.value = ansObj.qoption;
                checkBoxElm.onclick = () => ansQuestions(checkBoxElm);

                const lblCheckBox = document.createElement("label");
                lblCheckBox.textContent = ansObj.qoption;
                lblCheckBox.className = "lbl-class";
                lblCheckBox.htmlFor = ansObj.idquestionoption;
                lblCheckBox.id = "lbl_"   ansObj.idquestionoption;

                ansElm.append(checkBoxElm, lblCheckBox);

                if (ansObj.qoption == "Other") {
                    const txtBoxElm = document.createElement("input");
                    txtBoxElm.setAttribute("type", "text");
                    txtBoxElm.setAttribute("name", "txt_"   ansObj.idsquestion);
                    txtBoxElm.setAttribute("id", "txt_"   ansObj.idsquestion);
                    txtBoxElm.setAttribute("style", "display:none");
                    ansElm.append(txtBoxElm);
                }
                container.append(ansElm);
            }
        }
        frag.append(container);
    }
    parent.append(frag);
}

function ansQuestions(ansObj) {
    var chkBoxVal = $(ansObj).attr("id");
    var chkBoxVal2 = $(ansObj).attr("value");
    var chkBoxVal3 = $(ansObj).attr("name");
    console.log(chkBoxVal3);

    if (chkBoxVal2 == "Other") {
        var text = document.getElementById("txt_"   chkBoxVal3);
        text.style.display = "block";
        console.log(text);
    } else {
        text.style.display = "none";
    }
}
function saveData() {
    var QType = "Questionnaire";
    var Qobj = { QType: QType, QuesID: QuesID, OpId: OpId, option: option };
}

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <title></title>
    </head>
    <body onload="javascript:getData()">
        <div id="Review2">
            <div data-role="content">
                <div id="questions-container"></div>
                <div id="button-container">
                    <button onclick="saveData()">Submit</button>
                </div>
            </div>
        </div>
    </body>
</html>

uj5u.com熱心網友回復：

移出 var text = document.getElementById("txt_" chkBoxVal3);if
回圈并找到距離其他最近的文本
您的標簽定義不正確。將復選框包裝在標簽中更簡單
使用事件偵聽器和委托

let Questions = [
    { idsquestion: "1", questionname: "Where do you use internet?" },
    { idsquestion: "2", questionname: "What type of credit card do you have?" },
];
let Ans = [
    { idqoption: "1", idsquestion: "1", qoption: "Home" },
    { idqoption: "2", idsquestion: "1", qoption: "School" },
    { idqoption: "3", idsquestion: "1", qoption: "Office" },
    { idqoption: "4", idsquestion: "1", qoption: "Other" },
    { idqoption: "5", idsquestion: "2", qoption: "VISA" },
    { idqoption: "6", idsquestion: "2", qoption: "Mastercard" },
    { idqoption: "7", idsquestion: "2", qoption: "American Express" },
    { idqoption: "8", idsquestion: "2", qoption: "Other" },
];

function getData() {
  const parent = document.getElementById("questions-container");
  const frag = document.createDocumentFragment();

  for (const questionObj of Questions) {
    const container = document.createElement("div");
    container.className = "question-list";

    const questionElm = document.createElement("p");
    questionElm.textContent = questionObj.questionname;
    questionElm.className = "question-p";

    container.append(questionElm);

    const ansElm = document.createElement("div");
    ansElm.className = "answer-container";
    ansElm.id = questionObj.idsquestion;

    for (const ansObj of Ans) {
      if (questionObj.idsquestion == ansObj.idsquestion) {
        const checkBoxElm = document.createElement("input");
        checkBoxElm.setAttribute("type", "checkbox");
        checkBoxElm.name = ansObj.idsquestion;
        checkBoxElm.className = "check-box-class";
        checkBoxElm.value = ansObj.qoption;

        const lblCheckBox = document.createElement("label");
        lblCheckBox.textContent = ansObj.qoption;
        lblCheckBox.className = "lbl-class";
        lblCheckBox.append(checkBoxElm)
        ansElm.append(lblCheckBox);

        if (ansObj.qoption == "Other") {
          const txtBoxElm = document.createElement("input");
          txtBoxElm.setAttribute("type", "text");
          txtBoxElm.setAttribute("name", "txt_"   ansObj.idsquestion);
          txtBoxElm.setAttribute("id", "txt_"   ansObj.idsquestion);
          txtBoxElm.hidden=true;
          ansElm.append(txtBoxElm);
        }
        container.append(ansElm);
      }
    }
    frag.append(container);
  }
  parent.append(frag);
}

document.getElementById('questions-container').addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.type === "checkbox") {
    const chkBoxVal = tgt.value;
    const chkBoxName = tgt.name;
    const text = document.getElementById("txt_"   chkBoxName);
    text.hidden = !tgt.checked || chkBoxVal !== "Other";
  }  
})

document.getElementById("subbut").addEventListener("click",function() {
  const answers = [...document.querySelectorAll('[type=checkbox]:checked')].map(chk => {
    let val = chk.value;
    const div = chk.closest("div");
    const id = div.id;
    if (val === "Other") {
      val = div.querySelector("[type=text]").value
    }
    return {
      id: id, name: val
    }
  })
  console.log(answers)
})

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body onload="javascript:getData()">
  <div id="Review2">
    <div data-role="content">
      <div id="questions-container"></div>
      <div id="button-container">
        <button type="button" id="subbut">Submit</button>
      </div>
    </div>
  </div>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/396446.html

標籤：javascript html 查询

上一篇：jQuery資料屬性選擇器在單擊時不起作用

下一篇：Adyen-checkout.create不是一個函式-JqueryC#