Dynamically adding text box using jQuery

Question

I'm working on a project for school that involve converting a form into HTML. At one point there is a drop down that asks if you are applying to be a TA or a PLA. When selected, I want a new text box to appear below that drop down. Here is what I have:

This is the dropdown data in my controller:

$data['selection'] = array("TA (Graduate Student)", "PLA (Undergraduate)");

Here is what is in the view:

<label for="studentSelection">What position are you applying for?
<?php echo Form::select(array( 'name'=> 'position', 'id' => 'position', 'class' => 'form-control', 'data' => $data['selection']));?>
</label>

This is what I'm attempting:

$("#position").change(function() {
//one selection is 1, the other is 0.
if ($("#position").val() == 1){  
    var row = $("<div class='row' id='row_position></div>");
    var year = $('<div class = "col-md-6"></div>');
    var position = $('<input type = "text", id="position1", name="position1" class="form-control"></input>');

    $("#position").append(row);
    row.append(year);
    year.append(position);


    //alert works when PLA is selected.
    //alert("hello");
}
else {
    //something else
}

I can't quite figure it out

renakre · Accepted Answer · 2015-04-10 21:45:13Z

I tried to fix the errors in your code: https://jsfiddle.net/840xyrL7/1/

<select id='position'>
   <option value="1">Item1</option>
   <option value="2">Item2</option>
</select>


$("#position").change(function() {
  //one selection is 1, the other is 0.
  if(this.selectedIndex === 1){
      var row = $("<div class='row' id='row" + this.selectedIndex + "'></div>");
      var year = $('<div class = "col-md-6"></div>');
      var position = $('<input placeholder="Your text" type="text" id="position' + this.selectedIndex + '"  name="position' + this.selectedIndex + '" class="form-control"></input>');
      year.append(position); 
      row.append(year);

      $("#position").after(row);

   }

});

Here are the lessons learned for you:

Do not put comma between the attributes: type = "text", id=
Be careful about closing quotes: id='row_position></div>
Do not use append if you want to add a new control next to another control: $("#position").append(row);, instead use .after()

Abraham Hamidi · Accepted Answer · 2015-04-10 21:46:01Z

0

<div class='row' id='row_position></div>

You're missing a closing single quote for id, which is probably breaking everything. Try replacing that with

<div class='row' id='row_position'></div>

answered Apr 10, 2015 at 21:46

Abraham Hamidi

13.9k3 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

Dynamically adding text box using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related