I am building an AngularJS app. I have a problem with a form that is filled with ng-value.
The input field is filled in, the user can see text but when the user presses the 'change' button it becomes undefined. Any thoughts?
My controller code:
// Fictional data it wineById will be a JSON object.
$scope.wineById = {"id":"4","name":"fdfvs1","percentage":"vcxz1"}
$scope.edit = function () {
var wine = {
id:$scope.wineById.id,
name:$scope.name,
percentage:$scope.percentage
};
console.log($scope.name, $scope.percentage);
};
HTML:
<form novalidate ng-submit="edit()">
<label>ID wine: <input type="text" ng-value="wineById.id" ng-model="id" ng-disabled="true"></label> <br>
<label>Name wine: <input type="text" ng-value="wineById.name" ng-model="name"></label> <br>
<label>Percentage wine: <input type="text" ng-value="wineById.percentage" ng-model="percentage"></label> <br>
<input type="submit" value="Change">
</form>
Case 1:
Got existing input in my fields. Pressing the button without changing the input data in the fields. Everything becomes undefined.
Case 2 (the one that works):
Got existing input in my fields. Changing all the fields with different data and pressing the button. Everything is changed.
How can I fix case 1?
Change your html as following if you still want to use ng-value for whatever reason:
<form novalidate ng-submit="edit()">
<label>ID wine:
<input type="text" ng-init="id=wineById.id" ng-model="id" ng-value="wineById.id" ng-disabled="true">
</label>
<br>
<label>Name wine:
<input ng-init="name=wineById.name" type="text" ng-value="wineById.name" ng-model="name">
</label>
<br>
<label>Percentage wine:
<input ng-init="percentage=wineById.percentage" type="text" ng-value="wineById.percentage" ng-model="percentage">
</label>
<br>
<input type="submit" value="Change">
</form>
Better approach would be to use just ng-model (unless you don't want two way binding)
<form novalidate ng-submit="edit()">
<label>ID wine:
<input type="text" ng-model="wineById.id" ng-disabled="true">
</label>
<br>
<label>Name wine:
<input type="text" ng-model="wineById.name">
</label>
<br>
<label>Percentage wine:
<input type="text" ng-model="wineById.percentage">
</label>
<br>
<input type="submit" value="Change">
</form>
Live Demo
Why you are using ng-value, angular supports two way binding, ng-model is enough for binding data.
<form novalidate ng-submit="edit()">
<label>ID wine: <input type="text" ng-model="id" ng-disabled="true"></label> <br>
<label>Name wine: <input type="text" ng-model="name"></label> <br>
<label>Percentage wine: <input type="text" ng-model="percentage"></label> <br>
<input type="submit" value="Change">
</form>
Related
Below is the code of the form using which I'm trying to fetch the value for the query string.
<form id="form1">
<label for="allthesewords"> all these words</label>
<input type="text" id="allthesewords">
<br>
<label for="thisexactwordphrase">this exact word phrase</label>
<input type="text" id="thisexactwordphrase">
<br>
<label for="anyofthese">any of these</label>
<input type="text" id="anyofthese">
<br>
<label for="noneofthese">none of these</label>
<input type="text" id="noneofthese">
<br>
<input type="submit" value="Advance Search" onClick="advanceSearch()">
</form>
This one is the javascript function where I'm building my query string.
function advanceSearch(){
document.getElementById("form1").action="https://www.google.com/search?as_q="+document.getElementById("allthesewords").value+"&as_epq="+document.getElementById("thisexactwordphrase").value+"&as_oq="+document.getElementById("anyofthese").value+"&as_eq="+document.getElementById("noneofthese").value;
return true;
}
So, the actual problem is while clicking on the submit button it must redirect to this url
https://www.google.com/search?as_q=Harvard%20univeristy%20students&as_epq=students%20of%20Harvard%20Univeristy&as_oq=Harvard&as_eq=almamater
However, when I run my code it just redirects to this url:
https://www.google.com/webhp.
Thanks in advance!!!!!
<form action="https://www.google.com/search">
<p>Find page with</p>
<input class="input_bar" type="text" name="as_q" placeholder="all these words">
<input class="input_bar" type="text" name="as_epq" placeholder="this exact word or phrase">
<input class="input_bar" type="text" name="as_oq" placeholder="any of these words">
<input class="input_bar" type="text" name="as_eq" placeholder="none of these words">
<input id="btn" type="submit" value="Advance Search">
</form>
Use it!
I am starting to use Angular JS and I tryng to validate a form. But I don't know how to validate some inputs if the Checkbox is checked.
<body>
<div ng-app="">
<form name="myForm">
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span><br>
<input name="myphone" ng-model="myphone"><!--NO REQUIRED--><br>
Check to Validate:
<input type="checkbox" ng-model="myVar"><br>
<input type="text"><!--VALIDATE IF checkbox is checked--><br>
<input type="text"><!--VALIDATE IF checkbox is checked--><br>
</form>
<input type="submit">
</div>
And how to disable the input if something is incorrect?
You can use the ng-required directive.
<div ng-app="">
<form name="myForm">
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is
required.</span><br>
<input name="myphone" ng-model="myphone"><!--NO REQUIRED--><br>
Check to Validate:
<input type="checkbox" ng-model="myVar"><br>
<input type="text" ng-if="myVar"> <!-- this show ups -->
<input type="text" ng-required="myVar">
<span ng-show="myForm.$invalid">
<input type="text" ng-required="myVar">
<span ng-show="myForm.$invalid">
</form>
<input type="submit">
</div>
CONTROLLER
In the controller you can check based on the model asigned
$scope.submitFunction = function(){
if($scope.myVar){
//do stuff
}
}
Hi I have a little problem
I have 3 forms that send different parameters via GET to another page and i have 3 inputs outside all forms that I want to send with form that user chooses to submit.
Inputs with names one, two and three must be send with 1 of that forms.
This is my code:
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<form action="process.php" method="get">
<input type="text" name="name">
<input type="submit" value"Process by name">
</form>
<form action="process.php" method="get">
<input type="text" name="adress">
<input type="submit" value"Process by address">
</form>
<form action="process.php" method="get">
<input type="text" name="number">
<input type="submit" value"Process by number">
</form>
All I want to is, when someone submit any form, that three inputs name="(one,two,three)" are send with rest param of form.
EDIT: Just 1 form is submitted!
If you put everything into one form, and use a hidden type value, you can ensure that all values are passed on submit.
<form action="process.php" method="get" id="form1">
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<input type="text" name="name">
<input type="submit" name="btnName" value="Process by name">
<input type="text" name="adress">
<input type="submit" name="btnAddress" value="Process by address">
<input type="text" name="number">
<input type="submit" name="btnNumber" value="Process by number">
</form>
Since you are submitting to a PHP page, you can check which of the buttons was pressed with the following code...
if (isset($_POST['btnName'])) {
//do something with name
} else if (isset($_POST['btnAddress'])) {
//do something with adress
} else if (isset($_POST['btnNumber'])) {
//do something with number
}
I have multiple forms that point to the same site where the datas are stored into a sql database. For each form the user has to fill out a textfield which is separated from the form. I don't understand how i could send for each form the same value from the separated textfield.
<form name="user" action="http://hello.xy/login.php" method="GET">
<input type="text" value="User" name="provider" hidden>
Name: <br/>
<input type="text" value="" name="user_name"><br/>
Email: <br/>
<input type="text" value= "" name="user_email"><br/>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="submit" value="submit">
</form>
<form name="google" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Google" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/google.png" value="submit">
</form>
<form name="twitter" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Twitter" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/twitter.png" value="submit">
</form>
<form name="facebook" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Facebook" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/facebook.png" value="submit">
</form>
Separated textfield, but on the same site:
<form name="comment" >
<textarea name="input" ></textarea>
</form>
I hope somebody can help me.
Thanks,
Misch
You can't send data from two forms at the same time without JavaScript.
The solution without JavaScript is to use one form:
<form action="http://hello.xy/login.php" method="GET">
<textarea name="comment"></textarea>
<label for="user_name">Name</label>
<input type="text" name="user_name" id="user_name">
<label for="user_email">Email</label>
<input type="text" name="user_email" id="user_email">
<button type="submit" name="provider" value="User">Submit</button>
<input type="image" src="images/logos/google.png" name="provider" value="Google">
...
</form>
Update
Since you're using jQuery, use:
<textarea name="comment" class="comment-visible"></textarea>
And include this in each form:
<input type="hidden" name="comment" class="comment-hidden">
jQuery:
$(document).on('input', '.comment-visible', function(){
$('.comment-hidden').val( $(this).val() );
});
A <textarea> doesn't have a value= attribute. The value is the text node inside. ex.
<textarea>value</textarea>
I have a main form and within it I have a second form declared with ng-form directive like this:
<form name="settingsForm">
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm">
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button>Save address</button>
</ng-form>
<button>Save</button>
</form>
When I hit submit button all inputs are validated, I wonder if I can validate only firstName for example and not the ng-form because, I want ng-form to be submitted separated on save address, not on save.
First of all you need to disable the default validation of the form as shown by Zohaib Ijaz. You can utilize the validation variable $invalid provided by AngularJS.
<form name="settingsForm" novalidate>
<div>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
<p ng-show="validateMainForm && settingsForm.firstName.$invalid"
class="help-block">You name is required.</p>
<br />
</div>
<ng-form name="addressForm">
<div>
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" />
</div>
<div>
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required />
<p ng-show="validateAddressForm && addressForm.zip.$invalid"
class="help-block">Zip code is required</p>
</div>
<button type="submit" ng-click="submitAddressForm()">Save address</button>
<br/>
</ng-form>
<button type="submit" ng-click="submitMainForm()">Save</button>
</form>
As you have disabled the default validation, the validation happens on click of submit button for the main form as well as the address form. On submit, a flag is set which shows the error block if the field is invalid. There is a flag validateMainForm for the settingsForm and validateAddressForm for the addressForm. When the flag is true, it shows the p element below each input field if it is invalid.
Here is the plunker that demonstrates this.
For more information, you can refer this blog- Angular Form Validation:
You can do something like this
https://jsbin.com/latepo/edit?html,js,output
<form name="settingsForm" novalidate>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm" >
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button type="submit" ng-click="submit2()">Save address</button>
</ng-form>
<button type="submit" ng-click="submit1()">Save</button>
</form>
angular.module('myapp', []).controller('MyController', MyController);
function MyController ($scope){
$scope.submit1 = function (){
alert('submit1');
};
$scope.submit2 = function (){
alert('submit2');
};
}