How to select and run this function onload?

Question

So I have this working codeblock in my script to replace the decimal seperator from comma "," into period "." ,when editing a form. Because in this region the decimal seperator comma is normal I also want the values to be displayed like this 1,99€ so I reverted the working function. The selected fields should change on load. When the form gets submitted I will cange it back again. For this example I show you only one of the fields.

The value="1.5" gets loaded from the Magento-Backend the wrong way, which is another story:

I included onload:"function(event)" and window.onload = function(); to show two my attempts to adress this function from jQuery: jQuery('form').on('change', '#price', function(event) I also need to know how to remove the .on('change' part. First time using Js und jQuery. I really tried everything.

 <html>
  <body onload="function(event)">
   <form>
    <input id="price" value="1.5">
   </form>
  </body>
 </html>

<script>

window.onload = function();

jQuery('form').on('change', '#price', function(event) {
   event.preventDefault();
   if (jQuery('#price').val().includes('.'))  {

    var varwithpoint = jQuery('#price').val();
    varwithcomma = varwithcomma.replace(",",".");

    jQuery('#price').val(varwithpoint);
} 
 else {
    console.log('no dot to replace');
}

});
</script>

`function` is a reserved word for javascript, used to declare functions, so you cannot call your function "function" — Javier Gonzalez, Feb 12 '18 at 16:20
@xavvvier I don't think that's what's happening here. There seems to just be a lack of understanding of functions. — Reinstate Monica Cellio, Feb 12 '18 at 16:24
@Archer, not only lack of understanding on functions, but also on jQuery. I also see the function is attached twice, on the html with the `onload` attribute and in the first line of the javasacript code — Javier Gonzalez, Feb 12 '18 at 16:40
Exactly, that's what I said. I lack of basic understanding of jQuery and Javascript and gave you two of many failed attempts to solve calling the function. Calling a function was never neccessary, you are right. Your discussion helped me! Thank you! With the few hours crash-course in both syntaxes I get it now, together with your answers. Nice. — Matte123, Feb 13 '18 at 13:22

score 1 · Accepted Answer · 2018-02-12T17:05:59.730

There were a few parts of the code which didn't seem to be working as intended, so below is a basic example of code that will convert the "," to a "." if stored in the input "price", and check this after each change of the value;

 
function convert_price(){
  var this_price = $("#price").val();
  if (this_price.includes(',')) {      
    this_price = this_price.replace(",",".");
    $('#price').val(this_price);
  } else {
    console.dir('no dot to replace');
  }
}
convert_price();

$("#price").on("change",convert_price);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
  <body>
   <form>
    <input id="price" value="1,5">
   </form>
  </body>
 </html>

score 0 · Answer 2 · answered Feb 12 '18 at 16:50

I have called "init" the function that attaches the change event to the input file, I also changed the parameters passed to the on function

function init(){

   var input = jQuery('#price');
   input.on('change', function(event) {
     event.preventDefault();
     var valueInInput = input.val();
     if (valueInInput.includes('.')) {
        var varwithcomma = valueInInput.replace(",",".");
        input.val(varwithcomma);
     } else {
        console.log('no dot to replace');
     }
   });
}

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body onload="init()">
   <form>
    <input id="price" value="1.5">
   </form>
  </body>
 </html>

Thank you for your time. I tried it in jsFiddle and I didn't work. Maybe because because the function only gets called once at start and then it doesn't trigger the on('change' even, because the value is already in the form. When changing the value myself the function also isn't replacing. I can't fix it either. https://jsfiddle.net/#&togetherjs=OB5AUOsHyk — Matte123, Feb 13 '18 at 13:33

How to select and run this function onload?

2 Answers2