setting .text() of span (multiple use)

user_15752305 0
Viewed 139

I am trying to create a jQuery function that will change some text. I don't want it to be coded with id's and classes so it can be used in multiple places (ie StartDate, CompletedDate). I don't want to use multiple functions to get this to work. I want it as short as possible.

Thanks for any help.

HTML

$('.timestamp-wrap select, .timestamp-wrap input[type="text"]').change(function() {
  var div = $(this).closest('div').attr('id'); // GET PARENT DIV

  // THESE 3 DONT WORK
  $('#' + div + ' span.month').text($('#' + div + ' select.month').value);
  $('#' + div + ' span.day').text($('#' + div + ' select.day').value);
  $('#' + div + ' span.year').text($('#' + div + ' input.year').text());

  console.log('Month = ' + $('#' + div + ' span.month').text());
  console.log('Day = ' + $('#' + div + ' span.day').text());
  console.log('Year = ' + $('#' + div + ' span.year').text()); // THIS PRINTS ONLY 'Year = '
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="start" class="timestamp-wrap">
  <span class="title">Start Date</span>
  <label>
        <select id="startmonth" name="startmonth" class="month">
            <option value="00">Month</option>
            <option value="01">01-Jan</option>
            <option value="12">12-Dec</option>
        </select>
    </label>
  <label>
        <select id="startday" name="startday" class="day">
            <option value="00">Day</option>
            <option value="01">01</option>
            <option value="31">31</option>
        </select>
    </label>
  <label>
        <input type="text" id="startyear" name="startyear" value="2021" size="4" maxlength="4" autocomplete="off" placeholder="Year" class="year">
    </label>
  <label class="date">
        ( <span class="month">mm</span>/<span class="day">dd</span>/<span class="year">yyyy</span> )
    </label>
</div>

Screen Shot

jquery javascript
1 Answers

You can use .find("span.classname").text() to add new value inside your spans whenever your elements gets changed.

Demo Code :

$('.timestamp-wrap select, .timestamp-wrap input[type="text"]').change(function() {
  var div = $(this).closest('div.timestamp-wrap'); // GET PARENT DIV
  //find span 
  div.find("span.month").text(div.find("select.month").val())
  div.find("span.day").text(div.find("select.day").val())
  div.find("span.year").text(div.find("input.year").val())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="start" class="timestamp-wrap">
  <span class="title">Start Date</span>
  <label>
        <select id="startmonth" name="startmonth" class="month">
            <option value="00">Month</option>
            <option value="01">01-Jan</option>
            ...
            <option value="12">12-Dec</option>
        </select>
    </label>
  <label>
        <select id="startday" name="startday" class="day">
            <option value="00">Day</option>
            <option value="01">01</option>
           
            <option value="31">31</option>
        </select>
    </label>
  <label>
        <input type="text" id="startyear" name="startyear" value="2021" size="4" maxlength="4" autocomplete="off" placeholder="Year" class="year">
    </label>
  <label class="date">
        ( <span class="month">mm</span>/<span class="day">dd</span>/<span class="year">yyyy</span> )
    </label>
</div>

user_106064000
Related