I am trying to disable the button if all inputs are not populated, If they are populated then the button is enabled.
I am also trying to print text under the input if no text is present in the input field, but only if user clicks on the disabled button.
My question
How do I alter my code to enable my button once text is present in all the input fields and if they are not and the user clicks on the disabled button show
<div ng-if="!myForm.Lname.$invalid">
<p>This field is required</p>
</div>
but only if text is not present in the input fields.
FULL CODE
<div class="form-group">
<label for="first-name">First Name*</label>
<input type="text" class="form-control" name="Fname" placeholder="Enter first name" ng-model="formData.Fname" ng-required="true">
<div ng-if="!myForm.Fname.$invalid">
<p>This field is required</p>
</div>
</div>
<div class="form-group">
<label for="last-name">Last Name*</label>
<input type="text" class="form-control" name="Lname" placeholder="Enter last name" ng-model="formData.Lname" ng-required="true">
<div ng-if="!myForm.Lname.$invalid">
<p>This field is required</p>
</div>
</div>
<div class="form-group">
<label for="email">Email*</label>
<input type="email" class="form-control" name="email" placeholder="Enter a valid email address" ng-model="formData.email" ng-required="true">
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<button ui-sref="form.select" class="btn btn-block btn-info" ng-disabled="!myForm.Fname.$valid">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</button>
</div>
</div>
You can do this by creating your own directive.
I hope this will help you.
Here's a demo on Jsfiddle
HTML:
<div ng-app="sampleapp">
<div ng-controller="samplecontoller" ng-init="showData()">
<form name="form" disable-btn ng-submit="submitForm()">
<div>
<label>First Name:</label>
<input type="text" placeholder="First Name" ng-model="model.name" required>
</div>
<div>
<label>Last Name:</label>
<input type="text"placeholder="Last Name" ng-model="model.lname" required>
</div>
<div>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
Related
<form class="address-form" id="form" name="addressForm">
<div class="form-container">
<div class="form-input abc">
<label>Full name</label>
<input class="form-input-name" type="text" name="full_name" placeholder="Enter your full name" maxlength="50" value="{{ customer.name }}" required>
<div class="input-error hidden" id="input-error-name">Please enter your name</div>
</div>
<div class="form-input abc">
<label>Email</label>
<input class="form-input-email" type="email" name="email" placeholder="Enter your email" maxlength="50" value="{{ customer.email }}" required>
<div class="input-error hidden" id="input-error-email">Please enter your email</div>
</div>
<div class="form-input abc">
<label>City</label>
<input class="form-input-city" type="text" name="city" placeholder="Enter your city" maxlength="50" required>
<div class="input-error hidden" id="input-error-city">Please enter your city</div>
</div>
<div class="form-input abc">
<label>Address</label>
<textarea name="address" class="form-input-address" placeholder="For example: 92 Nguyen Huu Canh street" required></textarea>
<div class="input-error hidden" id="input-error-address">Please enter your address</div>
</div>
<div class="form-check abc">
<label></label>
<input class="tickbox" type="checkbox" onclick="checkTickbox()" id="flexCheckDefault" style="cursor: pointer" name="default">
<label class="form-check-label" for="flexCheckDefault" style="cursor: pointer; font-weight: 500; font-size: 12px">
Set as default address
</label>
</div>
<div class="buttons-container abc">
<label></label>
<div class="button-group">
<button class="cancel-button btn btn-light" id="cancel" formnovalidate>Cancel</button>
<button type="submit" class="create-update-button btn btn-primary" id="create-update">Ship to this address</button>
</div>
</div>
</div>
</form>
I don't know why my code is acting weird, the required attribute works on the cancel button, but doesn't validate the form when I pressed the submit button. However, the submit button actually works when I commented out the cancel button. I currently have an event listener for the submit button which will send the form's data via a POST request when clicked, I don't know if that's the problem
By default button type is submit , since cancel button does not have type defined so it will work as submit . Add button type button to cancel button
<button type = 'button' class="cancel-button btn btn-light" id="cancel">Cancel</button>
the The required attribute only works with types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. so you should specified the type in here :
<textarea name="address" class="form-input-address" placeholder="For example: 92
Nguyen Huu Canh street" required>
</textarea>
Hi I have a website which was developed using php and it contains contact form where users submit their data. Down below is the code for contact form
<div class="form">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm" >
<div class="form-row">
<div class="form-group col-lg-6">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
</textarea>
<div class="validation"></div>
</div>
<p style="-webkit-margin-collapse: discard;">Captcha: </p>
<p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
<div class="validation"></div>
<div id ="ss" class="text-center" >
<button type="submit" value="submit" name="submit" title="Send Message" >SUBMIT</button>
</div>
</form>
</div>
After submitting the form I want to clear the fields and I tried the below code
<script>
function myFunction() {
document.getElementById("innov-contact").reset();
}
</script>
From the above when I try to save the form it refreshes the fields but it does not save in database and even I tried the below code
<script type="text/javascript">
$("#innov-contact")[0].reset();
</script>
But it does not clear the form and even I tried the below code
$(document).ready(function() {
var options = {
target: '#output1',
clearForm: true // clear all form fields after successful submit
};
// bind form using 'ajaxForm'
$('#innov-contact').ajaxForm(options);
});
Please let me any other method to clear the form
you can use trigger() to reset the form with jQuery
$('#form_id').trigger("reset");
This is from the jQuery Form Plugin docs.
$('#innov-contact').clearForm();
If you want to clear any specific fields.
$('#innov-contact #email').clearFields();
$('.form-control').val('');
This will clear all form fields with the class form-control.
Add 1 input type reset in form and click after ajax request:
$(document).ready(function() {
$('#innov-contact').submit((e) => {
e.preventDefault();
//Ajax...
$("#reset").click();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm">
<div class="form-row">
<div class="form-group col-lg-6">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
</textarea>
<div class="validation"></div>
</div>
<p style="-webkit-margin-collapse: discard;">Captcha: </p>
<p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
<div class="validation"></div>
<div id="ss" class="text-center">
<button type="submit" value="submit" name="submit" title="Send Message">SUBMIT</button>
</div><input type="reset" id="reset">
</form>
use this $("#fname").val(""); it will clear the value in the 'fname' input field. Like this you can clear every field.
Hi I am new to Angular Js and I am trying to make a Login page where I Have three forms which are as follows:
Login Form
Create New Account form
Forgot password Form.
All this forms are present in one HTML Page.HTML page for the login(login.html) is as follows:
<form class="login-form" ng-submit="submit()" method="POST" ng-controller="SignInController" >
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Addresss" name="email" ng-model="email_id"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions" >
<button type="submit" class="btn btn-success uppercase">Login</button>
Forgot Password?
</div>
<div class="create-account">
<p>
Create an account
</p>
</div>
</form>
<form class="forget-form" method="post" ng-controller="ForgetPassword" ng-submit="passwordGenerator()"> <!-- action="#"-->
<h3>Sign In</h3>
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Address" name="email" ng-model="ForgetPassEmailId" />
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase btn-block">Reset my password</button> <!--type="submit" -->
</div>
</form>
<form class="register-form" action="select_pricing.html" method="post">
<h3>Create Account</h3>
<p class="hint">
Enter your personal details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Full Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Full Name" name="fullname" />
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email Address" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="check">
<input type="checkbox" name="tnc" /> I agree to the <a href="#">
Terms of Service </a> & <a href="#">
Privacy Policy </a>
</label>
<div id="register_tnc_error">
</div>
</div>
<div class="form-actions">
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase btn-block">Create</button>
</div>
</form>
The Angular Controller for the Forget password is as follows
var myApp = angular.module('Login_Upquire_Angular',[]);
myApp.controller("ForgetPassword",['$scope',function($scope){
$scope.passwordGenerator=function(){
var email_id=$scope.ForgetPassEmailId;
if (email_id=="abc#gmail.com"){
console.log("Reset Request is accepted");
window.location="/login.html";
}
}
}]);
As you can see based on my Angular js File, I want to check whether the given password matches with abc#gmail.com, if yes then it should print on my console "REset Request is accepted" and take me back to login page(/login.html) and to the form element namely login-form. Yet I am getting the following error
Cannot POST /login.html
Can somebody help me with this? I have tried but couldn't find a solution for it.
You'll have to do some asynchronous validation. Something like this: http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/
I am working on a angular form and this is my first experience with Angular Form. I am able to submit the form successfully. But I want to do 2 more things:
Validate the form.
Hide the form if valid and show a div with confirmation.
Right now am able to hide the form using ng-click & ng-hide properties of the form. But I want this hiding to happen based on the validation. I am looking to validate email, by min & max length & required.
The form code:
<form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" >
<div class="col-md-12"><h4 class="col-md-12" >What do you think?</h4></div>
<div class="form-group col-md-12">
<div class="row">
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option1" >
Option1
</label>
</div>
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option2" >
Option2
</label>
</div>
</div>
</div>
<div class="col-md-12 contact">
<h4 class="col-md-12" >Want us to contact you?</h4>
<div class="form-group">
<div class="textbox col-md-12">
<label>Name </label>
<input type="text" ng-model="formData.name" >
</div>
<div class="textbox col-md-12">
<label>Email </label>
<input type="text" ng-model="formData.email" >
</div>
<div class="textbox col-md-12">
<label>Phone </label>
<input type="text" ng-model="formData.phone" >
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<div class="col-md-12 contact">
<button type="submit" class="btn btn-primary" ng-click="showConfirm = ! showConfirm">Submit</button>
</div>
</div>
</div>
</form>
<div class="col-md-12 confirmation" ng-show="showConfirm">
<h2 >Thanks alot for your feedback.</h1>
</div>
The js code:
$scope.processForm = function() {
$http.post('http://localhost/api/node.json', $scope.formData)
.success(function(data) {
$scope.formData = {};
$state.go('main.start');
});
};
Give your form a name and on ng-submit, check the validity of the form with the $valid property.
<form id="signup-form" name="signUpForm" novalidate ng-submit="signUpForm.$valid && processForm()" ng-hide="showConfirm">
Add validation attributes to your inputs. ex:
<input type="text" ng-model="formData.email" required>
Then once the form is submitted, set the showConfirm property to true
Read more about validation here https://docs.angularjs.org/guide/forms and http://www.ng-newsletter.com/posts/validations.html
Something similar to the following should work.
HTML
<form name="signup-form" class="signup-form" novalidate method="post" ng-submit="processForm()" ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid" >
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control input-lg" name="username" placeholder="Username" ng-model="user.username" ng-required="true">
<label>Email</label>
<input type="email" class="form-control input-lg" name="email" placeholder="Email" ng-model="user.email" ng-maxlength="20" ng-minlength="10" ng-required="true">
</div>
</form>
<div ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid">
</div>
I have PHP Contact form which has a checkbox that a user upon registration has a option if he wants to subscribe to the newsletter or not, but I want to use a Mailchimp to capture the email address and put into a list. Also I'm using an javascript once the form is submit.
How can I make a condition if a checkbox is check, code from my form and the mailchimp will execute at the same time?
This is my form
<form role="form" id="feedbackForm">
<div class="form-group">
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
</div>
<div class="form-group">
<input type="text" class="form-control" id="company_name" name="company_name" placeholder="Company">
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group">
<textarea rows="10" cols="100" class="form-control" id="message" name="message" placeholder="Message"></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group">
<label for="selectbasic">How did you hear about us?</label>
<select id="selectbasic" name="selectbasic" class="form-control">
<option>Select</option>
<option>Search engine</option>
<option>Microsoft DPE</option>
<option>Microsoft event</option>
<option>Social media</option>
<option>Word of mouth</option>
<option>Other</option>
</select>
</div>
<img id="captcha" src="library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" />
Show a Different Image<br/>
<div class="form-group" style="margin-top: 10px;">
<input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="For security, please enter the code displayed in the box." />
<span class="help-block" style="display: none;">Please enter the code displayed within the image.</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="emailUpdates" name="emailUpdates" value="Yes">
Please keep me informed of product updates and news
</label>
</div>
<span class="help-block" style="display: none;">Please enter a the security code.</span>
<button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg" style="display: block; margin-top: 10px;">Send Feedback</button>
</form>
CODE FOR THE CHECKBOX -
<div class="checkbox">
<label>
<input type="checkbox" id="emailUpdates" name="emailUpdates" value="Yes">
Please keep me informed of product updates and news
</label>
</div>
PHP Script for the checkbox
<?php
if ($_POST['emailUpdates'] == 'Yes') {
//EXECUTE MAILCHIMP CODE
}
?>
Just leave the value attribute of the checkbox blank, if it is checked it will submit a value of on otherwise it will submit nothing
<?php
if (isset($_POST['emailUpdates'])) {
//EXECUTE MAILCHIMP CODE
}
?>
<input type="checkbox" id="emailUpdates" name="emailUpdates"/>