CODEWITHSUNDEEP
jqueryreplace
blogob
blogob

Reputation: 530

Replace words in a textarea depending on a select field value

I have an empty textarea field. A First dropdown allows me to choose which code block I want to insert in the textarea . For example :

          <select name="myfirstselect[]" class="my-select">
            <option selected disabled="disabled">Choose your code block</option>
            <option value="first-option">first code block</option>
            <option value="second-option">second code block</option>
          </select>

         var first_option='...(my first block of code)';
         var second_option='...(my second block of code)';
           var textarea = $("#myTextarea");             
           $('.my-select').on('change' , function() {
           select = $(this).val();
           if(select == "first-option") {
           textarea.text(first_option);  
          } else if(select == "second-option") {
           textarea.text(second_option); 
        }

I have a second dropdown that allows me to replace some words in the code block. Ford example

   $('.my-other-select').on('change' , function() {
     code = $(this).val();//get the value
     text = $('.my-other-select option:selected').html();//get the text
   
     textarea.html(textarea.html().replace(/word1/g,code));
     textarea.html(textarea.html().replace(/word2/g,text));
     
  });

With this code it works : I first select the code block I want to inject in the textarea. Then when I select an option from the second dropdown, every "word1" and "word2" are replaced by the text and the value of the dropdown.

The problem is, once the words are replaced, even if I change my mind and select another option in the second dropdown, it doen't change the text anymore. What I would like is something more dynamic, so each time I choose others options, the words are replaced accordingly in live.

Here, if I want to choose another option, I have to refresh the page.

Does this has something to do with the code :

textarea.html(textarea.html().replace()

Edit: in addition to the two drop-down menus, I also want to have an input, so that the user's input replaces another portion of text.. I can't get the 3 changes to be synchronized. As it is if I modify the input, it cancels the changes made by the second drop-down menu, if I modify the second drop-down menu the user input is canceled..

Here is an example with Swati code :

var first_option = '<p>Lorem ipsum  sit , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et e magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi <a href="https://google.com/dolor/amet?FN=Object">first link</a>Lorem ipsum  sit , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et e magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p> ';
var second_option = '<p>Lorem ipsum  sit , consectetur adipiscing elit, sed do eiusmod tempor incididuntrud exercitation ullamco laboris nisi <a href="https://google.com/dolor/amet?FN=Object">second link</a>Lorem ipsum  sit , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et e magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>';
var textarea = $("#myTextarea");

$('.my-select').on('change', function() {
  select = $(this).val();
  textarea.text(getText(select));
  $(".my-other-select").val("")
})

$('.my-other-select').on('change', function() {
  code = $(this).val(); //get the value
  text = $(this).find("option:selected").text(); //get the text
  //get the option from first select --
  var originalText = getText($(".my-select").val())
  textarea.html(originalText.replace(/dolor/g, code).replace(/amet/g, text));

});
   
  $(".input").on('input', function () {
    var input =  $('.input').val();
    var originalText = getText($(".my-select").val())
    textarea.html(originalText.replace(/Object/g, input)); 
  });

function getText(select) {
  if (select == "first-option") {
    return first_option;
  } else if (select == "second-option") {
    return second_option;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myfirstselect[]" class="my-select">
  <option selected disabled="disabled">Choose your code block</option>
  <option value="first-option">first code block</option>
  <option value="second-option">second code block</option>
</select>

<select class="my-other-select">
  <option selected disabled="disabled" value="">Choose</option>
  <option value="2345">1</option>
  <option value="8990">2</option>
</select>
<input type="text" class="input" placeholder="Object">

<textarea id="myTextarea" style="width:250px;height:100px"></textarea>

Any help will be appreciated : )

Upvotes: 1

Views: 55

Answers (1)

Swati
Swati

Reputation: 28522

You somehow need to get the original text and then replace it whenever the second select-box is change. So, one way to achieve this is getting the original text using the first select value and replacing that text.

Demo Code :

var first_option = 'Lorem ipsum dolor sit amet';
var second_option = 'Duis aute irure dolor in amet';
var textarea = $("#myTextarea");

$('.my-select').on('change', function() {
  select = $(this).val();
  textarea.text(getText(select));
  $(".my-other-select").val("")
})

$('.my-other-select').on('change', function() {
  code = $(this).val(); //get the value
  text = $(this).find("option:selected").text(); //get the text
  //get the option from first select --
  var originalText = getText($(".my-select").val())
  textarea.html(originalText.replace(/dolor/g, code).replace(/amet/g, text));

});


function getText(select) {
  if (select == "first-option") {
    return first_option;
  } else if (select == "second-option") {
    return second_option;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myfirstselect[]" class="my-select">
  <option selected disabled="disabled">Choose your code block</option>
  <option value="first-option">first code block</option>
  <option value="second-option">second code block</option>
</select>

<select class="my-other-select">
  <option selected disabled="disabled" value="">Choose</option>
  <option value="2345">1</option>
  <option value="8990">2</option>
</select>


<textarea id="myTextarea" style="width:250px;height:100px"></textarea>

Upvotes: 1

Related Questions