CODEWITHSUNDEEP
jquery
KJS
KJS

Reputation: 1214

Copy div content to another div and replace words

Trying to copy div content from a template div (o_time_templ) to another and replace two words in it. On change of select it should copy the content, put it in 'o_time_mss' and replace change 1 and 2.

My code is below. The clone contents are empty after the first clone.

$('select[id=o_time]').on('change', function() {
  var template = $("#o_time_templ p").clone().html();

  var delTimeVars = $('#o_time').val();
  delTimeVars = delTimeVars.split('-');
  var delTime = delTimeVars[0];
  var delTime_price = delTimeVars[1];

  if (delTime_price != undefined) {
    $("#o_time_mss").replaceWith(template);
    $("#o_time_mss p").text($("#o_time_mss p").text().replace("o_time_zone_screen", delTime).replace("o_time_price_screen", delTime_price));
    $("#o_time_mss").show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="o_time" id="o_time" required>
  <option value="">Delivery time</option>
  <option value="Normal lunch">Normal lunch</option>
  <option value="Breakfast-20">Breakfast</option>
  <option value="After 5pm-40">After 5pm)</option>
  <option value="Saturday-120">Saturday</option>
  <option value="Sunday-120">Sunday</option>
</select>
<div class="hidden" id="o_time_mss">
  <p>change 1: o_time_zone_screen AND change 2: o_time_price_screen</p>
</div>
<div class="hidden" id="o_time_templ">
  <p>change 1: o_time_zone_screen AND change 2: o_time_price_screen</p>
</div>

Upvotes: 0

Views: 69

Answers (1)

Vegeta
Vegeta

Reputation: 1317

Don't replace o_time_mss with template since it will replace all html content with text. Use html()

$( "#o_time_mss" ).html(template);

Upvotes: 1

Related Questions