CODEWITHSUNDEEP
javascriptjqueryhtml
Reza
Reza

Reputation: 65

Cannot append to textarea after clearing value

I have a dropdown select that appends to a text area on change. I set a simple button to clear it out which works but afterwords I cannot re-append from the dropdown select.

Fiddle: https://jsfiddle.net/kreza/noy5gqfL/6/

jquery snippet:

$('#criteriaSelect').change(function () {
    $('#inputCriteria').append((this.value + ';' + '\n'));
});
$('#clearTextArea').click(function () {
    $('#inputCriteria').val('');
});

What am I doing wrong?

Upvotes: 3

Views: 791

Answers (3)

prasanth
prasanth

Reputation: 22500

use like this $('#inputCriteria').val($('#inputCriteria').val()+$(this).val() + ';' + '\n');

don't use with append.to avoid the append event in input,textarea tag

$('#criteriaSelect').change(function () {

		$('#inputCriteria').val($('#inputCriteria').val()+$(this).val() + ';' + '\n');
    });
$('#clearTextArea').click(function () {
    $('#inputCriteria').val('');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select type="text" class="form-control" id="criteriaSelect">
  <option disabled selected>Select One:</option>
  <option value="AASHTO">AASHTO Roadside Design Guide</option>
  <option value="RAMCAP">AWWA Risk and Resilience Management of Water and Wastewater Systems (RAMCAP)</option>
  <option value="CDOT DDM">CDOT Drainage Design Manual</option>
  <option value="CDOT MSS">CDOT M&S Standards</option>
  <option value="CDOT SSRBD">CDOT Standard Specifications for Road and Bridge Construction</option>
  <option value="CHPHE DWTW">CHPHE Design Criteria for Domestic Wastewater Treatment Works</option>
  <option value="CDPHE PWS">CDPHE Design Criteria for Potable Water Systems</option>
  <option value="CWCB FSCM">CWCB Floodplain Stormwater and Criteria Manual</option>k
  <option value="FHWA FIRBD">FHWA Framework for Improving Resilience of Bridge Design</option>
  <option value="FHWA Highways">FHWA Highways in the River Environment- Floodplains, Extreme Events, Risk and Resilience</option>
  <option value="FHWA CRBFHP">FHWA Standard Specs for Construction of Roads and Bridges on Federal Highway Projects</option>
  <option value="UDFCD USD">UDFCD Urban Storm Drainage Criteria Manuals</option>
  <option value="DSDM">Rules and Regulations for Dam Safety and Dam Construction</option>
  <option value="Other">Other Manuals Used</option>
</select>
<label for="inputCriteria" class="control-label">Select from drop-down:</label>
<textarea class="form-control" rows="3" id="inputCriteria" style="resize: none;" disabled></textarea>
<button class="btn-danger col-sm-2" id="clearTextArea">Clear</button>

Upvotes: 2

Anton Krylov
Anton Krylov

Reputation: 449

Try this method $('#inputCriteria').empty();

Upvotes: 5

Gabbax0r
Gabbax0r

Reputation: 1826

values in textareas are set with .val(). try this:

$('#criteriaSelect').change(function () {
    $('#inputCriteria').val((this.value + ';' + '\n'));
});
$('#clearTextArea').click(function () {
    $('#inputCriteria').val('');
});

Upvotes: 2

Related Questions