I have got a form and I would like to implement the following behaviour :
I you submit my form by clicking on the submit button and the form is invalid, the button shakes from right to left for 1.5 second.
You won't be able to send the form until it is not valid.
Currently when the user clicks on the submit button, the function submit() is checking all the fields and if the form is valid, a variable formValid becomes true, otherwise it becomes false.
What I did concerning my button is adding it a ng-class which applies, if the formValid is false, a CSS class for the animation.
To detect the end of the animation, I tried a few things including jQuery function :
var anim = document.getElementById("animatedButton");
anim.addEventListener('animationend', $scope.AnimationListener());
anim.addEventListener('webkitAnimationEnd', $scope.AnimationListener())
But with the digest cycle ect, it didn't work and I should not use JQuery to solve this issue.
I know I could use ngAnimate but I am looking for another solution.
Thank you so much!
Related
Am building a Wordpress plugin and am Using Vue Js.
I set up a variable that will be set to true on a button click
Then another div which is a modal that will remaining hidden with v-if as long as the variable is false. The is also a form in the div modal(pop up)
The problem is that once the value changes, on button pressed, the form submits immediately.
This has been happening but I usually ignore it because there was always a required field which will prevent the form from submitting automatically.
Vue.js Data object
{
selected_to_show : false,
}
The modal div
<div v-if="selected_to_show === true" class='mp-modal'>
<form on:submit.prevent="xhrSubmit()">
<form>
</div>
<button v-on:click="selected_to_show = true"></button>
This works but once the modal opens, the form submits immediately.
Note: There is only two button elements in the form where are all set to type="button"
The target is to prevent the form from submitting automatically when shown
If any one still uses this approach to re-render vue apps, my advice is, don't.
The best way to re-render the app is by doing
this.forceUpdate();
This will re-render the vue app instead of modifying data properties of the vue instance which are utilized during rendering.
However, don't overuse it.
Most times when your view is not re-rendering naturally, its probably because you are doing something wrong.
yes, it does.
Is this any where documented?
Background: with my RoR Helper I made an error and created Links with data-method='GET'. Everthing still worked, only that I got a "Resend Data Warning" when refreshing the page ...
Now I found this strange behavior: data-method='GET'
Works with FF, IE, Chrome
Is this a standard? if yes it makes the Rails button_to (with all the form around) obsolette ...
edit: I forgott to say: _method is made out of data-method and this is as data posted, if i change the 'GET' to a - lets say 'PUT' I get RoR routing errors
an other edit: OK, I try too explain with a better example:
the following line
"<a data-method='PUT' href='?'>post</a>"
creates a POST request with _method='PUT' as data
no it is not a standard, as long as you say that RAILS Jquery_ujs.js is not a standard.
Rails/Jquery is doing this Magic:
if you take a look here all the magic is gone ...:
$.rails = rails = {
// Link elements bound by jquery-ujs
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with], a[data-disable]',
// Button elements bound by jquery-ujs
buttonClickSelector: 'button[data-remote], button[data-confirm]',
// Select elements bound by jquery-ujs
inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote]',
// Form elements bound by jquery-ujs
formSubmitSelector: 'form',
// Form input elements bound by jquery-ujs
formInputClickSelector: 'form input[type=submit], form input[type=image], form button[type=submit], form button:not([type])',
// Form input elements disabled during form submission
disableSelector: 'input[data-disable-with]:enabled, button[data-disable-with]:enabled, textarea[data-disable-with]:enabled, input[data-disable]:enabled, button[data-disable]:enabled, textarea[data-disable]:enabled',
// Form input elements re-enabled after form submission
enableSelector: 'input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled, input[data-disable]:disabled, button[data-disable]:disabled, textarea[data-disable]:disabled',
// Form required input elements
requiredInputSelector: 'input[name][required]:not([disabled]),textarea[name][required]:not([disabled])',
// Form file input elements
fileInputSelector: 'input[type=file]',
// Link onClick disable selector with possible reenable after remote submission
linkDisableSelector: 'a[data-disable-with], a[data-disable]',
// Button onClick disable selector with possible reenable after remote submission
buttonDisableSelector: 'button[data-remote][data-disable-with], button[data-remote][data-disable]',
Link to form
The form can be found at the link above.
Up until this morning the radio buttons and the form had been working as expected, however now users can't change their answer once they've picked from one of the two radio buttons even though they use the same input name. Using $("#volunteer-form input:radio[name='gender']:checked").val() I've found that the value is being correctly set and that the two buttons are still linked by a common name. Also, it appears possible to switch between the two using a bit of jQuery, like so:
$("#volunteer-form input[name=gender][value=male]").prop('checked', true);
Any ideas?
its because of your javascript block here:
$(document).ready(function() {
$('.inline').fancybox({
'maxWidth': 600
});
$('.form').click(function(event){
event.preventDefault();
});
});
when you are clicking on the radio button inside the form your preventDefault is stopping the change of radiobutton state ... or maybe you already knew that.
What is the intended purpose of including the preventDefault where you have it?
I have two forms in my html file. They both submitted by one button. Can I connect both forms with this button? Something like
<button form="firstFormId secondFormId"> Save </button>.
Will it make any sense?
You have multiple solutions to do that, I'd go with javascript, or even better, jQuery, if you're using it.
If you are not using jquery, with javascript you could do something like this:
Place somewhere in the page a "submit" link:
Submit
Assign to each form an unique name, let's say "myform1" and "myform2".
Then include in your page the following:
<script type="text/javascript">
function submitform(){
document.myform1.submit(); // submit form 1
document.myform2.submit(); // submit form 2
}
</script>
Instead of calling an external function, to keep things as simple as possible, after assigning the names to the forms, you could even simply place the following link:
Submit
If you are using jQuery, and I suggest this way, you could simply assign a given class to both forms, let's say "submit-me" and then add to your code:
$('.submit-me').submit()
Of all the above I would definitely suggest the last one, that relies on jQuery. It's easy to maintain, reusable (meaning that it can be applied to any form having the class submit-me, and all the job is done by jQuery.
Note that in all the examples you don't need anymore the "classic" submit button of forms.
Not tested, but I hope it'll do what required! :-)
This is a very rudimentary question, but I am sure someone out there knows why. In HTML, when I make a button element by itself, and do not give it and onclick and no jQuery .click() the button will just do nothing. Perfect. But when I do this and but the button inside a <form> element, it tries to send GET data of all the form elements to the root address of my website? Why is it doing that? I didn't make it a submit button or even define a method or action on that form??
Thanks for the info in advance!
** EDIT **
This is what I did to fix the problem. For buttons inside the <form>, use:
<button type="button"></button>
And it will not do anything by default.
As can be seen at the respective MDN entry, the default value for the type property of a button element is submit. So if you omit it or don't change it to button or reset, the default behaviour will kick in and the form gets submitted.
<form action="">
<button type="button">Nothing will happen</button>
<button>Form gets submitted</button>
</form>
I didn't make it a submit button
<button> elements have a type attribute. The default value is submit. Set type="button" if you don't want it to submit a form.
or even define a method
method defaults to GET
or location on that form??
action defaults to the current URI.
It was designed that way because you sometimes need to know WHICH button was pressed on the server-side. If you want button functionality without a button, use a styled A-tag.
Buttons are treated as submit controls in forms, not sure why.
The reason it gets posted to your root is because you didn't specify an action and so the default is used.
The reason it used GET is because that's the default method.
To prevent it happening, add return false; to the end of your button's onclick.