add dynamic row based on user selection

Question

<label>
  <input  type="radio" name="optradio" >1 PERSON
</label>
<label>
  <input  type="radio" name="optradio" >2 PERSON
</label>
<label>
  <input  type="radio" name="optradio" >3 PERSON
</label>

<div class="table-responsive">
  <table class="table table-hover table-striped mah">
    <tbody>
      <tr>
        <td>
          <div class="form-group">
            <input type="text" name="f1-email" placeholder="Name" class="f1-email form-control" id="f1-email"></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Currently, one input is there. If a user selects a 2 person or 3 person radio button we need to display 2 or 3 input field will display, adding row dynamically based on user selection

kshitij · Accepted Answer · 2018-11-24 04:45:02Z

2

Here simple use loop and put html in container :

<label>
<input  type="radio" name="optradio" value="1">1 
 PERSON
</label>
<label>
<input  type="radio" name="optradio" value="2" >2 
PERSON
</label>
<label>
<input  type="radio" name="optradio" value="3" >3 
PERSON
</label>

<div class="table-responsive">
<table class="table table-hover table-striped mah">
<tbody id="container">

  </tbody>
 </table>
  </div>

and use jquery loop for simply creating dynamic content:

$('input[type="radio"]').click( function(){
$val = $(this).val();
$('#container').html('');
$content = '';
var i = 1;
for( i = 0; i < $val; i++ ) {
    $content += '<tr><td><div class="form-group"><input type="text" name="f1-email" placeholder="Name" class="f1-email form-control" id="f1-email"></div></td></tr>';
}
   $('#container').html($content);
 });

Hope this helps.

answered Nov 24, 2018 at 4:45

kshitij

7209 silver badges18 bronze badges

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

4 Comments

Prabhu Over a year ago

in my website i am not able to use value 1 for the radio button , because the each radio button having the tour amount as value, <label><input class="price-input" type="radio" name="optradio" value="4700"> 1 PERSON - <b>Cost Rs.<span class="price">4700</span>/- </b> </label>

kshitij Over a year ago

If your value is dynamic, you can use any attribute for input e.g. <input type="radio" count="1" value="xyz"/>. I think you are dynamically populating the inputs so in logic in place of value you can use $val = $(this).attr('count'). it will give the value of attribute and rest is explained above. Good luck.Let me know if anything pop's up. @Prabhu

Prabhu Over a year ago

thanks for your replay, it will working fine, how to send dynamically created text field to my mail after submitting the form...how i assign name and id field for that

kshitij Over a year ago

Kindly create a new question for this , there i can answer more freely and can get more idea what you actually want to do. Here not enough information in comments.

Rehmat · Accepted Answer · 2018-11-24 05:16:59Z

0

I have created a nice example at CodePen for you.

See the Pen Radio Inputs by Animated Creativity (@animatedcreativity) on CodePen.

All elements are created dynamically using a dummy HTML element. Please edit the dummy HTML element, to make any changes to the input elements.
You can provide number of elements to be added.
Script also triggers the provided callback so that you can do related things when number of inputs are changed.
You can access the dynamically created elements using result object's elements property. Please check the example below.

Example usage: var result = new radioInputs(5, document.querySelector(".radio-inputs"), function(count) { console.log(count, result.elements); });

answered Nov 24, 2018 at 5:16

Rehmat

2,3272 gold badges28 silver badges34 bronze badges

Collectives™ on Stack Overflow

add dynamic row based on user selection

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related