Transform table row into input

Question

I have 2 tables, each row of tables has a checkbox

<table class="One">
 <thead>
     <tr>
     <th>choose</th>
     <th>Code 1</th>
     </tr>
 </thead>
<tbody>
<tr>
  <th scope="row"><input type="checkbox" class="form-check-input"></th>
  <td>123</td>
</tr>

 <table class="Two">
 <thead>
     <tr>
     <th>choose</th>
     <th>Code 2</th>
     </tr>
 </thead>
<tbody>
<tr>
  <th scope="row"><input type="checkbox" class="form-check-input"></th>
  <td>456789</td>
</tr>

Within the modal has a form

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
     Continue
    </button>

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

       <form action="" method="post">
         /* inputs here */
          <button type="submit" class="btn btn-primary">Submit</button>
       </form>

      </div>
    </div>
  </div>
</div>

I would like to capture just one checkbox from each of these tables and transform into input within the modal when I click continue button modal. How do I do this with jquery?

EDIT

https://jsfiddle.net/43zy6mt9/

I can pass the values to the variable jquery. How do I get this value and create an input in modal with it?

on button click modal pop out, read the value that is checked and display it on the modal — Se0ng11
– Se0ng11, Commented Sep 8, 2017 at 2:59
@Se0ng11 Yes, I would like to understand with doing when clicking on the modal button the inputs are created in the form inside the modal — Gislef
– Gislef, Commented Sep 8, 2017 at 3:01
you need to show some code, working or not, on what actually you had done, or maybe some jsfiddle that we can work with, so that we can troubleshoot on the issue — Se0ng11
– Se0ng11, Commented Sep 8, 2017 at 3:09
But this is not a solution because when you deselect the checkbox it will be like clicking the button again, activating the value again, instead of cleaning the variable — Gislef
– Gislef, Commented Sep 8, 2017 at 3:37

gjijo · Accepted Answer · 2017-09-08 03:40:02Z

2

$(document).on('click', '#btn_Continue', function() {
  var inpId = 0;
  $('#dvInputs').html('');
  $('table.One input[type=checkbox]:checked').each(function() {
    var chkValue = $(this).closest('th').next('td').text();
    $('#dvInputs').append($('<input type="text" id="' + ("input" + inpId) + '" value="' + chkValue + '" />'));
    inpId++;
  });
  $('table.Two input[type=checkbox]:checked').each(function() {
    var chkValue = $(this).closest('th').next('td').text();
    $('#dvInputs').append($('<input type="text" id="' + ("input" + inpId) + '" value="' + chkValue + '" />'));
    inpId++;
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="One">
  <thead>
    <tr>
      <th>choose</th>
      <th>Code 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><input type="checkbox" class="form-check-input"></th>
      <td>123 A</td>
    </tr>
    <tr>
      <th scope="row"><input type="checkbox" class="form-check-input"></th>
      <td>123 B</td>
    </tr>
  </tbody>
</table>
<table class="Two">
  <thead>
    <tr>
      <th>choose</th>
      <th>Code 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><input type="checkbox" name="chkTwo" class="form-check-input"></th>
      <td>456789 A</td>
    </tr>
    <tr>
      <th scope="row"><input type="checkbox" name="chkTwo" class="form-check-input"></th>
      <td>456789 B</td>
    </tr>
  </tbody>
</table>
<button id="btn_Continue" type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
     Continue
    </button>
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <form action="" method="post">
          <div id="dvInputs"></div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

      </div>
    </div>
  </div>
</div>

How to create and append new element to a div

$('#div-id').append($('<input type="text" id="your-id" value="your-value" />'));

answered Sep 8, 2017 at 3:40

gjijo

1,20612 silver badges16 bronze badges

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

3 Comments

gjijo Over a year ago

Hope you need something like this. If there is any change please specify it clearly.

Gislef Over a year ago

Please help me on a question about th selector link

gjijo Over a year ago

Sorry, I was a bit late to see this message. Anyway, hope you got the answer for that question.

Se0ng11 · Accepted Answer · 2017-09-08 03:55:53Z

1

https://jsfiddle.net/43zy6mt9/1/

have a look on another version, it will loop all the table that contain check box that is checked, this is just a sample, the selector can be more specific

$(function() {
$('.btn-primary').on('click', function(){
    $('form').find('p').empty();
    $('table').each(function(){
    var $this = $(this);
    var $checkBox = $this.find('input[type="checkbox"]');
    if ($checkBox.prop('checked')){
      $('form').find('p').append($checkBox.parent().next().html());
    }
  });
})
});

answered Sep 8, 2017 at 3:55

Se0ng11

2,3342 gold badges29 silver badges45 bronze badges

Comments

RafatMunshi · Accepted Answer · 2017-09-08 03:56:47Z

1

Add the name attribute to your checkboxes.

<input type="checkbox" class="form-check-input" name="first">

In your jquery-

var selected = [];
var seeChecked = function() {
 $( "input:checked" ).each(function() {
    selected.push($(this).attr('name'));
});
 };
seeChecked();
$( "input[type=checkbox]" ).on( "click", seeChecked );

Add class to your modal form-

<form class="s" action="" method="post">

$( "#formModal" ).on('shown', function(){
    var wrapper = $(".s"); //Fields wrapper
      $(wrapper).prepend('<input type="text" id="forcode1" /><input type="text" id="forcode2" />'); //add input box
});

answered Sep 8, 2017 at 3:56

RafatMunshi

1459 bronze badges

Collectives™ on Stack Overflow

Transform table row into input

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related