By Berisko


2019-08-13 19:47:53 8 Comments

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.

2 comments

@Nick Chouard 2019-08-13 20:23:16

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.

@Rory McCrossan 2019-08-13 19:53:01

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>

@Berisko 2019-08-13 19:59:28

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

Related Questions

Sponsored Content

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

88 Answered Questions

[SOLVED] How to validate an email address in JavaScript

41 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

88 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 6147651 View
  • 7671 Score
  • 88 Answer
  • Tags:   javascript arrays

59 Answered Questions

[SOLVED] How to replace all occurrences of a string?

58 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

3 Answered Questions

55 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

Sponsored Content