CODEWITHSUNDEEP
javascriptjqueryhtmlformsfunction
Sen
Sen

Reputation: 773

How to use single function for multiple inputs in javascript

I would like to know how to use single method for both inputs in javacript.

I have a form having two input fields, calling a function to format currecny. I need to know how to apply for same function for two different inputs.

  formatCurrency(e){
    var myinput = e.target.value;
      var val = myinput;
      val = val.replace(/[^0-9\.]/g,'');      
      if(val != "") {
        var valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
        val = valArr.join('.');
      }      
     document.getElementById("samount").value = val;
  }

  formatRCurrency(e){
    var myinput = e.target.value;
      var val = myinput;
      val = val.replace(/[^0-9\.]/g,'');      
      if(val != "") {
        var valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
        val = valArr.join('.');
      }      
      document.getElementById("tamount").value = val;
  }

  <input type="text" id="samount" name="samount" class="form-control"  @keyup=${this.formatSCurrency} >
  <input type="text" id="tamount" name="tamount" class="form-control" @keyup=${this.formatRCurrency} >

How to make a single function can be used for both inputs.

Upvotes: 1

Views: 7630

Answers (2)

Brian Peacock
Brian Peacock

Reputation: 1849

A simple way to achieve this is to scrutinise the target Element's id attribute and take action accordingly. For example...

function eventHandler(e) {
    var targetID = e.target.id;

    switch(targetID) {
        case "samount":
            /* 'samount' specific process */
            break;
        default:
           /* 'tamount' specific process */
    }
}

If you wish to carry out the same process regardless of the active Element then the event.target property contains a reference to that Element...

function eventHandler(e) {
    var element = e.target;
    var val = element.value;
    // process 'val' etc ....
    element.value = new_value;
}

Hope that helps. :)

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370679

The e.target refers to the <input> you're operating on, so just change the

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

to

e.target.value = val;

and you'll be able to use the same function for both inputs. There's also probably no need for the ids anymore.

<input type="text" name="samount" class="form-control"  @keyup=${this.formatCurrency} >
<input type="text" name="tamount" class="form-control" @keyup=${this.formatCurrency} >

and

formatRCurrency(e){
  var value = e.target.value;
  value = value.replace(/[^0-9\.]/g,'');      
  if(value !== "") {
    var valArr = val.split('.');
    valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
    val = valArr.join('.');
  }      
  e.target.value = val;
}

(note that your myinput variable actually contains a string, not an HTMLInputElement, which may be confusing - best to use precise variable names)

Upvotes: 5

Related Questions