I've customized my form, it's a regular order form that has 2 payment options right before the buy now button. I need to have the data going to autoresponder regardless of the payment option chosen...when they choose option 1 (cash), the form will redirect them to the thankyou page...but now that I have 2 radio buttons, how do I separate these events? How do I make them see the thankyou page if they choose option 1 - and redirect them to paypal if they choose the option 2?
<div class="gt-box">
<div class="gt-labelpos">
<label class="gt-label" id="500">How You Pay Mister?</label>
</div>
<div class="gt-inputpos">
<div class="clrB">
<input name="custom_payme" type="radio" class="gt-req gt-valid__required"
checked="checked" value="cash"></input>
<span class="gt-text">Ca$h</span>
</div>
<div class="clrB">
<input name="custom_payme" type="radio" class="gt-req gt-valid__required"
value="PayPal"></input>
<span class="gt-text">PayPal</span>
</div>
</div>
<em class="clearfix clearer"></em>
</div>
Another approach which will help you prevent redirects is on submit button click to evaluate your radio value and redirect from there. You Javascript code would look something like this
$('.submit-btn').click = function(e) {
e.preventDefault();
if ($('.custom_payme').val() === 'cash') {
$.post("Your post url for cash", form_data);
}
else {
$.post("Your post url for Paypal", form_data);
};
};
On you server side when you receive your form's data, you can check the value of the radio button and according to that redirect respectively.
Related
I have two web servers. One running my front-end (example.com), one running my back-end (api.example.com).
On my front-end (example.com) I have this code which is a simple html website that has a form, with an input field and a button. When I click the button I'd like to get that data and send it to the back-end (api.example.com). For example, I put 'nathan' in the username field of the front end and click the button. I want it to send me to api.example.com/sendcode?username=nathan
I currently have this code, but the button is keeping me on the same website, instead of doing to a completely different url:
<form class="login100-form validate-form flex-sb flex-w" action="api.example.com" method="POST">
<span class="login100-form-title p-b-51">
Request for a code
</span>
<div class="wrap-input100 validate-input m-b-16" data-validate = "Username is required">
<input class="input100" type="text" name="username" placeholder="Username">
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn m-t-17">
<button class="login100-form-btn">
Send code
</button>
</div>
<div class="flex-sb-m w-full p-t-3 p-b-24">
<div class="contact100-form-checkbox">
</div>
</div>
</form>
With this code it's sending me to 'example.com/api.example.com?username=nathan' How would I fix this, would like to keep the two completely different?
You need a fully qualified URL with protocol - preferably https, as in action="https://api.example.com/sendcode"
Please search for AJAX and your server process. Alternatively use fetch
const username = document.querySelector("[name= username]").value;
fetch('https://api.example.com/sendcode?username='+encodeURIComponent(username))
.then(response => response.json())
.then(data => console.log(data));
To use Ajax, you need to grab the submit event
Here I use jQuery for speed of coding an example, just include <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> in the page to use it
$(".login100-form").on("submit", function(e) {
e.preventDefault(); // stop submit
$.post('https://api.example.com/sendcode',
{ data : $(this).serialize() }, // the form content in key=value format
function(response) {
console.log(response)
})
})
Change your form action to include http:// e.g.
<form class="login100-form validate-form flex-sb flex-w" action="http://api.example.com" method="POST">
There could be numerous methods depending upon scenarios but simplest of all which might expose data in querystring is sending a post request on button click through a simple javascript method.
As title
What I want to do is to add a button. After pressing the button, a duplicate form will be added to enter data. Need to add a few pieces of information, just press the button several times!
How can I achieve this?
You need to use javascript for this.
let button = document.getElementById('add')
let form = document.querySelector('.form')
let forms = document.getElementById('forms')
button.addEventListener("click", function() {
clone = form.cloneNode(true)
forms.appendChild(clone)
});
<div id='forms'>
<form class='form'>
<input placeholder='Name'>
</form>
</div>
<button id='add'>Add more!</button>
But you can use formsets to repeat the same form multiple times on the same page without the button:
https://docs.djangoproject.com/en/3.0/topics/forms/formsets/
I have popup in HTML
<div id="term_flags" class="term_flags">
<div class="modal-users-content flagsContent">
<div class="modal-users-header">
<span class="close" ng-click="closeFlagsPopup()">×</span>
<a> Check terminal flags </a>
</div>
<div class="modal-flags-body">
<div class="checkBoxes">
<div class="checkerDiv">
<input type="checkbox" ng-model='reservedFlag' ng-click='changeReservedStatus(reservedFlag)' value="flag" ng-checked="reservedFlag"> Reserved
</div>
<div class="checkerDiv">
<input type="checkbox" ng-model='seasonFlag' ng-click='changeSeasonStatus(seasonFlag)' value="flag" ng-checked="seasonFlag"> Season
</div>
<div class="checkerDiv">
<input type="checkbox" ng-model='networkFlag' ng-click='changeNetworkStatus(networkFlag)' value="flag" ng-checked="networkFlag"> Network
</div>
</div>
<div class="saveFlags">
<button class="button button6" name="changeFlags" value="Change Flags" type="submit" ng-click="saveFlags(item.terminalId)"> Save <p> </button>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
this div's display is none in the beginning. but some ng-click is called from outside of this div and display is changed from none to block and initializes checkbox statuses in this angular function
$scope.changeFlagStatus = function(item)
{
$scope.reservedFlag=(item.reservedFlag=='T')?true:false;
$scope.networkFlag=(item.networkFlag=='T')?true:false;
$scope.seasonFlag=(item.seasonFlag=='T')?true:false;
document.getElementById('term_flags').style.display = "block";
}
everything is okay , but when i click on reservedFlag changeReservedStatus(reservedFlag) method was called and change reservedFlag's checked status
$scope.changeReservedStatus = function(item) {
$scope.reservedForSave=item;
}
I saved this status in other variable and close my popup windows document.getElementById('term_flags').style.display=none
when i open this popup window again my function changeFlagStatus(item) is called again and initializes my variables for checkbox correctly but my checkbox are incorrect checked .
In example when i opened my popup window first time my variables after initialize were
$scope.reservedFlag=true;
$scope.networkFlag=false;
$scope.seasonFlag=true;
and my checkbox statuses were
reservedFlag = checked
networkFlag = unchecked
seasonFlag = checked
then i clicked on reservedFlag and changed his status from checked to unchecked and close my popup windows.
then i opened it second time and changeFlagStatus(item) method is called again to initialize my variables again for checkbox statuses
and i want to get
reservedFlag = checked
networkFlag = unchecked
seasonFlag = checked
again, but result is
reservedFlag = unchecked
networkFlag = unchecked
seasonFlag = checked
How can i get it ?
Angularjs won't work pretty good with $scope's properties for primitive variables when used again and again.
I would recommend you to declare an object to scope and set these flags as properties to this object.
$scope.flags = {};
$scope.changeFlagStatus = function(item)
{
$scope.flags.reservedFlag=(item.reservedFlag=='T')?true:false;
$scope.flags.networkFlag=(item.networkFlag=='T')?true:false;
$scope.flags.seasonFlag=(item.seasonFlag=='T')?true:false;
document.getElementById('term_flags').style.display = "block";
}
and the html part as
<input type="checkbox" ng-model='flags.reservedFlag' ng-change='changeReservedStatus()' value="flag" ng-checked="flags.reservedFlag"> Reserved
Instead of ng-click, I would recommend to use ng-change because that is the event to be used with checkbox. If you use ng-change, the injection of the model as a parameter can be avoided which helps in utilizing angularjs's feature of 2-way binding.
You can add ng-true-value and ng-false-value to the checkbox with true and false to make it more easier to handle instead of ng-value.
I would write the html part like this.
<input type="checkbox" ng-model='flags.reservedFlag' ng-change='changeReservedStatus()' ng-true-value="true" ng-false-value="false"> Reserved
Hope this will fix the issue.
I have an app that has been written in AngularJS, and am currently trying to add the functionality to hide the headings of some widgets displayed on one of the web pages when the user selects a checkbox to indicate that they should be hidden.
At the moment, I have a page that displays a number of widgets- on the 'heading' of each widget, there is a 'Settings' button. When the user clicks the Settings button, a dialog box opens up on top of the current page (i.e. the user does not navigate to another page- the URL does not change at all). That dialog box contains a form with a number of input fields- one of which is a checkbox that I want to use to 'hide' the headings of all of the widgets on the webpage.
I have been following the example at: https://docs.angularjs.org/api/ng/directive/ngHide to try and do this, but can't quite seem to get it working...
I have added the ng-hide attribute to my HTML element, as in the example:
<div data-ng-if="widget.name === 'tag-box'" ng-hide="hideWidgetHeading"> <!-- class="ng-hide"-->
<div class="divider"></div>
...
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="hideWidgetHeading()" ng-click="hideWidgetHeading()" ng-checked="hideWidgetHeading" ng-model="viewModel.hideWidgetHeading">
<!-- ng-model="viewModel.hideWidgetHeading" -->
<span></span>
</label>
</div>
</div>
</div>
I defined the hideWidgetHeading() function in the ctrl.js file as follows:
function hideWidgetHeading(){
if($scope.widgetHeadingCheckbox==false) {
$scope.$watch('noWidgetHeading', function() {
$scope.hideWidgetHeading = true;
console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading);
});
return true;
} else {
console.log("hideWidgetHeading() else called (Widget/ctrl.js line 440) ");
$scope.$watch('noWidgetHeading', function() {
$scope.hideWidgetHeading = false; //document.getElementById('noWidgetHeading');
});
return false;
}
if($scope.hideWidgetHeading) {
console.log("hideWidgetHeading is true- hide the widget heading: ");
}
return $scope.hideWidgetHeading;
}
and I have added the following CSS to my widgets.scss file:
.animate-show-hide.ng-hide {
opacity: 0;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
transition: all linear 0.5s;
}
.umw-tag-box {
opacity: 1;
}
When I load my page as it is presently, when I click the Settings button, the dialog opens up. If I then check the 'Hide widget heading' checkbox, and click Submit, the debug that I have added displays the following in the console:
Value of hideWidgetHeading: true
which tells me that the code inside the $scope.$watch(...){...} function is running.
However, if I click the Settings button, and then either don't check the 'Hide widget heading' checkbox, or check it and uncheck it again, and then click Submit, I get the same true value displayed in the console debug, which indicates that the code inside the $scope.$watch(...){...} function is running regardless of whether the 'watched' element changes or not.
Questions
How can I ensure that the code inside the $scope.$watch(...){...} only runs when the 'watched' element (i.e. the checkbox) has its value changed?
How do I actually 'call' the CSS that I've added to hide the HTML elements on the particular HTML that I want to hide? Or how do I make that CSS 'apply' to the HTML elements that I want to hide?
Edit
I changed the HTML for the checkbox to:
<input type="checkbox" ng-model="checked" name="noWidgetHeading" id="noWidgetHeading">
as suggested, and when I now browse to my page, and open the dialog, it displays the widget as I expect:
When I click the 'Settings' button on the widget, the 'Configure Item' dialog opens up on top of the page:
But when I select the 'Hide widget heading' checkbox, it actually hides the 'Tag' label & input box from the dialog:
The element I want to hide is actually displayed on the page from which the dialog box is opened, not on the dialog box itself... but I can't seem to work out how I can hide that using a control on the dialog... Any suggestions?
So, this should work, it is even the first example shown in their docs, with your code it will be:
<div data-ng-if="widget.name === 'tag-box'" ng-hide="viewModel.hideWidgetHeading"> <!-- class="ng-hide"-->
<div class="divider"></div>
...
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="logWidgetHeading()" ng-click="logWidgetHeading()" ng-checked="viewModel.hideWidgetHeading" ng-model="viewModel.hideWidgetHeading">
<!-- ng-model="viewModel.hideWidgetHeading" -->
<span></span>
</label>
</div>
</div>
</div>
you can keep functions on the events if you wan to log values, but there is no need for hiding. The ng-model directive will update your value and the ng-hide should follow.
function logWidgetHeading(){
console.log("Value of hideWidgetHeading: ", $scope.hideWidgetHeading);
}
What i was saying about function or var: in some cases, i used to have values from the scope that were not updated, and the solution was to introduce a function to be called to retreive the value. It is what i thought you were trying because ng-hide="hideWidgetHeading" shows the same name as your function: function hideWidgetHeading(){, that's why i first said that the round brackets were missing. So another version would be something like this (without ng-model on purpose, to show an alternate way to modify stuff with your events):
<div data-ng-if="widget.name === 'tag-box'" ng-hide="getHideWidgetHeading()"> <!-- class="ng-hide"-->
<div class="divider"></div>
...
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" name="noWidgetHeading" id="noWidgetHeading" ng-true-value= "'YES'" ng-false-value= "'NO'" ng-change="toggleWidgetHeading()" ng-checked="isHiddenWidgetHeading">
<!-- ng-model="viewModel.hideWidgetHeading" -->
<span></span>
</label>
</div>
</div>
</div>
and the js:
//initialisation to the default value:
$scope.isHiddenWidgetHeading = false;
//function that toggles the value:
$scope.toggleWidgetHeading = function(){
$scope.isHiddenWidgetHeading = !$scope.isHiddenWidgetHeading;
};
//function to retreive the value:
$scope.getHideWidgetHeading = function(){
return $scope.isHiddenWidgetHeading;
};
Sorry i was a bit quick in naming vars and such, but you should get what you need here..
Given this code:
<div ng-controller="MyCtrl">
<form ng-submit="onSubmitted()">
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="/* what could should be put here, so this can trigger the firt form's validation, then submit? */">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>
</div>
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.onSubmitted = function() {
alert('submitted!');
};
}
I want the last button to trigger the validation(then submit when things are valid) on first form. As of now, only the button inside the form can trigger that form's validation and submission. Is there any possible way for a button outside the form to do that?
Live test: http://jsfiddle.net/dzjV4/1/
You can create directive which you can then attach to <a class="btn".... Check this jsfiddle
http://jsfiddle.net/dzjV4/2/
Note that I added to <input type='submit' id='clickMe'... and linked it with link at the bottom <a class='btn' linked="clickMe"...
for (control of $scope.[form name].$$controls) {
control.$setDirty();
control.$validate();
}
You can try the above codes. Make it running before submit.
Ideally there'd be a programmatic way to cause validation to re-run across a form. I have not investigated that completely but had a situation that required multiple controls to be re-validated based on different data in the scope -- without the user interacting with the individual controls. This arose because the form had two action buttons which each required different validation rules be in play when they were clicked.
The UI requirement changed before I fully implemented forcing re-validation but before it did I got most of what I needed by copying and then re-setting the form's data. This forced re-validation across the form within the current scope. Basically, it's along the lines of the following (not tested, but taken from the code that was working). In this case the form's data was bound to the properties in one object.
var formData = $parse(<form's model>);
var dataCopy = angular.copy( formData($scope) );
formData.assign( $scope, dataCopy );
This may or may not be acceptable, but if you can get away with the SUBMIT button being disabled until the form is completed, you can do this:
<form name="formName">
<input ng-required="true" />
</form>
<button ng-click="someFunction()" ng-disabled="formName.$invalid" />
It's also worth noting that this works in IE9 (if you're worried about that).
Give your form a name:
<div ng-controller="MyCtrl">
<form name="myForm">
<input name="myInput" />
</form>
</div>
So you can access your form validation status on your scope.
app.controller('MyCtrl', function($scope) {
$scope.myForm.$valid // form valid or not
$scope.myForm.myInput // input valid or not
// do something with myForm, e.g. display a message manually
})
angular doc
There is no way to trigger browser form behavior outside of a form. You have to do this manually.
Since my form fields only show validation messages if a field is invalid, and has been touched by the user:
<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">
<!-- field label -->
<label class="control-label">Suffix</label>
<!-- end field label -->
<!-- field input -->
<select name="Parent_Suffix__c" class="form-control"
ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
ng-model="rfi.contact.Parent_Suffix__c" />
<!-- end field input -->
<!-- field help -->
<span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
<span ng-message="required">this field is required</span>
</span>
<!-- end field help -->
</div>
<!-- end form field -->
I was able to use this code triggered by a button to show my invalid fields:
// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
angular.forEach(error, function(field) {
field.$setTouched();
});
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
isValid = false;
}