I am trying to replace , with / in JavaScript and wrote the code below. There are multiple text boxes available in the form. I want to write a single function and call them on all the text fields.

The issue that I am experiencing is that I am not able to send the current ID to the JavaScript method. How is this properly done?

function removeComma(val) {
  var values = document.getElementById('val').value;   //Object Required Error
  var n=values.replace(/,/, "/"); 
  document.getElementById('val').value=n;
}

<input type="text" id="one" name="one" onkeypress="removeComma(this)">
<input type="text" id="two" name="two" onkeypress="removeComma(this)">
<input type="text" id="three" name="three" onkeypress="removeComma(this)">

The error that I am getting from above code is OBJECT REQUIRED at first line.

I am trying to replace , with / in JavaScript and wrote the code below. There are multiple text boxes available in the form. I want to write a single function and call them on all the text fields.

The issue that I am experiencing is that I am not able to send the current ID to the JavaScript method. How is this properly done?

function removeComma(val) {
  var values = document.getElementById('val').value;   //Object Required Error
  var n=values.replace(/,/, "/"); 
  document.getElementById('val').value=n;
}

<input type="text" id="one" name="one" onkeypress="removeComma(this)">
<input type="text" id="two" name="two" onkeypress="removeComma(this)">
<input type="text" id="three" name="three" onkeypress="removeComma(this)">

The error that I am getting from above code is OBJECT REQUIRED at first line.

• javascript

3 Answers 3

You're passing the clicked element to your function, hence you don't need document.getElementById() at all. This fixes your problem.

function removeComma(val) {
    var values = val.value;
    var n=values.replace(/,/g, "/"); 
    val.value=n;
}

Notice also, that onkeypress is fired before the value of the input element is changed. You can use onkeyup or rather oninput if you want to use the last updated value of input.

If you really have to use the id of the element, you need to pass it in the argument:

<input type="text" id="one" name="one" onkeypress="removeComma(this.id)">

And then also remove the quotes around val:

var values = document.getElementById(val).value;

It should be...

document.getElementById(val).value

... instead, as you're probably going to call this function for each input textbox separately, sending their ids as params into the function.

UPDATE: ... and your edit clearly shows even that's not the case: you're passing an element itself into a function. That's good, but then you don't have to look after that element with document.getElementById - you already have it.

Still, there're another issue here: if you need to replace all mas, you need to add /g modifier to that regex. Otherwise multiple mas (added by copy-pasting, for example) won't be replaced.

Overall, I'd rewrite it like this:

function removeComma(el) {
  el.value = el.value.replace(/,/g, '/');
}

Here's a fiddle to play with (and here's its fork working with oninput handlers instead - in my opinion, the latter is smoother).

document.getElementById('val')

should be

document.getElementById('one')

If you make this change you don't need to send this to removeComma.

If you keep this then use the following function

function removeComma(val) {
    var values = val.value;
    var n=values.replace(/,/, "/"); 
    val.value=n;
}