I am new to AngularJS. So, I have a form and buttons that I have created. But, for some reason, my form is not disabled. All I want to do is when the user comes to the page, I want the form to be disabled. Thank you.
Here is my code.
<a class="back" href="#/user">Back</a>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
Edit
</button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>
<div class="people-view">
<h2 class="name">{{audience.firstName}}</h2>
<h2 class="name">{{audience.lastName}}</h2>
<span class="title">{{audience.email}}</span>
<span class="date">{{audience.website}} </span>
</div>
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="audience.firstName">
<br>
<b>Last Name:</b>
<input type="text" ng-model="audience.lastName">
<br>
<b>Email:</b>
<input type="email" ng-model="audience.email">
</fieldset>
</form>
</div>
</div>
JS
app.controller('MainCtrl', function($scope) {
$scope.inactive = true;
}
Is this close to what you're looking for?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="">
Click here to disable all the form fields:<input type="checkbox" ng-model="all"><br>
<br>
<a class="back" href="#/user">Back</a>
<button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive"> Edit </button>
<button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>
<div class="people-view">
<h2 class="name"> {{audience.firstName}}</h2>
<h2 class="name">{{audience.lastName}}</h2>
<span class="title">{{audience.email}}</span>
<span class="date">{{audience.website}} </span>
</div>
<div class="list-view">
<form>
<fieldset ng-disabled>
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="audience.firstName" ng-disabled="all">
<br>
<b>Last Name:</b>
<input type="text" ng-model="audience.lastName" ng-disabled="all">
<br>
<b>Email:</b>
<input type="email" ng-model="audience.email" ng-disabled="all">
</fieldset>
</form>
</div>
</div>
Please take a look at this JSFiddle!
https://jsfiddle.net/rickydam/fstkcs26/
Wrap all your fields in fieldset and use ngDisabled directive like this:
<fieldset ng-disabled="inactive"> ... input fields ...</fieldset>
It will automatically disable all inputs inside the fieldset.
Then in controller set $scope.inactiveto true.
Why not use the native html attribute?
<input type="text" ng-model="audience.firstName" disabled>
Or you can use the ng-disabled directive.
<input type="text" ng-model="audience.firstName" ng-disabled="inactive">
Related
<li>
<div class="destination">
<img src="image/destination/chamba.jpg" alt="">
<div class="destinationDetails">
<h2>Chamba <h2>
<h3>Starting From Rs. 2500 <h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<li>
<div class="destination">
<img src="image/destination/parvati.jpg" alt="">
<div class="destinationDetails">
<h2>Parvati Valley <h2>
<h3>Starting From Rs. 2500 <h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Package</b></label>
<input type = "text" id="test2" name "teste2">
<button type="button" onclick="MyFunction()">Click To Fill Up</button>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I am using This Code To Make A Booking Page. I Want To Fill Up The Package Field Automatically when someone clicks "book now" or using a button to fill up the field by clicking on it.
For Example: If I click the "book now" button in the first "li", the package filled should be automatically filled up as "Chamba" and If I Click The "book now" button in second "li" the packages field should be automatically filled as "Parvati Valley".
Is there any way to do so...??
Thanks For Your Help In advance.
Add a function and set appropriate value. Consider this for learning purpose only.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function setPackage(packageName) {
document.querySelector('#test2').value = packageName;
}
<li>
<div class="destination">
<img src="image/destination/chamba.jpg" alt="">
<div class="destinationDetails">
<h2>Chamba
<h2>
<h3>Starting From Rs. 2500
<h3>
<button onclick="setPackage('Chamba');document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<li>
<div class="destination">
<img src="image/destination/parvati.jpg" alt="">
<div class="destinationDetails">
<h2>Parvati Valley
<h2>
<h3>Starting From Rs. 2500
<h3>
<button onclick="setPackage('Parvati Valley');document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Package</b></label>
<input type="text" id="test2" name "teste2">
<button type="button" onclick="MyFunction()">Click To Fill Up</button>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
Hello I have a problem with this following code :
<form id="signon_form" method="post" action="r1.php" class="form-signin" name="">
<div id="error" class="error">
<img src="images/error_button.png" /> <span id="error_message"></span>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="username_input_label" class="user_label" for=
"username_input" style=""></label> <input id="username_input" name=
"username" type="text" class="input_fields username_input" autocorrect=
"off" autocapitalize="off" autocomplete="off" tabindex="1" placeholder="example#email.ca"/>
</div>
<div class="input_info help_icon">
<a id="help_icon" class="help_link" href="javascript:;" data-toggle="modal" data-target="#myModal" tabindex="3">
<img src="images/icons/helpIcon.png"><br/>
Help
</a>
</div>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="password_input_label" class="user_label" for=
"password_input" style="">Password</label> <input id="password_input"
name="password" type="password" class="input_fields" tabindex="2" />
</div>
<div class="input_info">
<button type="button" id="account_number_popover_password" class=
"account_number_popover ic icon-shaw-question" data-toggle="modal"
data-target="#myModal"></button>
</div>
</div>
<div class="clearfix"></div>
<div id="checkbox-section" class="checkbox-section">
<div id="checkbox" class="checkboxFive">
<input type="checkbox" id="" class="persistent_check" name="" checked=
"checked" tabindex="4"/> <label id="checkboxMask" class="ic" for=""></label>
</div>
<div id="checkbox-label" class="checkbox-label">
<label>Remember Shaw email</label>
</div>
</div>
<div style="text-align:center">
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class=
"button button_disabled" tabindex="5">Sign in</button>
</div>
<div id="description-section" class="description-section">
<center>
<div id="forgot" class="description_one">
To recover your email address or to reset your password visit the Internet section in My Account.
</div>
<div id="create_new_account" class="description_two hidden-xs hidden-sm hidden-md">
<span class="dont-have-account-phone">Don't have an account?</span>
<a target="_self" data-event="navigation-element" data-value=
"signon|body|create-one-now-link" id="create_one_now" href=
"#"><span class=
"dont-have-account-desktop">Don't have an account?</span>
<span class="create-one-now-url">Create one now.</span></a>
</div>
</center>
</div><input type="hidden" id="anchor" name="anchor" value="" />
</form>
you see that I have an action in the form which is r1.php and the button has a onclick="location.href='r1.php'" if I delete it the Sign In button doesn't work I want to get rid of it can you help me guys I'm a begginer and experimenting with website's source code to learn a little please if you could help me I'll be so greatfull
What you are looking for is an actual form submission, rather than a simple redirection.
Instead of:
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class="button button_disabled" tabindex="5">Sign in</button>
You need an input type of submit:
<input type="submit" value="Submit" id="signin_submit">
This tells the button to actual POST the data. Note that you may need to slightly tweak your CSS to give the desired display.
Hope this helps!
I use bootstrap with angular, and I disabled bootstrap's validation, angular still doesn't work. It seems that I already set everything.
My code likes below, every input's validation didn't.
<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">
<div class="input-group">
<div class="input-group-addon">True Name</div>
<input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
</div>
<div class="input-group">
<div class="input-group-addon">Nickname</div>
<input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
</div>
<div class="input-group">
<div class="input-group-addon">Mobilenumber</div>
<input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
</div>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="id_class in IDCLASSES">
<a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
</div>
<!-- /input-group -->
<br>
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-default" value="取消" type="button" ng-click="cancel_new_people()" />
</form>
What do you mean by input doesn't work?
Post your code of related controller please, because it is not clear what validation are you doing. If you have novalidate you should organize validation in your angular controller or HTML, e.g.:
<div ng-show="editting_people.realname.length<4">
Any error message here.
</div>
I was using a foundation for apps button in a form. But ng-disabled isn't working with it.
HTML:
<form name="loginForm" novalidate>
<div class="grid-block">
<div class="grid-content">
<input type="text" placeholder="Username" ng-model="formData.username" required/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<input type="password" placeholder="Password" ng-model="formData.password"/>
</div>
</div>
<div class="grid-block">
<div class="grid-content">
<a class="button" type="button" href="#" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</a>
</div>
</div>
{{loginForm.$invalid}}
</form>
When I use a normal HTML button it is working.
That's not a button it's a link href, if you use a button tag it works fine.
<button class="button" type="submit" ng-disabled="loginForm.$invalid" ng-click="userLogin()">Login</button>
I've a form but it doesn't pass the parameters 'url' and 'USERNAME' to the next page. Is there something wrong?
I must use <button> instead of <input> for styling issues.
Here is the form:
<form action="/confirmation/index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
</div>
</form>
email_btn should be of type="submit" instead of type="button", so rather:
<button type="submit">Send me the results</button>
see here:
http://www.w3schools.com/tags/tag_button.asp
This should work with a submit Button!
(The extra php is to show that it works!)
<?php
if (isset($_POST['submitted'])) {
echo "form submitted";
}
?>
<form action="index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
<button name="submitted" type="submit">Send me the results</button> //Submit Button
</div>
</form>