How to replace comma with dot in Javascript

Question

I have a html select element with multiple options, when selected javascript will display specific input field(s). In these fields I have javascript function that changes comma (,) to dot (.)

The problem is, only input field with id #size will work, when others are selected, nothing changes. I'm using jQuery.

Here's full code in JSFiddle

<select id="switch" name="switch">
  <option value="">Select...</option>
  <option value="size">Size</option>
  <option value="weight">Weight</option>
  <option value="dimensions">Dimensions</option>
</select>

<div class="switch-body">
<!-- javascript content goes here -->
</div>

Javascript:

$(document).ready(function() {
    $("#switch").change(function() {
        //if selected option is size
        if ($(this).val() == "size") {
            $(".switch-body").html('<input type="text" id="size" placeholder="Product Size">');
        }
        //if selected option is weight
        else if ($(this).val() == "weight") {
            $(".switch-body").html('<input type="text" id="weight" placeholder="Product Weight">');
        }
        //if selected option is weight
        else if ($(this).val() == "dimensions") {
            $(".switch-body").html(`
            <input type="text" id="height" placeholder="Product Height">
            <input type="text" id="width" placeholder="Product Width">
            <input type="text" id="length" placeholder="Product Length">
            `);
        }
        //if selected option is none
        else if ($(this).val() == "") {
            $(".switch-body").html("");
        }
    });

    //replaces comma with dot (here is the problem)
    $(".switch-body").keyup(function(){
        $("#size").val($("#size").val().replace(/,/g, '.'));
        $("#weight").val($("#weight").val().replace(/,/g, '.'));
        $("#height").val($("#height").val().replace(/,/g, '.'));
        $("#width").val($("#width").val().replace(/,/g, '.'));
        $("#length").val($("#length").val().replace(/,/g, '.'));
    });
});

The replace function on other input fields outside this javascript code works just fine.

Rory McCrossan · Accepted Answer · 2019-08-13 19:53:01Z

The problem is because your replace() logic is attempting to work on undefined values, where the fields don't yet exist in the DOM. It only appears to work for #size because it's first in the list. If you check the console after it 'works' you'll see that the replacement in #weight is causing an error.

To fix this, put a common class on all the input elements, then give a function to val() which returns the new value to update the field with based on its current one, like this:

$(".switch-body").keyup(function() {
  $(".no-comma").val(function(i, v) {
    return v.replace(/,/g, '.');
  });
});

$(document).ready(function() {
  $("#switch").change(function() {
    //if selected option is size
    if ($(this).val() == "size") {
      $(".switch-body").html('<input type="text" id="size" placeholder="Product Size" class="no-comma">');
    }
    
    //if selected option is weight
    else if ($(this).val() == "weight") {
      $(".switch-body").html('<input type="text" id="weight" placeholder="Product Weight" class="no-comma">');
    }
    
    //if selected option is weight
    else if ($(this).val() == "dimensions") {
      $(".switch-body").html(`
        <input type="text" id="height" placeholder="Product Height" class="no-comma">
        <input type="text" id="width" placeholder="Product Width" class="no-comma">
        <input type="text" id="length" placeholder="Product Length" class="no-comma">`);
    }
    
    //if selected option is none
    else if ($(this).val() == "") {
      $(".switch-body").html("");
    }
  });

  //replaces comma with dot (here is the problem)
  $(".switch-body").keyup(function() {
    $(".no-comma").val(function(i, v) {
      return v.replace(/,/g, '.');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="type">Type</label>
  <br>
  <select id="switch" class="custom-select" name="switch">
    <option value="">Select...</option>
    <option value="size">Size</option>
    <option value="weight">Weight</option>
    <option value="dimensions">Dimensions</option>
  </select>
</div>
<div class="form-group switch-body">
  <!-- content here -->
</div>

Thanks for explaining my problem in the code. Everything is working great now. @Rory McCrossan!

Nick Chouard · Accepted Answer · 2019-08-13 20:28:27Z

The first thing to do is to check your console. The code is failing because certain of the elements that you are trying to replace on are undefined, because you create and destroy the HTML elements each time you change the selection. A better way to do this would be to hide and show the elements.

Sample code:

<div class="form-group">
  <label for="type">Type</label>
  <br>
  <select id="switch" class="custom-select" name="switch">
    <option value="">Select...</option>
    <option value="size">Size</option>
    <option value="weight">Weight</option>
    <option value="dimensions">Dimensions</option>
  </select>
</div>
<div class="form-group switch-body">
  <div class="show-size">
    <input type="text" id="size" placeholder="Product Size">
  </div>
  <div class="show-weight">
    <input type="text" id="weight" placeholder="Product Weight">
  </div>
  <div class="show-dimensions">
    <input type="text" id="height" placeholder="Product Height">
    <input type="text" id="width" placeholder="Product Width">
    <input type="text" id="length" placeholder="Product Length">
  </div>
</div>

$(document).ready(function() {
    $(".switch-body").children().each(function() {
      $(this).hide();
    });
    $("#switch").change(function() {
            $(".switch-body").children().each(function() {
            $(this).hide();
        });
        //if selected option is size
        if ($(this).val() == "size") {
            $(".show-size").show();
        }
        //if selected option is weight
        else if ($(this).val() == "weight") {
            $(".show-weight").show();
        }
        //if selected option is weight
        else if ($(this).val() == "dimensions") {
            $(".show-dimensions").show();
        }
    });

    //replaces comma with dot (here is the problem)
    $(".switch-body").keyup(function(){
        $("#size").val($("#size").val().replace(/,/g, '.'));
        $("#weight").val($("#weight").val().replace(/,/g, '.'));
        $("#height").val($("#height").val().replace(/,/g, '.'));
        $("#width").val($("#width").val().replace(/,/g, '.'));
        $("#length").val($("#length").val().replace(/,/g, '.'));
    });
});

Code is in this JS Fiddle.

Collectives™ on Stack Overflow

How to replace comma with dot in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related