So I have a radio button whose model is needed by the function that is called when I hit the button below it:
<form class="form-inline" role="form">
<div class="form-group">
<div>
<input type="radio" ng-model="display" value="true">True <input type="radio" ng-model="display" value="false">False
</div>
<button>
....
</button>
</div>
</form>
However, the results never come back right. If I go in and debug the code, within the javascript every single time the damn value of $scope.display is "true". It doesn't have to do with me not using ng-value, based on what I have read about it, right? Previously, this element worked correctly and was not in a form/form-inline/form-group, but a simple div. Does that have something to do with it?
it does work here is a pluncker: pluncker
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="display" value="true">true
<input type="radio" ng-model="display" value="false">
false
<br>
display = {{display}}
Related
Hi I want to get the valid or invalid state of all the forms outside the form tag i.e suppose if any of the form is not valid error message should be shown. myform.$invalid is not working for all forms and is not updating
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm">
<input type="text">
</form>
</div>
<div ng-if="myform.$invalid">Fill all fields</div>
It is better to have all the <input> elements on the same form:
<form name="myForm">
<div ng-repeat="a in [0,1,2,3,4]">
<input type="text" name="myInput{{a}}" ng-model="itemArr[$index]" required />
</div>
</form>
<div ng-show="myForm.$invalid">Fill all fields</div>
$scope.itemArr = [];
Also it is important that each <input> element has an ng-model directive.
For more information, see
AngularJS Developer Guide - Forms
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
I am having the same concern here, where I am creating multiple instance of form with same format (it's a table for multiple row input). I have been trying adding the $index to the form name but then I am facing issue to access the form_$index inside ng-messages and ng-click
example:
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm_{{ ::$index }}">
<input type="text">
</form>
</div>
<div ng-if="myform_{{ ::$index }}.$invalid">Fill all fields</div>
Wondering if anyone else can propose a solution for this use case.
On an angularJS application I have a <form> with a group of radio buttons, I want to force the user to select an option before he validates the form.
Here a simplify version of my HTML code :
<form name="myForm">
<label ng-repeat="option in options">
{{option.name}}
<input type="radio" name="animalOptions" value="option.id" required>
</label>
<button type="submit" ng-disabled="!myForm.$valid">
SUBMIT
</button>
<h1>
{{myForm.$valid}}
</h1>
</form>
I reproduced my issue in this example :
JSfiddle
Why does it prints true instead of false ?
You need to set ng-model to keep the selected value, e.g. $scope.selected (required needs ng-model to work). Also a function is needed to set the model on every click. Validation can be done like this:
<label ng-repeat="option in options">
{{option.name}}
<input type="radio" name="animalOptions" value="option.id" ng-model="selected" ng-click="toggle(option.id)" ng-required="!selected">
</label>
ng-required="!selected" ensures that user has selected an option
Check this example: fiddle example
You need ng-model to set validity of your form input(s).
And use
required
like this in Angular way :
ng-required="true"
Something like this :
<form name="testForm" ng-submit="yourSubmitFunction();" novalidate>
<input type="radio" name="radio" ng-model="rr" value="optionA" ng-required="true"/> optionA
<input type="radio" name="radio" ng-model="rr" value="optionB" /> optionB
<button type="submit" >Submit</button>
</form>
I am trying to create a form for users who have forgotten their login data. There are three radio buttons and when the user clicks on a radio button and clicks 'OK', the whole content hides and a new form is shown for the option they have chosen. Below the html:
<div id="MainContent">
<form ng-submit="">
<label><input type="radio" name="dataForgotten" id="unForgotten"/>Forgot username</label>
<label><input type="radio" name="dataForgotten" id="pwForgotten"/>Forgot password</label>
<label><input type="radio" name="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label>
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>
</div>
How can I make this happen with Angular? I have very little experience with Angular, so I'd really appreciate the help.
Thanks in advance!
There are two ways to achieve the desired effect.
Using ng-if
Using ng-show or ng-hide
The difference is in this, ng-if removes/recreates a portion of the DOM tree based on a Boolean expression i.e. true or false values.
On the other hand ng-show just hides the portion based on the value of the expression. It sets the display of that the part of the DOM to none.
For your case I would favor ng-if so that only the required part of the DOM is loaded into the app at the right time. Some have argued that by changing expressions on the web-inpsector, one could enable or disable an ng-show block.
Here is the Edited code. I have included a plunker. here is the link http://plnkr.co/edit/JB4LAgo9rqtPnPZHpwWr?p=preview
<label><input type="radio" value="unForgotten" ng-model="dataForgotten"/> Forgot username</label>
<br/>
<label><input type="radio" value="pwForgotten" ng-model="dataForgotten"/>Forgot password</label>
<br/>
<label><input type="radio" value="bothForgotten" ng-model="dataForgotten"/>Forgot both username and pw</label>
<div ng-if="dataForgotten == 'unForgotten'">
<!-- If Username Forgotten then Content goes here-->
Username Forgotten
</div>
<div ng-if="dataForgotten == 'pwForgotten'">
<!-- If Password Forgotten then Content goes here-->
Password Forgotten
</div>
<div ng-if="dataForgotten == 'bothForgotten'">
<!-- If Both Forgotten then Content goes here-->
Both Forgotten
</div>
Here is the explanation on the docs as regards ng-if
https://docs.angularjs.org/api/ng/directive/ngIf
While here is the documentation for ng-show https://docs.angularjs.org/api/ng/directive/ngShow
You can use ng-show for this. The directive evaluates a boolean condition and shows the content when true, so to hide one section and show another you just need the inverse.
<div ng-show="!completed">
First Section
</div>
<div ng-show="completed">
Second Section
</div>
On your $scope, you'll have a bool completed property (or whatever you want to call it) and you can change this in your controller when the button is clicked using ng-click.
<button ng-click="changeCompleted()">Show/Hide</button>
Controller:
$scope.changeCompleted = function(){
$scope.completed = !$scope.completed;
}
*Note you could also shorten this part by performing the assignment directly in the ng-click directive.
Here's a working jsfiddle example.
ng-show docs
Also, if you'd like to make sure a radio button is checked before allowing the button to be clicked, have a look at ng-disabled which allows you to conditionally disable/enable your button.
If you want to have it in plain javascript:
Close
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
<div id="MainContent">
<form ng-submit="formsubmit(dataForgotten)">
<label><input type="radio" ng-model="dataForgotten" id="unForgotten"/>Forgot username</label>
<label><input type="radio" ng-model="dataForgotten" id="pwForgotten"/>Forgot password</label>
<label><input type="radio" ng-model="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label>
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>
<form name="secondForm" ng-show="submited">
</form>
</div>
//controller code
$scope.submited=false;
$scope.formsubmit = {
//form value insert code here
$scope.submited=true;
};
I have the following code setup:
http://jsfiddle.net/bABHU/2/
Had to change it a little bit to get it all on jsfiddle but the problem i'm having is the data from the first from gets put into the query string to send off to the ajax call, but the form elements generated after that (which comes from a JSON call) don't get submitted when clicking the next button again.
So when you get to the second question how can I submit the 'answer' input that was generated. - see the console for the outputs.
Hope that makes sense.
Any help is appreciated.
Thanks.
This is happening because you are replacing your entire <form> element with the new HTML content from question 2. Replace $('.FinderOptionsInner').html with $('#formStep').html
See http://jsfiddle.net/M3eZp/1/
When you replace the markup for findOptionsInner, you obliterate the form itself. Hence it not serializing. Also, you have no close tag for your form.
<form action="" method="post" name="formStep" id="formStep">
<div class="FinderOptionsInner">
<p>
<label class="label_check">
<input type="radio" name="answer" value="1" id="answer_0" />
Answer 1</label>
<br />
<label class="label_check">
<input type="radio" name="answer" value="2" id="answer_1" />
Answer 2</label>
<br />
</p>
</div>
</form>
<div class="nextButton-step1 nextButton">Next
</div>
Works just fine (notice that I've also fixed the close tags for form and the div at the bottom).
I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.
You should do the getcitybyzip and getstatebyzip in the form onSubmit.
Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?