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>
Login?
</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>
Have submit button disabled initially till you have all form
elements as proper
With the HTML5 input (email and text) fields, you already have the required attribute present, but need to put required="required"
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
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();
}
});
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);
}
Related
i've built asimple webstie that contains three pages.i created a form in home page and something goes wrong with my javascript - i'm having a problem in setting a field right next to the input field with a rellevant message to the user telling him what he did wrong(prompt).
so i'm inputing below the honmePage (the form wich is in the body of the page -html) and the script its self wich includes a simple function.
My purpose is to check if user fills the field name and after that he delete it,so i want to display a red color message that tells the user that this field is requierd.
i'd be glad if someone can help me with that.
function validateName(){
var name=document.getElementById("fullName").value;
if (name.length == null)
{
nameRequiredPromt("Name Is Required",fullNamePrompt,"white");
return false;
}
}
function nameRequiredPromt(message,promtLocation,color){
document.getElementById(promtLocation).innerHTML=message;
document.getElementById(promtLocation).style.color=color;
}
<form id="form" style="color:white;">
<table>
<tr>
<td>
FullName :
</td>
<td>
<input type="text" placeholder="fullName" id="fullName"
onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa
</label> <br>
</td>
</tr>
<tr>
<td>
E-mail :
</td>
<td>
<input type="email" placeholder="email" id="email"/><label
id="emailPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<input type="password" placeholder="password" id="newPassWord"/> <label
id="PasswordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
Repeat Password :
</td>
<td>
<input type="password" placeholder="repeatedPassword"
id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="submit" id="submit"/> <label
id="submitPrompt"> </label><br>
</td>
</tr>
</table>
</form>
i did some checks to be sure that the script works and it did work so i think my problem is in the decleration of the lable "id".
switch
name.length == null
to
!name.length
length will be zero not null
also fullNamePrompt appears undefined
try nameRequiredPromt("Name Is Required","fullNamePrompt","white");
Fixed: name.length == null and also fullNamePrompt undefined and color: white to red
function validateName(){
var name=document.getElementById("fullName").value;
if (!name.length)
{
nameRequiredPromt("Name Is Required","fullNamePrompt","red");
return false;
}
}
function nameRequiredPromt(message,promtLocation,color){
document.getElementById(promtLocation).innerHTML=message;
document.getElementById(promtLocation).style.color=color;
}
<form id="form" style="color:white;">
<table>
<tr>
<td>
FullName :
</td>
<td>
<input type="text" placeholder="fullName" id="fullName"
onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa
</label> <br>
</td>
</tr>
<tr>
<td>
E-mail :
</td>
<td>
<input type="email" placeholder="email" id="email"/><label
id="emailPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<input type="password" placeholder="password" id="newPassWord"/> <label
id="PasswordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
Repeat Password :
</td>
<td>
<input type="password" placeholder="repeatedPassword"
id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="submit" id="submit" onclick="return validateName();"/> <label
id="submitPrompt"> </label><br>
</td>
</tr>
</table>
</form>
if (name && !name.length)
{
nameRequiredPromt("Name Is Required","fullNamePrompt","white");
return false;
}
first condition checks if name is null, second for checking if name.length is 0.
I would like to think that if you do something in the first id = "benodigheden" that there is something specific then a second rule is for id = "benodigheden" I also couldn't find anything on the internet. I think you need to have java but here is my knowledge still too small for.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
If I understand correctly you want an extra line (rule?) to appear once you enter text in it, and that this should happen for those inputs that have a sequence number in their id.
For this I suggest you include jQuery and add a script that detects input changes, and adds a new input if needed, with the next available sequence number:
$(document).on('keyup change input', 'input, textarea', function() {
if (!$(this).val().replace(/\s/g, '').length) {
// no text entered, so don't add line
return;
}
var id = $(this).attr('id');
// Extract name and linenumber from id
var res = id.split(/(\d+$)/);
if (res.length < 2) {
// No line number, so don't add line
return;
}
var newId = res[0] + (parseInt(res[1]) + 1);
if ($('#' + newId).length) {
// Not the last line, so don't add line
return;
}
// Add a line, and make it non-mandatory
$(this).clone()
.attr('id', newId).removeAttr('required')
.val('')
.insertAfter(this)
.before($('<br>'));
});
Although the above can be done in pure javascript it is much more cumbersome, and harder to deal with cross-browser issues.
You can see it work in this fiddle.
This is my html code for form
<form action="add.php" method="post">
<table style="border: 1px solid black;padding:20px;" cellspacing="1px">
</br>
</br>
<tr>
<td>Issue No:</td>
<td>
<input name="issueno" type="text" id="issueno" />
</td>
<td>Issue Date:</td>
<td>
<input name="issuedate" type="date" id="issuedate" />
</td>
</tr>
</br>
</br>
<tr></tr>
<tr>
<td>Item Code:</td>
<td>
<input name="itemcode" type="text" id="itemcode" />
</td>
<td>Description:</td>
<td>
<input name="des" type="text" style="width:250px; height:23px" id="desc" />
</td>
<td>Bal Quantity:</td>
<td>
<input name="bal" type="text" id="bal" />
</td>
</tr>
</br>
<tr>
<td>Issue Quantity:</td>
<td>
<input name="issuequ" type="text" id="issuequ" />
</td>
</tr>
</br>
<tr></tr>
<tr>
<td>Remark:</td>
<td>
<input name="remark" type="text" style="width:250px; height:23px" id="remark" />
</td>
</tr>
</br>
<tr>
<td colspan="6">
<center>
<input type="submit" value="submit">
</center>
</td>
</tr>
</table>
</form>
So I want to disable submit button if issue quantity is more than bal quantity and remain enable if issue quantity is less than bal quantity. And I am getting bal quantity on change of item code from ajax call. So how Do I do it??
<script>
/**
* the submit handler...
*/
function checkBeforeSubmit() {
// build your own condition ... :)
if(CONDITION == false) {
alert("You can not submit...");
}else {
// all is good ? so we submit the form ....
document.myForm.submit();
}
}
</script>
<form name="myForm" action="add.php" method="post">
...
<!-- i have changed the type from submit to button and add a handler to execute basic JavaScript function-->
<input type="button" value="submit" onClick="checkBeforeSubmit();">
</form>
Why not you try yo Add/remove disabled attribute to the submit button on qtty change.
This is my working code...
$('#issuequ').blur(function(){
var issueqty = $(this).val();
var bal = $('#bal').val();
if(issueqty > bal){
$('input[type="submit"]').attr('disabled','disabled');
} else if (issueqty < bal){
$('input[type="submit"]').removeAttr('disabled');
}
});
I am here disabling submit on change of issuequ otherwise remain active.
I need a message to pop up to tell the user that their enquiry has been submitted. The validation works, however I had to remove my old popup message as it was conflicting with the validation code. I need to know where to put the pop up message code in that exisiting javascript code that I am using to validate. The code i was using to make a pop up message was:
<script>
function EnquireButton() {
alert("Thank you for your enquiry!");
}
</script>
I'm sure it's simple enough, I have tried to implement it into the validation code, however it just reloads the page without showing the pop up.
HTML:
<form name="Contact_Us_Form" method="post" action="">
<table width="450px">
<p>One time Message</p>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30" placeholder="First Name and Last Name" title="Your name here" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="landline">Landline Number *</label>
</td>
<td valign="top">
<input type="text" name="landline" maxlength="50" size="30" placeholder="(01206)" title=" YourLandline Number" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="Email">Email Adress *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30" placeholder="you#yourdomain.com" title="Your email" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="house_number">House Number *</label>
</td>
<td valign="top">
<input type="text" name="house_number" maxlength="30" size="30" placeholder="House Number" title="Your House Number" required/>
</td>
</tr>
<tr>
<td>
<label for="postal_code">Post Code *</label>
</td>
<td>
<input type="text" name="postal_code" maxlength="30" size="30" placeholder="CO5 " title="Your Postal Code" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="">Enquiry</label>
</td>
<td valign="top">
<textarea name="Enquiry" maxlength="1000" cols="28" rows="6" placeholder="Write your enquiry here."></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button onclick="Enquirebutton()">Enquire</button>
<script>
$(document).ready(function (){
validate();
$('#full_name, #landline, #Email').change(validate);
});
function validate(){
if ($('#full_name').val().length > 0 &&
$('#landline').val().length > 0 &&
$('#Email').val().length > 0) {
$("input[type=Enquirebutton()]").prop("disabled", false);
}
else {
$("input[type=Enquirebutton()]").prop("disabled", true);
}
}
</script>
</td>
</tr>
</table>
</form>
Just add one property to form tag onsubmit="EnquireButton()"
that is
<form name="Contact_Us_Form" method="post" action="" onsubmit="EnquireButton()">
First, make your button a submit one:
<button type="submit">Enquire</button>
Then you can either use the onclick="Enquirebutton()" in your submit button or the onsubmit="Enquirebutton()" in your form.
Take a look at onsubmit Event for more information.
js: this is my angular js code ,my angular js code is successfully running but my form value is auto post when button event click.
$scope.toggle = function() {
if ($scope.id_value != null && $scope.id_value != '') {
$scope.loading = true;
var url = 'http://127.0.0.1:78/Attendence_App/home/get_data/' + $scope.id_value;
var result = $http.get(url);
result.success(function(response) {
$scope.name_value = response;
$scope.val_show = false;
$scope.loading = false;
});
result.error(function(data, status, headers, config) {
alert(data);
$scope.loading = false;
});
} else {
alert("ID can not be empty");
$scope.val_show = true;
}
};
this is my html code :
<form action="<?php echo base_url();?>home/post_value" method="POST">
<table class="table table-hover table-responsive">
<tr>
<td>Date</td>
<td colspan="2"> <input type="text" class="form-control" id="date" /></td>
</tr>
<tr>
<td>ID</td>
<td><input type="text" class="form-control" ng-model="id_value" id="id" /></td>
<td><button class="btn btn-primary btn-sm" ng-click="toggle()">Search</button></td>
</tr>
<tr ng-show="loading">
<td>
</td>
<td colspan="2">
<div class=""><img src="http://27.147.128.98/itopupprod3/Image/ajax-loader.GIF" id="loading" alt="loading" /></div>
</td>
</tr>
<tr ng-hide="val_show">
<td>
Name
</td>
<td colspan="2">
<div>
<label id="name" ng-bind="name_value"></label>
</div>
</td>
</tr>
<tr>
<td>Attendance Type </td>
<td colspan="2">
<label>
<input type="radio" name="optionsRadios" value="Yes">
Yes
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="No">
No
</label>
</td>
</tr>
<tr>
<td>
Login Time
</td>
<td colspan="2">
<input type="text" class="form-control" />
</td>
</tr>
<tr>
<td>
Logout Time
</td>
<td colspan="2">
<input type="text" class="form-control" />
</td>
</tr>
<tr>
<td></td>
<td class="text-align" colspan="2">
<input type="submit" value="Submit Info " class="btn btn-success btn-lg" />
</td>
</tr>
</table>
</form>
my form data is auto post when search button click,please give me some suggestion
If I understand you right, You have to use ng-submit (while submit is your submit function):
<form ng-submit="submit()" ng-controller="ExampleController">
..... fields, labels, yada yada yada...
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
for more information, go to https://docs.angularjs.org/api/ng/directive/ngSubmit