How to save checkbox value for each question with textbox value in JavaScript?-CodePudding

I am creating an HTML questionnaire and getting all data from API calls. I have set data into an array and displayed them. Now I need to save the questionnaire DATA to the database. I have questions with checkbox answers. There is a checkbox for every question that has a value called 'other'. If the user clicks on that checkbox it will display a textbox. I need to add these checkboxes answers to an object array. Like below,

{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'}

And also if the user checks the other option, the textbox value also concatenates with the idsquestion.

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

This is what I tried;

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 onl oad="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>

CodePudding user response：

Move var text = document.getElementById("txt_" chkBoxVal3); outside the if
Loop and find the nearest text to Other
Your labels are not defined correctly. Simpler to just wrap the checkboxes in the labels
Use eventlisteners and delegation

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 onl oad="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>