how to show the user input values in modal popup using javascript

Question

I have an HTML table. Assume that one of the rows of table has three different user inputs(text, checkboxes, and dropdown). My aim is to show the values selected in user inputs row along with other table rows in a bootstrap modal popup window. Sharing the code for reference. Please check and help. Attaching the output snaps for results what i am getting

function addTable() {
  var modalbody = document.querySelector('.modal-body');
  if (modalbody.childElementCount <= 1) {
    var tableDiv = document.getElementById("myTableBody");
    var table = document.createElement('TABLE');
    var oldtble = document.getElementById('table1');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    for (var i = 0; i < 4; i++) {
      var tr = document.createElement('TR');
      tr.style.border = 'solid 2px black';
      tr.style.padding = '5px';
      tableBody.appendChild(tr);
      for (var j = 0; j < 4; j++) {
        var td = document.createElement('TD');
        td.width = '100px';
        td.style.border = 'solid 2px black';
        td.style.padding = '5px';
        td.appendChild(document.createTextNode(oldtble.rows[i].cells[j].innerHTML));
        tr.appendChild(td);
      }
    }
  }
  tableDiv.appendChild(table);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
  <table class="table table-hover" id="table1">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry the Bird</td>
        <td>You are mine</td>
        <td>@twitter</td>
      </tr>

      <tr>
        <th scope="row">4</th>
        <td>
          <select name="myOptions" id="myOptions">
            <option value="">Select one from below</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
          </select>
        </td>
        <td>
          <input type="text" name="myText" id="myTextinput">
        </td>
        <td>
          <input type="checkbox" id="option1">Option 1<br>
          <input type="checkbox" id="option2">Option 2<br>
          <input type="checkbox" id="option3">Option 3<br>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="button1" onclick="addTable();">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="myTableBody">
          <h5 class="lead">Make some coding to display that table</h5>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="table_script.js"></script>

</html>

@mplungjan, most likely the OP wants to display the data selected in the table in a pop-up window — s.kuznetsov
– s.kuznetsov, Commented Mar 10, 2021 at 7:06

jgtokyo · Accepted Answer · 2021-03-10 07:05:25Z

1

You haven't said what your issue is, but if it is that it is not showing the last (user input) row in your modal, <4 will only do 4 rows (0,1,2,3), not the 5th row with your desired inputs. Try <=4 or <5.

answered Mar 10, 2021 at 7:05

jgtokyo

1886 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shanmuk Eswar Over a year ago

Yes the last row is not showing in yhe bootstrap modal... i even tried using jquery but it didnt showed up any... plse help

jgtokyo Over a year ago

like I said, your first problem is that you need to iterate over 5 rows to print #4, so change to "for (var i = 0; i < 5; i++)."

Nayem_43 · Accepted Answer · 2021-03-11 07:24:51Z

1

function addTable() {
  $('#myTableBody table').remove();
  var modalbody = document.querySelector('.modal-body');
  if (modalbody.childElementCount <= 1) {
    var tableDiv = document.getElementById("myTableBody");
    var table = document.createElement('TABLE');
    var oldtble = document.getElementById('table1');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
    for (var i = 0; i < 5; i++) {
      var tr = document.createElement('TR');
      tr.style.border = 'solid 2px black';
      tr.style.padding = '5px';
      tableBody.appendChild(tr);
      
      if(i == 4){
        for (var j = 0; j < 4; j++) {
          var val = "";
          var td = document.createElement('TD');
          td.width = '100px';
          td.style.border = 'solid 2px black';
          td.style.padding = '5px';
          
          if(j == 0){
            val = oldtble.rows[i].cells[j].innerHTML;
          }
          else if(j == 1){
            var gettd = oldtble.rows[i].cells[j];
            var finddom = $(gettd).find("#myOptions");
            val = $(finddom).attr("selected",  "selected").val();
          }
          else if(j == 2){
            var gettd = oldtble.rows[i].cells[j];
            var finddom = $(gettd).find("#myTextinput");
            val = $(finddom).val();
          }
          else if(j == 3){
            var gettd = oldtble.rows[i].cells[j];
            var finddom = $(gettd).find(".option1");
            $(finddom).each(function () {
              if($(this).is(':checked'))
              {
                val += $(this).attr('val');
              }
            });
          }
          
          td.appendChild(document.createTextNode(val));
          tr.appendChild(td);
        }
      }
      else{
        for (var j = 0; j < 4; j++) {
          var td = document.createElement('TD');
          td.width = '100px';
          td.style.border = 'solid 2px black';
          td.style.padding = '5px';
          td.appendChild(document.createTextNode( oldtble.rows[i].cells[j].innerHTML));
          tr.appendChild(td);
        }
      }
    }
  }
  tableDiv.appendChild(table);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
  <table class="table table-hover" id="table1">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry the Bird</td>
        <td>You are mine</td>
        <td>@twitter</td>
      </tr>

      <tr>
        <th scope="row">4</th>
        <td>
          <select name="myOptions" id="myOptions">
            <option value="">Select one from below</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
          </select>
        </td>
        <td>
          <input type="text" name="myText" id="myTextinput">
        </td>
        <td>
          <input type="checkbox" class="option1" val="Option 1">Option 1<br>
          <input type="checkbox" class="option1"  val="Option 2">Option 2<br>
          <input type="checkbox" class="option1"  val="Option 3">Option 3<br>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="button1" onclick="addTable();">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="myTableBody">
          <h5 class="lead">Make some coding to display that table</h5>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="table_script.js"></script>

</html>

Note: it may seem a bit messy cause as I use your hardcode loop length. But this may be the idea you looking for. I make some changes in the HTML checkboxes and in the javascript function.

edited Mar 11, 2021 at 7:24

answered Mar 10, 2021 at 10:06

Nayem_43

3162 silver badges7 bronze badges

12 Comments

Shanmuk Eswar Over a year ago

thank you so much, bro! This really helps me a lot and understood how for and if loops work typically in real case example in javascript. I wonder how my life would be if there is no website called StackOverflow.

Shanmuk Eswar Over a year ago

But @nayem_43 bro, for checkbox options, if I select one checkbox, I am able to see the checked value in the popup window. but if I select two, I am seeing only one in the modal popup. can u guide me on how to resolve this??

Nayem_43 Over a year ago

@Shanmuk Eswar bro, it's very simple. just modify the line "val = $(this).attr('val');" to this "val += $(this).attr('val');". Just put a plus symbol before equal sign. It will add other values to "val" if there is more than on checkbox selected.

Nayem_43 Over a year ago

@Shanmuk Eswar bro, I edited the code snippet and add a new line "$('#myTableBody table').remove();" at the starting of addTable function. This will remove the previously added table and updated the new one with new modified data. If we don't do that then "modalbody.childElementCount" will return 2 and if condition doesn't allow us to insert a new table. Hope it will solve your problem.

Nayem_43 Over a year ago

just add this 2 line before this line "tableDiv.appendChild(table);" (last line of the function) var option = $('#shifts :selected').text(); $('#exampleModalLabel').text(option); Here i take the text. It will take the selected option's text not value. If you want value than use this var option = $('#shifts :selected').val();

|

Collectives™ on Stack Overflow

how to show the user input values in modal popup using javascript

2 Answers 2

2 Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related