CODEWITHSUNDEEP
javascripthtmljqueryjquery-uixhtml
Xia
Xia

Reputation: 51

Finding word in all labels and replace it in jQuery

I have multiple input fields with labels that starts with word "Shop" i.e Shop Letter : Shop Letter No : Shop Letter File : I am having a drop down that has two options "Shop" and "Store". I want to change to Store when Store option is selected from the drop down.

Here's what I have done so far;

<form action="" id="form_type">
    <label for="type">Choose a type:</label>
    <select id="type">
        <option value="shop">Shop</option>
        <option value="store">Store</option>
    </select><br><br>
    <label for="Shop_Letter">Shop Letter :</label>
    <input type="text" id="Shop_Letter" name="Shop_Letter"><br><br>
    <label for="Shop_Letter_No">Shop Letter No :</label>
    <input type="text" id="Shop_Letter_No" name="Shop_Letter_No"><br><br>
    <label for="Shop_Letter_File">Shop Letter File :</label>
    <input type="text" id="Shop_Letter_File" name="Shop_Letter_File"><br><br>
</form>


$("#type").on('change', function(){
        var shop_letter = $("label[for='Shop_Letter']").html(); //Get the text
        var shop_letter_no = $("label[for='Shop_Letter_No']").html(); //Get the text
        if (this.value == 'store'){
            $("label[for='Shop_Letter']").html(shop_letter.replace("Shop", "Store"));
            $("label[for='Shop_Letter_No']").html(shop_letter_no.replace("Shop", "Store"));
        }else{
            $("label[for='Shop_Letter']").html(shop_letter.replace("Store", "Shop"));
            $("label[for='Shop_Letter_No']").html(shop_letter_no.replace("Store", "Shop"));
        }
    });

It does work this way when I manually select labels and assign vars but I want to select all labels and change it using a proper method. I can't seem to figure this one out on my own. Thanks

Upvotes: 0

Views: 163

Answers (1)

Twisty
Twisty

Reputation: 30883

Consider the following.

$(function() {
  function changeLabel(tObj, v) {
    tObj = $(tObj);
    tObj.html(v + tObj.text().slice(tObj.text().indexOf(" ")));
  }
  $("#type").on('change', function() {
    var sel = $(this).val();
    sel = sel.charAt(0).toUpperCase() + sel.slice(1);
    $("#form_type label").each(function(i, el) {
      if (i !== 0) {
        changeLabel(el, sel);
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="form_type">
  <label for="type">Choose a type:</label>
  <select id="type">
    <option value="shop">Shop</option>
    <option value="store">Store</option>
  </select><br><br>
  <label for="Shop_Letter">Shop Letter :</label>
  <input type="text" id="Shop_Letter" name="Shop_Letter"><br><br>
  <label for="Shop_Letter_No">Shop Letter No :</label>
  <input type="text" id="Shop_Letter_No" name="Shop_Letter_No"><br><br>
  <label for="Shop_Letter_File">Shop Letter File :</label>
  <input type="text" id="Shop_Letter_File" name="Shop_Letter_File"><br><br>
</form>

If you have a string: "Shop Letter File :" and you want to replace Shop with Store, you can use .slice(). We use Slice to get the text from the first " " and prepend the new string. I moved this to a function to make it easy to use over and over again.

We then need to iterate over each of the Labels that need to be changed (skipping the first one) and pass this and the new value to the function.

Upvotes: 1

Related Questions