I've a very simple question, but I can't find the correct way to resolve.
I have a phonegap app wich has a login, and I check the results with ajax.
I check the form when the user click:
GO
The order of the instructions are:
1- The user clik GO.
2- Check the form inputs.
3- IF they'e corrects, go home.html
I can't do a
window.location.replace('index.html');
because I lost the data-transition.
Another option could be make a link hidden, and trigger his click when necesary, but I dont like it.
The best way it's when click at Go, do something, and if It's necesary go to his href.
Thanks for all !
$("a").click(function(e){
// Do what all checks you need to do here
if(something is wrong)
{
// Do stuff here
e.preventDefault(); // Stop propagation of default event.
return false;
}
});
This way the data-transition will also work, becaue the default event will be stopped only when the validation fails.
You could implement an onclick function and do preventDefault if the conditions for progressing to the link url aren't fulfilled. Have a look at this question:
preventDefault inside onclick attribute of a tag
If you are using ajax, then why dont you return 'true' or 'false' value depending upon the validation result that you are performing.
Then in your 'success function' of ajax, you can check if the result is 'true' or 'false', and if validations are 'true', you can use window.location.href method of javascript.
Related
I was wondering if there was a way to make a submit button in html on clickable once, I am having an issue with users submitting multiple lines of information into a database because of impatience. I know this is the issue because I have tested it myself, the php written for the queries is solid, the problem is I have users that are impatient.
So my question is this, is there any code regardless of the language be it javascript, jquery, php or otherwise that I can use to either change the action of the form so that it can't be resubmitted over and over again, or to change the type of button of the submit button. I know that I can use javascript to change an element and its contents but is that really necessary or is there a simpler way?
thanks for all of your help.
Have you tried disabaling the button once clicked ? You Could Try something like this.
$("#SubmitButton").click(function(e){
e.preventDefault();
$(this).attr("disabled","disabled");
$("#TargitFormId").submit();
alert("Please wait while we save your information");
//Or you could use a nicer UI Here
});
You must use .submit() instead of .click. Beacuse user may use enter key for submit form. So you can use this code
var hadSent=false;
$("#FormId").submit(function(event){
if(hadSent==true){event.preventDefault()}
hadSent=true; // for prevent next submitions
})
I have a standard link setup that fires an event via jquery when clicked
Click Me
All that works great, except that when the pseudo URL is clicked, it appends a hashtag (#) to the url. This hashtag affects how my page reloads if the user decides to refresh the page later on, so i'd like to not have the hashtag appended to the url.
is this possible while still allowing my normal jquery to fire?
Thanks!
You should either return false; from the event handler of A tag
Or, use
Click Me
For those who thinks javascript: void(0) is bad practice
If you use href='#', you must take care of two things
// one
function fn() {
// code
return false;
}
// two
click
And if you forget and just write onclick="fn();" it won't work
Another thing why I used javascript: void(0); is, if the function encounters/throws an error, it wont return false
So if you're a lone developer then you can clearly make your own choice, but if you work as a team you have to either state:
Use href="#", make sure onclick always contains return false; at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick property make sure that as well as not throwing an error it returns false.
OR
Use href="javascript:void(0)"
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
In end of the you click function, use:
return false;
smartass anwser: use a button.
alternative: you must make sure to trigger the preventDefault in youre jQuery event handler
$("dosomthing").click(function(e){
//make magic happen
e.preventDefault()
})
this works on html forms thats submitting and such.
note on the button thing
it is best pratice to only use a tags for link (somthing that changes the url) and buttons for other sorts of interactions.
search bots and other web crawlers expect a tags to link to a other html document (hyperlink) and up to and including html 4. or to a other point in the current document.
Does it need to be an href at all? you could do:
<span class="dosomething">Click me</span>
.
.dosomething{cursor:pointer}
I want to submit a form using ajax. So I am not using the type=submit. I am using a onClick event on a link(<a>) to send the form data using ajax. I also want to take advantage of HTML5 form validation capabilities.
So before sending the data, I used the function .checkValidity to check the validity of the form.
If it returns true then I send the data. But when it return false I want to show user that the form is invalid using HTML5 default notifying scheme. But I don't know how to trigger that.
Is there is any way to show the validation of the form programmatically.
One way to do is trigger the submit event if checkValidity return false. But this will refresh the page. I don't want to change the state of the page.
checkValidity only checks validity and inform the program. It doesn't inform the user interactively.
We have exactly the same problem and we tried very different things and a lot of them were hacks like pseudo submits and event.preventDefault() approaches. All in all i must say that HTML5 validation is nice in general but really bad in practice because its not possible to display backend validation errors the same way as frontend validation errors.
And only god knows why the HTML5 folks didnt thought about a simple API where we can trigger the validation like this element.triggerValidationMessage('my message');
You can do it if you let your form have a submit button and return false!
And you cán do it in the same event handler as the non-submits!
So, first test if you are part of a form and if so, make it check Validity and never return true (even if valid)!
$('.ajx')
.on("submit click", function(e) {
var $this = $(this)
//Force native form validating and notification
form = $this.closest('form')[0]
if (form) {
//Follow through with form submit (element must be of submit type!)
if(!form.checkValidity()) {
//don't ask me!
sleep(3000);
return false
}
}
//only preventDEfault AFTER possible form element click
e.preventDefault()
//...your project further ajax code
//Makes sure your form never submits
if (e.type=='submit') return false
}
Small downside: You have to do this on the submit button, but it's always possible to change your <a> into type=submit. You don't have to change the non form <a>'s though!
I have a JavaScript popup "confirm dialogue" setup on some links, when the link is clicked it says "are you sure?" and lets u confirm or cancel, however the ajax call will work regardless of what you choose.
<a onclick="return confirm(\'Are you sure?\')" class="sendEmailLink" href="/" id="someID">Send</a>
The function called starts as follows:
$$('.sendEmailLink').addEvent('click', function(e)
{
e.stop();
(I assume something should go here)
var myRequest = new Request.JSON({
etc...
It makes sense the confirm dialogue would not stop the above code, but I cant get my head around how I can accomplish this in mootools. Help?
I need a dialogue box offering a choice of yes or no, if yes then continue with ajax request, if not then do not continue with request.
Thanks.
Like #Marcin mentioned, you are binding two click events to one element, so it is no wonder that your ajax call proceeds as usual irrespective of the result of the confirm dialog.
Eliminate one, by not binding event to an element via an onclick attribute. (Never use onclick!)
element.addEvent('click', function() {
if (confirm('Are you sure?')) {
new Request.JSON({
// ...
}).send();
} else {
// Do nothing
}
});
Here is a relevant jsFiddle for you to play around with.
Here is solution: http://jsfiddle.net/kVjAB/
Some comments:
Do not use $$ or $ in Mootools anymore. They are deprecated.
In your code you are binding click event to link. Also, you have added attribute onClick which will run itself code first, then your binded code. It is like you add two separate events to link.
I have a very simple JavaScript function:
function insertPost()
{
document.postsong.submit()
parent.document.getElementById('postSongButton').disabled = true;
}
Both commands in it work but only the first one will fire. This is true when they switch places also. Only the first one will fire...
document.postsong.submit()
Submits the form, takes focus away from the function, function ends there
parent.document.getElementById('postSongButton').disabled = true;
Disables the button, so perhaps it is that there is then nothing to submit the form.
Not too sure if disabling the form button would stop the event from bubbling, but I suspect that the nature of these two lines will lead you to separating them, and having the second one in another event handler.
Hope this points you in the right direction.
EDIT: On further inspection, I found that the real source of the problem is the line:
document.postsong.submit()
Here are the results of my tests in different browsers. If the line previous to the submit() is "button.disable = true", and the button type="submit":
Firefox disables the button and submits the form.
Chrome disables the button, but does not submit.
IE does not disable the button, but it does submit the form.
This explains the behavior you have been experiencing. Having parent before getElementById does not hurt anything, but it is not necessary. Change the code in your insertPost() function to this:
function insertPost(){
document.getElementById("postSongButton").disabled = true;
document.forms["postSong"].submit();
}
Did you check the casing of the html element?
on click of the button you are calling the funcion insertPost().so what you have to do first disabled the button and then submit the form.one think i didnt understand why are using parent of object.
function insertPost()
{
parent.document.getElementById('postSongButton').disabled = true;
document.postsong.submit();
}
You are using parent.document.getElementById(...
Just check if you are referring to the button correctly. i.e. if the parent reference you are using is correct. i.e if the button is in same page as the form or in the parent.
And yes, first you have to disable the button and then trigger the submit action for the form. When you do it the other way, you might end up navigating away to a different page and the disabling line may never execute.
But, since you said, disabling doesn't work for you at all, I thought if you were using wrong reference. Did it give any javascript errors for you when you tried to disable it?