How to prevent changes for radio button input for duplicated row-CodePudding

I'm a beginner in JavaScript. I have a table row which consist of text input, radio buttons and button to add or delete the row. When I click the add button, it will duplicate the row exactly like the current one. However, when I click any of the radio button in second row (the duplicated row), my choice from the first row is changed/cleared. How can I solved this? And how can I save and export this HTML form to excel?

I have tried all methods that I can find and even watched YouTube videos. Any suggestion to improve my code are welcome. Thank you.

function addRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  var tr = document.getElementById('Table').insertRow(i   1);
  tr.innerHTML = row.parentNode.parentNode.innerHTML;

  var inputs = tr.querySelectorAll("input[type='text']");
  for (var i = 0; i < inputs.length; i  )
    inputs[i].value = "";
}

function delRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  var tr = document.getElementById('Table').deleteRow(i - 1);
  tr.innerHTML = row.parentNode.parentNode.innerHTML;

  var inputs = tr.querySelectorAll("input[type='text']");
  for (var i = 0; i < inputs.length; i--)
    inputs[i].value = "";
}

<div style="overflow-x:auto;">
  <table id="Table" style="width: 100%">
    <tr>
      <td><input type="text" name="questions" size="80" id="questions" placeholder="Questions" required/><br><br>
        <input type="radio" name="smiley" value="rd1">&#128542 I don't like it at all.<br>
        <input type="radio" name="smiley" value="rd2">&#128533 I maybe like it.<br>
        <input type="radio" name="smiley" value="rd3">&#128578 I like it.<br>
        <input type="radio" name="smiley" value="rd4">&#128516 I like it very much.<br><br>
        <input type="button" id="addBtn" value="Add Questions" onclick="addRow(this)" value="1" />
        <input type="button" id="delBtn" value="Delete Questions" onclick="delRow(this)" value="1" />
      </td>
    </tr>
  </table>
</div>

CodePudding user response：

You can see how to download csv from html table here

As for your code, you need to change the name of the input for the new row.

function addRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  var tr = document.getElementById('Table').insertRow(i   1);
  tr.innerHTML = row.parentNode.parentNode.innerHTML.replace(/smiley/g, "smiley"   i);

  var inputs = tr.querySelectorAll("input[type='text']");
  for (var i = 0; i < inputs.length; i  )
    inputs[i].value = "";
}

function delRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  var tr = document.getElementById('Table').deleteRow(i - 1);
  tr.innerHTML = row.parentNode.parentNode.innerHTML;

  var inputs = tr.querySelectorAll("input[type='text']");
  for (var i = 0; i < inputs.length; i--)
    inputs[i].value = "";
}

<div style="overflow-x:auto;">
  <table id="Table" style="width: 100%">
    <tr>
      <td><input type="text" name="questions" size="80" id="questions" placeholder="Questions" required/><br><br>
        <label><input type="radio" name="smiley" value="rd1">&#128542 I don't like it at all.</label><br>
        <label><input type="radio" name="smiley" value="rd2">&#128533 I maybe like it.</label><br>
        <label><input type="radio" name="smiley" value="rd3">&#128578 I like it.</label><br>
        <label><input type="radio" name="smiley" value="rd4">&#128516 I like it very much.<br></label><br>
        <input type="button" id="addBtn" value="Add Questions" onclick="addRow(this)" value="1" />
        <input type="button" id="delBtn" value="Delete Questions" onclick="delRow(this)" value="1" />
      </td>
    </tr>
  </table>
</div>

CodePudding user response：

Different radio button groups need different names. I tweaked your JS to add a unique timestamp to the radio button name when adding a new row.

function addRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  var tr = document.getElementById('Table').insertRow(i   1);
  tr.innerHTML = row.parentNode.parentNode.innerHTML;

  var inputs = tr.querySelectorAll("input[type='text']");
  for (var i = 0; i < inputs.length; i  )
    inputs[i].value = "";
    
  const unique= Date.now();
  const radios = tr.querySelectorAll("input[type='radio']");
  for (var i = 0; i < radios.length; i  )
    radios[i].name = `${radios[i].name}${unique}`;
}

function delRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  var tr = document.getElementById('Table').deleteRow(i);
}

<div style="overflow-x:auto;">
  <table id="Table" style="width: 100%">
    <tr>
      <td><input type="text" name="questions" size="80" id="questions" placeholder="Questions" required/><br><br>
        <input type="radio" name="smiley" value="rd1">&#128542 I don't like it at all.<br>
        <input type="radio" name="smiley" value="rd2">&#128533 I maybe like it.<br>
        <input type="radio" name="smiley" value="rd3">&#128578 I like it.<br>
        <input type="radio" name="smiley" value="rd4">&#128516 I like it very much.<br><br>
        <input type="button" id="addBtn" value="Add Questions" onclick="addRow(this)" value="1" />
        <input type="button" id="delBtn" value="Delete Questions" onclick="delRow(this)" value="1" />
      </td>
    </tr>
  </table>
</div>

CodePudding user response：

I would delegate and clone

NOTE I changed the id to a class for the buttons and added a tbody

You must have unique IDs

I renumber all the radios from 1 to n even when you delete a row in the middle

I also hide the first delete using CSS

const tb = document.getElementById("Table");
const firstRow = tb.querySelector("tr")
tb.addEventListener("click", e => {
  const tgt = e.target;
  if (!tgt.type === "button") return; // not a button
  if (tgt.matches(".addBtn")) tb.append(firstRow.cloneNode(true)); // clone the first row
  else if (tgt.matches(".delBtn")) tgt.closest("tr").remove();
  // rename radios
  tb.querySelectorAll("tr").forEach((tr,i) => {
    tr.querySelectorAll("input[type=radio]").forEach(rad => rad.name = `question${i 1}`)
  })
})

#Table tr:first-child .delBtn { display: none; }

<div style="overflow-x:auto;">
  <table style="width: 100%">
    <tbody id="Table">
      <tr>
        <td><input type="text" name="questions" size="80" placeholder="Questions" required/><br><br>
          <input type="radio" name="question1" value="rd1">&#128542 I don't like it at all.<br>
          <input type="radio" name="question1" value="rd2">&#128533 I maybe like it.<br>
          <input type="radio" name="question1" value="rd3">&#128578 I like it.<br>
          <input type="radio" name="question1" value="rd4">&#128516 I like it very much.<br><br>
          <input type="button"  value="Add Questions" value="1" />
          <input type="button"  value="Delete Questions" value="1" />
        </td>
      </tr>
    </tbody>
  </table>
</div>