Now i have a form and two radio buttons.
Based on which radio button is selected I have to change my forms action.
here is the code
<form action={{action}} name="payform" method="post">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="cash" ng-click="paymethod('cash')" name="payment" value="cash">Cash
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="online" ng-click="paymethod('online')" name="payment" value="online">Online
</label>
</div>
</div>
<button class="btn btn-success" name="submit" type="submit">Submit</button>
</form>
And here is the controller code
$scope.paymethod = function(ptype){
alert("hi");
if(ptype=="cash"){
$scope.action = "food.php";
}
else if(ptype=="online"){
$scope.action = "online.php";
}
}
I used alert in the function to check if the function is being called or not. And alert is working it means function is being called but when i click submit nothing happens.
Not exactly what you asked for, but it solves your problem:
Prepend your form fields ng-models with formData.
Add ng-submit to your form
Use that function to place an $http request
Very basic example:
HTML:
<form name="payform" ng-submit="submitForm()">
<input ng-model="formData.value1" />
<input ng-model="formData.value2" />
<button type="submit"></submit>
</form>
JS:
$scope.submitForm = function submitForm() {
$http.post($scope.ptype + '.php', $scope.formData).then(
function success(response) {
// do something
},
function error(response) {
// not good
}
};
Because of prefixing your form ng-model attributes with formData, you have all fields contained in one object, which you can easily use when placing a POST request.
Related
Is there a way to validate the following checkbox ?
<form name="rmn-form" id="rmn-form" action="send.php" enctype="multipart/form-data" method="POST">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="rmn-input-field">
<label for="gdpr" class="checkbox-container"> Accept terms and conditions
<input type="checkbox" checked="checked" id="gdpr" name="gdpr">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<button type="submit" name="submit" id="submit-all" class="waves-effect waves-light btn submit-button pink mt-30">Send</button>
</form>
The checkbox is generated by https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
I have the following JSFiddle with my code with the bootstrap library and jquery.validate.min.js:
http://jsfiddle.net/2837qdeu/
Just change your input tag to the code below
<input type="checkbox" required="required" id="gdpr" name="gdpr">
It will check before submit that this checkbox must be checked.
Fiddle
You also can take control of this yourself, as below:
$("[name=submit]").click(function(){
if ( $('#gdpr').is(':checked') ){
alert('submit will proceed - checkbox is checked') //This alert not required, only added for demo
}else{
alert('Error - submit will not proceed');
return false; //<== Here is the magic, along with checking that the box is checked
}
});
Revised jsFiddle
return false will stop the submit procedure, allowing you to display a message, or do some js wizardry, before returning control to the user.
I added the following line in the js file and it worked just fine:
$("#rmn-form").validate({
ignore: ':hidden:not(:checkbox)',
....
});
I want to submit a form in angularjs which are like survey, suppose
user will fill the form and submit, I have array of all the questions
of form, I want to update all the questions with the respected answers
by iterating all the questions from array and update each question
individually(why because I only have API to update one question)
This is my form
<ng-form name="participateSurveyForm" novalidate>
<div class="form_fields_survey_audience" ng-repeat="questionlistitem in surveyquestiondata">
<h3 class="">{{questionlistitem.question}}</h3>
<div ng-show="questionlistitem.question_type == 'multiple_choice'">
<div class="radio" ng-repeat="optionofanswers in questionlistitem.options">
<div class="form-group">
<label>
<input type="radio" name="optionforanswer" ng-model="surveydataforparticipate.optionforanswer" ng-value="optionofanswers.option" required checked>{{optionofanswers.option}}
</label>
</div>
</div>
</div>
<div ng-show="questionlistitem.question_type == 'open_text'">
<div class="form-group" >
<textarea class="textAreaMultiligne" name="open_text_field" ng-model="surveydataforparticipate.open_text_field" required placeholder="Answer Here" rows="10" cols="40"></textarea>
</div>
</div>
</div> <!--End Row-->
<div class="row">
<div class="col-lg-12">
<button type="submit" ng-click="participateInSurvey(surveydataforparticipate)" class="btn btn-primary">Complete</button>
</div>
</div><!--row & Submit Button-->
</ng-form>
//Anguar Code
$scope.participateInSurvey = function(surveydataforparticipate){
angular.foreach(surveydataforparticipate, function(value){
$http.put('/api/survey/question/+value._id, surveydataforparticipate).success(function(data){
console.log(data);
});
});
}
not getting values from this surveydataforparticipate function. also
Is it correct that i have put foreach to submit the data using $http?
Thanks for helping.
You can define a function in your controller where the form should go on submit. And, use ng-submit to link that function to your form.
<ng-form name="participateSurveyForm" ng-submit="submitForm ()" novalidate>
In your controller :
$scope.submitForm = function(){
//definition of the function.
//access form data here.
}
With AngularJS, how can I show an error message for a checkbox after a click on submit button if the checkbox isn't checked?
I tried this :
<form action="/" method="post" name="myForm" novalidate>
<label>
<input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required>
</label>
<p class="error" ng-show="myForm.$submitted && myForm.myCheckbox.$error.required">Error message</p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
But it didn't work. When I click on submit button, nothing is happening. If I remove "novalidate" on form tag or "ng-disabled" on submit button, the form is submitted even if the checkbox is not checked.
Can you help me please ?
You have ng-disabled="myForm.$invalid" in your submit button, so the submit event never is fired (because the button is disabled when the form is invalid) and thus the condition ng-show="myForm.$submitted && myForm.myCheckbox.$error.required" never is fulfilled because myForm.$submitted is false.
Edit:
As some other users here have suggested, I think your best bet would be if you change the way you are doing things right now. I can think in tow solutions (very similar), but they includes sending the request "the angular way"
Solution 1:
Handle you form submission with angular like this:
Put in your form something like this (note that I deleted the action="/" method="post" part:
<form ng-submit="onSubmit(myForm)" name="myForm" novalidate>
and remove the ng-disabled="myForm.$invalid" from your submit button. Then it would be like this <button type="submit">Submit</button>
... and in the controller
$scope.onSubmit = function(form){
if(form.$invalid){
//... do your call to backend here as you like since the call directly from the form was removed
}
}
Solution 2:
As well change form like this: <form name="myForm" novalidate>
... change your submit button like this: <button type="submit" ng-click="onSubmit(myForm)">Submit</button>
... and use the same function declared in the controller
$scope.onSubmit = function(form){
if(form.$invalid){
//... do your call to backend here as you like since the call directly from the form was removed
}
}
Otherwise you have to change your condition like this
ng-show="myForm.myCheckbox.$error.required"
but this will show the message before the form is submitted
Remove myForm.$submitted because it is never fulfilled (As Asiel Leal mentioned) and also you have put ng-disabled on submit button, so safe to use.
<form action="/" method="post" name="myForm" novalidate>
<label>
<input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required>
</label>
<p class="error" ng-show="myForm.$dirty && myForm.myCheckbox.$error.required">Error message</p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
Try this working example :
var app = angular.module('myApp',[]);
app.controller('myController',function( $scope ) {
$scope.validate = function() {
alert('submitting..');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="myController">
<form name="myForm" ng-submit="myForm.$valid && validate()" novalidate>
<input type="checkbox" name="checkb" ng-model="formData.checkb" required/>
<span ng-show="submitted == true && myForm.checkb.$error.required">Please select the checkbox to proceed.</span>
<input type="submit" value="Submit" ng-click="submitted = true"/>
</form>
</div>
I have an input field in form that I dont want to send. Even though i removed the name on input field it stills get sent probably due to angular magic.
To prevent this I thought if I could remove this item from post request it'd be the solution.
<input type='radio' ng-model='birthday' ng-value='true'>
when form submits POST has field called birthday despite input not having a name attribute. So how do i prevent it from showing up.
Form is html template, and controller is called on ng-submit
I think that you may be looking for the disabled property:
<input type='radio' ng-model='birthday' ng-value='true' disabled="true">
Edited
Here is an example of how you could use the disabled property for not sending undesired information with the form on submit:
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var TestApp = angular.module("TestApp", []);
TestApp.controller('TestCtrl', function($scope) {
$scope.needsBirthdayDisabled = false;
$scope.needsBirthday = false;
$scope.sendForm = function(form) {
$scope.needsBirthdayDisabled = true; //if you comment this line, the "yep"'s input value will be sent with the form
form.$submitted = true;
};
});
</script>
<div ng-app="TestApp" ng-controller="TestCtrl">
<!-- the method is set to GET for test purpose (so we can easily see the sent values on the URL) -->
<form action="" method="GET" name="myForm" ng-submit="sendForm(this)">
<div>
<label for="name">Name</label>
<input type="text" name="name" ng-model="name"/>
</div>
<div ng-show="needsBirthday">
<label for="birthday">Birthday</label>
<input type="text" name="birthday" ng-model="birthday"/>
</div>
<div>
<label>Needs Birthday</label>
Yep <input type='radio' name="yep" ng-model='needsBirthday' ng-value='true' ng-disabled="needsBirthdayDisabled">
</div>
<input type="submit" value="Go!"/>
</form>
</div>
</body>
</html>
I am trying to display a "loading" page when doing an action.
In a view I have the following form:
<div>
<label class="bold center">
Payment options
</label>
<div class="center">
<div class="float-left">
<label class="center bold">PayPal</label>
<form id="payPal" action="#Url.Action("PaypalMethod")">
<input type="image" name="submit"
src="~/Images/Functional/Icons/PayPal Pay.gif"
alt="PayPal — The safer, easier way to pay online." onclick="needToConfirm = false" />
</form>
</div>
<div class="float-left">
<label class="center bold">Credit Cards</label>
<form id="credit" action="#Url.Action("CreditCardMethod")">
<input type="image" name="submit"
src="~/Images/Functional/Icons/Credit cards.png"
alt="CreditCards" onclick="needToConfirm = false"/>
</form>
</div>
</div>
</div>
And I have those javascript method available:
var spinnerVisible = false;
function ShowProgress() {
if (!spinnerVisible) {
$('div#spinner').fadeIn("fast");
spinnerVisible = true;
}
}
function HideProgress() {
if (spinnerVisible) {
var spinner = $('div#spinner');
spinner.stop();
spinner.fadeOut('fast');
spinnerVisible = false;
}
}
So when I click on the first form, for example, I would like to call the ShowProgress() method first, then the action, and lastly the HideProgress() after the results are in or simply load the next view.
How could I do that?
You can use the onsubmit attribut of form element.
<form onsubmit="ShowProgress()">