I have a form with required fields and 2 buttons : first button submits the form and another button is to download the file.
On the one hand, as long as form is not valid, the submit button is disabled (and it enables when the form is valid) :
component.html :
<button type="submit" [disabled]="!formGroupTest.valid" >Valider</button>
=> It works
On the other hand, as long as form is not valid, the "download" button is disabled and it enables when : form valid AND button submit is clicked :
component.html :
<button [disabled]="!formGroupTest.valid || !buttonSubmitEnabled">Download</button>
For that, in component.ts, i initialize a boolean at false, and it becomes true when button submit clicked (method sendForm()) :
private buttonSubmitEnabled: boolean = false;
sendForm() {
this.buttonSubmitEnabled=true;
}
When I fill the form for the first time, it works perfectly => I click on the submit button and the download button becomes enable. However, after the first time, if I decide to change required fields and it returns the form as invalid, the 2 buttons are disabled (logically), but when I fill the fields correctly then the "download" button becomes enable. I understood the problem, because the 2 conditions to enable the button download are respected : Form valid AND button submit clicked once.
So, what if I want it to work every time, I think it's necessary to put the Boolean "buttonSubmitEnabled" at false each time the form is invalid, but I don't know how to do it.
FormGroup has a valueChanges property that you can subscribe to. Every form change will trigger this observable. You can use this to reset the submission boolean.
this.myForm.valueChanges.subscribe(x => this.buttonSubmitEnabled = false);
In keyup event of those input fields call a function disableDownload()
<input (keyup)="disableDownload()">
And inside disableDownload(), just make download buttonSubmitEnabled false
disableDownload() {
this.buttonSubmitEnabled = false;
}
Only make the buttonSubmitEnabled true once the form is submitted
Related
I have a form that is using Abide. The form has two buttons, both are type="submit" but one has the formnovalidate attribute set. This button is for "previous step" as it takes whatever the user has filled in and submits the form, taking the user to the previous step of the form.
The issue is that abide validation still kicks in when the user clicks cancel preventing the user to go back, until he has filled in all the fields on the current step. HTML5 validation has formnovalidate attribute exactly for this use case. Is there a way to "ignore/skip" the abide validation when the cancel button is clicked?
Issue link on github: https://github.com/zurb/foundation-sites/issues/11426#issuecomment-441956255
Resolved in the github issue. Currently there is no native support for this by Foundation. A workaround is to rewrite the submit handler in Foundation JS. I did it like this:
.on( "submit.zf.abide", function( e ){
var $btn = $(document.activeElement);
if (
/* there is an activeElement at all */
$btn.length &&
/* it's a child of the form */
t.$element.has($btn) &&
/* it's really a submit element */
$btn.is('[type="submit"]') &&
/* it has a "formnovalidate" attribute */
$btn.is('[formnovalidate]')
) {
return true;
}else{
return t.validateForm()
}
})
I'm using a checkbox to create a toggle switch as shown in this tutorial
The switch lives in a form where questions can be added dynamically. On submission the form posts as array of each answer back to the page to be processed however as the off switch doesn't pass a value back to the form the answers get out of sync with the answers for the other text fields. Is there any way to set a value for the off switch, i.e. when a check box is left unchecked?
I've tried to use the following to set my off checkboxes to off however it just seems to animate all the switches to on on form submission, anyone any ideas as to what I'm doing wrong?
$('form').submit(function(e){
var b = $("input:checkbox:not(:checked)");
$(b).each(function () {
$(this).val(0); //Set whatever value you need for 'not checked'
$(this).attr("checked", true);
});
return true;
});
You probably want to use Javascript to set a value for each checkbox "switch" in one of two ways:
Option 1: in the html of the switch elements/checkboxes, set the value attribute to zero by default. Then add a javascript click handler for the toggle to check its current value and toggle to the opposite state/value.
Option 2: add Javascript to the form's submit handler (on submit) that checks for any switch elements which have no values and set them to zero before processing form.
Either way should pass a value at all times, and your form should be able to keep track of all input states.
This snippet did the trick, as Anson suggested this finds all the checkboxes and sets them to either on or off on form submission:
$('form').submit(function () {
$(this).find('input[type="checkbox"]').each( function () {
var checkbox = $(this);
if( checkbox.is(':checked')) {
checkbox.attr('value','1');
} else {
checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
checkbox.prop('disabled', true);
}
})
});
I am checking the input field with validation and showing validation message like "contact person field accept only characters" If I click cancel button It will close the popup. Again, If I open the same popup to add new data already shown ng-show validation message is still displaying. Validation Message is not clearing. How to clear ng-show validation messages in cancel button click
I have used form.inputname="" to clear the form input values. But How do I clear
validation messages in angularjs
You can use following code here MyForm is form name. And place Submitted to your ng-show condition with && operator in validation message in html code
$scope.Submitted = false;
$scope.MyForm.$rollbackViewValue();
$scope.MyForm.$setSubmitted();
$scope.MyForm.$setPristine();
$scope.MyForm.$setUntouched();
Try this
<button type ="button" ng-click="hideNotifications()" >Cancel </button>
In Controller
$scope.hideNotifications = function () {
$scope.message = false;
}
I have a button on my signup form, like such:
<%= image_submit_tag('/assets/atmosphere_forward.png', :class => "signup_submit_button")%>
When the user clicks it, there's a delay of a few seconds while the form is being processed. How can I change the image of submit button while this is occurring (similar to using :disable_with with other tags)?
Or, alternatively, how can I add a field to my form that only appears when the form is processing (which could contain "Please Wait" or something similar)?
I don't think that the Rails UJS tools are enough to change the state of an input field, add/remove a class or show and hide properties. You will have to use JavaScript.
form = $('#your_form');
form.submit(function(event) {
//change the button
var btn = form.find('input[type="submit"]');
btn.image = '...';
//setup the please wait message
var message = $('<div class="please-wait">Please Wait...</div>');
form.append(message);
});
I do suggest for the form button you use CSS and then just change the class within your submit event.
I have a form with an accept button and a reject button. When a user presses the accept button I want the value of accepted in my database to contain the value true. If the user presses reject then I want the value of accepted in my database to contain the value false. The code I have below does not work. Are there any suggestions on how I can get this working properly?
public static void acceptOrRejectResponseForm(Long id,String accept,String reject) {
Response responseForm = Response.findById(id);
if(accept != null && !accept.isEmpty()){
responseForm.accepted = true;
}
else if(reject != null && !reject.isEmpty()){
responseForm.accepted = false;
}
accepted.save();
}
This my html
<form action="#Admin.acceptOrRejectResponseForm(response.id)" method="GET">
<input type="submit" value="accept" name="accept">
<input type="submit" value="reject" name="reject">
don`t create two submit buttons.
Create two hidden fields with default value 0. Call name accept and reject. Than create two buttons with onclick action. If you click on accept button with the onclick action you just set the hidden field accept on 1 and reject on 0. When you click reject button you set hidden accept field on 0 and reject on 1. Than you make submit for the form in js. In the code get those two fields and check witch one is set for 1 and witch one is set to 0. That way you can set it in db