CODEWITHSUNDEEP
javascriptjqueryhtml
Sal B
Sal B

Reputation: 540

Add string + select text to input

Scenario:User selects a city from the dropdown. From that selection, the input text input field then populates a string + that city .text()

The issue: With what I have (below), the string is populated automatically then when the option's text is appended.

I'd like for the input text field to be blank by default and only when the user chooses a city it will add the string of text + option text.

Thank you for looking and suggestions!

Demo: http://codepen.io/salbaldovinos/pen/QwrZbp

$(document).ready(function(){
  var eventChoice = $('#test'),
  prodInterest = $('#productInterest');

  eventChoice.change(function(){
    var str = "";

    $('#test option:selected').each(function(){
      str += "Channel & TR Event Reg - " + $(this).text();
    });

    prodInterest.val( str );
  }).change();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="">
<select name="" id="test">
    <option value="" selected></option>
    <option value="hongkong">Hong Kong</option>
    <option value="taipai">Taipai</option>
  </select>
  <input type="text" id="productInterest" />
</form>

Upvotes: 1

Views: 463

Answers (4)

Shridhar
Shridhar

Reputation: 339

$(document).ready(function(){
        $("#test").change(function (){
            if($("#test :selected").text().length != 0 ) {
            var str1 = "Channel & TR Event Reg - " + $("#test :selected").text();
            $("#productInterest").val(str1);
            }
            else {
            $("#productInterest").val('');
            }
    });
});

While i was busy with other answers there are 3 answers to this question. any way i tried so i am uploading code. and if you choose default one it will remove text from #productInterest textbox..

Upvotes: 1

AlexL
AlexL

Reputation: 1707

You need to change the jQuery code like this:

$(document).ready(function(){
  var eventChoice = $('#test'),
  prodInterest = $('#productInterest');

  eventChoice.change(function(){
    var str = "";

    $('#test option:selected').each(function(){
      str += "Channel & TR Event Reg - " + $(this).text();
    });

    prodInterest.val( str );
  });

});

Notice the removal of change() after the binding which caused it to trigger the change right after the binding was done.

Code version when selected option is blank:

$(document).ready(function(){
  var eventChoice = $('#test'),
  prodInterest = $('#productInterest');

  eventChoice.change(function(){
    var str = "";

    $('#test option:selected').each(function(){
      if ($(this).val() != "") {
        str += "Channel & TR Event Reg - " + $(this).text();
      }
    });

    prodInterest.val( str );
  });

});

Upvotes: 1

Popnoodles
Popnoodles

Reputation: 28409

You're triggering change() on page load, so it's using the blank field, but I suspect you want the text in the field to disappear when that blank selection is selected anyway, so just add this one line

eventChoice.change(function(){
    if ($('#test option:selected').text() == '') return;

Upvotes: 1

epascarello
epascarello

Reputation: 207501

Check for a length of the selected value. If there is not one, than skip it. 

$(document).ready(function(){
  var eventChoice = $('#test'),
  prodInterest = $('#productInterest');

  eventChoice.change(function(){
    var str = "";

    $('#test option:selected').each(function(){
      if (this.value.length) {
          str += "Channel & TR Event Reg - " + $(this).text();
      }
    });

    prodInterest.val( str );
  }).change();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="">
<select name="" id="test">
    <option value="" selected></option>
    <option value="hongkong">Hong Kong</option>
    <option value="taipai">Taipai</option>
  </select>
  <input type="text" id="productInterest" />
</form>

Upvotes: 2

Related Questions