CODEWITHSUNDEEP
javascript
Dilip
Dilip

Reputation: 19

JavaScript Onclick is not working in tag

HTML: 

<div class="loginDiv">
<form class="validate" role="form">
    <div class="form-group float-label-control">
        <input type="text" id="empId" placeholder="Employee ID" required>
    </div>
    <div class="form-group float-label-control">
        <input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
    </div>
    <div class="align_center">
        <div class="btn loginBtn" id="regBtn" onclick="new User().register()">REGISTER</div>         
    </div>
</form>

Js File

var User = function() {    
var self = this;    
self.register = function()     {       
    var mobile = $("#mobile").val();
    var regSeven = /^7[0-9].*$/
    var regEight = /^8[0-9].*$/
    if($("#empId").val() =='')
    {
         alert(Language.InvalidEmployeeId);
         return false;
    }
    if(mobile =='')
    {
         alert(Language.EmptyMobileNumber);
         return false;
    }
}
};

if i write a coding for click event like below its working when i use OnClick event function is not calling

$("#regBtn").click(function () 
{        
new User().register();   
 })

how to make the onclick work.. thanks in advance

Upvotes: 1

Views: 601

Answers (3)

Mohammed Khurram
Mohammed Khurram

Reputation: 626

Do something like this...

<div class="loginDiv">
<form class="validate" role="form">
    <div class="form-group float-label-control">
        <input type="text" id="empId" placeholder="Employee ID" required>
    </div>
    <div class="form-group float-label-control">
        <input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
    </div>
    <div class="align_center">
        <div class="btn loginBtn" id="regBtn" onclick="registerUser()">REGISTER</div>         
    </div>
</form>
</div>

Java script

function registerUser(){
   new User().register();
}

In this case the function registerUser() is re-usable as you commented above "Actually i want to make use of the onclick event so that function can be reused if i give a id i cant reuse that in another page".

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

try with this code

$("#regBtn").click(function() {
  var mobile = $("#mobile").val();
  var regSeven = /^7[0-9].*$/;
  var regEight = /^8[0-9].*$/;
  if ($("#empId").val() == '') {
    // alert(Language.InvalidEmployeeId);
    console.log("InvalidEmployeeId");
    return false;
  }
  if (mobile == '') {
    //alert(Language.EmptyMobileNumber);
    console.log("Empty mobile number");
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loginDiv">
  <form class="validate" role="form">
    <div class="form-group float-label-control">
      <input type="text" id="empId" placeholder="Employee ID" required>
    </div>
    <div class="form-group float-label-control">
      <input type="tel" name="mobileNo" maxlength="10" id="mobile" placeholder="Mobile Number" onkeyup="javascript:if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required>
    </div>
    <div class="align_center">
      <div class="btn loginBtn" id="regBtn">REGISTER</div>
    </div>
  </form>
</div>

Upvotes: 0

CodeSmith
CodeSmith

Reputation: 3197

In onclick call a function that does new User().register(). Do not write literal expression, wrap that expression in function and call that function.

Upvotes: 1

Related Questions