how to call a function based on the input value in javascript?

Question

Below is my Html sample code in which there is a single input field which accepts numbers as well as alphabet.

I need to call function according to the values entered by the user i.e if user enter pure 10 dgits phone number then call function number() if user enters email call function email() else mix then error.

I need only one input element for both phone number and email.

Html

<div>
<input type="text" id="contact"/>
<button onClick()="???">Submit</button>
</div>

<script>
function number(){
  // call when input value is a number;
}

function email() {
 // call this when input value is an email;
}
</script>

you call the same function and do a check within it with `if/then/else` — Dellirium, Jun 12 '18 at 06:40
Add only a single handler, and validate the input, then call either `number` or `email`, if that would be necessary anymore. — Teemu, Jun 12 '18 at 06:40

score 2 · Answer 1 · edited Jun 12 '18 at 08:33

<button onclick="number()">Submit</button>

If you don't know which function to call you need to determine that:

HTML:

<button onclick="decideFunction()">Submit</button>

JS:

function decideFunction() {
    const value = document.getElementById('contact').value;
    if (!Number.isNaN(value)) {
        number();
    } else if (isEmail(value)) { // check with regexp
        email(); //etc..
    }
}

score 1 · Answer 2 · answered Jun 12 '18 at 06:41

Just call another function which checks if the value is a number and act accordingly:

function func() {
  let val = document.getElementById("contact").value;
  if (!isNaN(parseInt(val))) number();
  else email();
}

function number() {
  // call when input value is a number;
  console.log("number() called");
}

function email() {
  // call this when input value is an email;
  console.log("email() called");
}

<input type="text" id="contact" />
<button onclick="func()">Submit</button>

score 1 · Accepted Answer · answered Jun 12 '18 at 06:48

You can use regex for checking the email values and use parseInt() with length validation for checking the phone number value

function checkInput(){
  var contact = document.getElementById('contact').value;
  if(contact.length === 10 && parseInt(contact)){
    number();
  } else if(!parseInt(contact)){
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(reg.test(contact)){
       email();
    } else {
       mix();
    }
  } else {
     mix();
  }
  
}
function number(){
  console.log("number");
}

function email() {
 console.log("email");
}

function mix() {
  console.log("Error");
}

<div>
<input type="text" id="contact"/>
<button onClick="checkInput();">Submit</button>
</div>

score 0 · Answer 4 · answered Jun 12 '18 at 06:49

Try this....

 <div>
    <input type="text" id="contact"/>
    <button onClick()="decideFun();">Submit</button>
    </div>

    <script>
    function decideFun(){
      var inputVal = $("#contact").val();

      if($.isNumeric(inputVal)==true) number();
      else email();
    }
    function number(){
      // call when input value is a number;
    }

    function email() {
     // call this when input value is an email;
    }
    </script>

how to call a function based on the input value in javascript?

4 Answers4