CODEWITHSUNDEEP
javascript
arjun
arjun

Reputation: 57

how to disable the button based on result of javascript function

I want to disable the button based on the javascript result of textboxes if there is incorrect email id then the button should be disabled .Help me over this.If there is incorrect email and phone no ,I Want to disable my Button function or button.My problem is I'm using separate javascript functions for textboxes so how can disable the button based on other javascript function.Help me over this 

<div align="right">
</div>
<div id="div">
<center> <h3>REGISTER</h3></center>
<div id="output" align="center">
</div>
<table>
<thead>
</thead>
<tbody>
<tr>
<td>
<label>Firstname</label>
<td>
<input type="text" name="firstname" id="firstname" required=""> 
</td>
</tr>
<tr>
<td>
<label>Lastname</label>
</td>
<td>
<input type="text" name="lastname" id="lastname"  required="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="text" name="email" id="email" required="">
</td>
<td id="error" style="display:none;color:red">
invalidemail
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="password" id="password" required="">
</td>
</tr>
<tr>
<td>
<label>Confirm password</label>
</td>
<td>
<input type="password" name="confirmpassword" id="confirmpassword" required="">
</td>
<span id="pass"></span>
</tr>
<tr>
<td>
<label>Phone no</label>
</td>
<td>
<input type="text" name="phoneno" pattern="[789][0-9]{9}" id="phoneno" required="" maxlength="10">
</td>
<td id="invalidphone" style="display:none;color:red">
invalidphoneno
</td>

</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="submit" value="submit" id="submit"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<a href="login.php">Login?</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</head>
</html>
<script type="text/javascript">
$('#email').on('keypress', function() {
    var re = /([A-Z0-9a-z_-][^@])+?@[^$#<>?]+?\.[\w]{2,4}/.test(this.value);
    if(!re) {
        $('#error').show();
    } else {
        $('#error').hide();
    }
});
$('#phoneno').on('keypress',function(){
  var phone=/^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}/.test(this.value);
  if(!phone){
    $('#invalidphone').show();
  }
  else
  {

    $('#invalidphone').hide();
  }
  });
$(document).ready(function(){
$('#submit').click(function(){
var first=$('#firstname').val();
var last=$('#lastname').val();
var Email=$('#email').val();
var pass=$('#password').val();
var confirm=$('#confirmpassword').val();
var phone=$('#phoneno').val();


$.ajax({
     type:"POST",
     url:"register.php",
     data:{

       firstname:first,
        lastname:last,
        email:Email,
        password:pass,
        confirmpassword:confirm,
        phoneno:phone,

       },
      success:function(data){
        if($.trim(data)==='successfully registered')
        {
        $('#output').html(data);
        }
        else
        {
        $('#pass').html(data);
        }
      },
      error:function()
      {
        alert("error");
      }

});
});
});

</script>

Upvotes: 1

Views: 116

Answers (3)

Roger
Roger

Reputation: 93

Simply disable the button at the top of your javascript.

$("#submit").prop("disabled", true);

Then in your regex, if it's true, set it to false.

EDIT - It's probably best to set your regex variables global and then you can do if statement for both regex.

if (re && phone) {
    $("#submit").prop("disabled", false);
}

Upvotes: 0

Pawan Kumar
Pawan Kumar

Reputation: 1374

Use $("#submit").attr("disabled", true); to disable and $("#submit").removeAttr("disabled"); to enable the button

$('#phoneno').on('keypress',function(){
  var phone=/^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}/.test(this.value);
  if(!phone){
    $("#submit").attr("disabled", true);  // disable submit btn
    $('#invalidphone').show();
  }
  else
  {
    $("#submit").removeAttr("disabled");  //enable submit btn
    $('#invalidphone').hide();
  }
  });

Upvotes: 1

NitinSingh
NitinSingh

Reputation: 2068

  1. Have submit button disabled initially till you have all form elements as proper
  2. With the HTML5 input (email and text) fields, you already have the required attribute present, but need to put required="required"
  3. Have an onChange event for the last (required) field, check if the validation is successful.

Check this for more details and additional info If input field is empty, disable submit button

Upvotes: 1

Related Questions