CODEWITHSUNDEEP
javascriptjqueryhtml
Mike Henke
Mike Henke

Reputation: 643

Dynamically adding text box using jQuery

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

Upvotes: 0

Views: 878

Answers (2)

Abraham Hamidi
Abraham Hamidi

Reputation: 13789

<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>

Upvotes: 0

renakre
renakre

Reputation: 8291

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:

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

Upvotes: 1

Related Questions