about click and submit
example below:
<form action="url" method="post">
<input type="text" id="input1"/>
<input type="submit" value="submit" onclick="testFun()"/>
</form>
if it is possible that function testFun run after the form's submit when we click the button to submit
if the answser is no.
why? how does the browser work when click the submit button?? the order is click function-> submit ? is right??
No you cannot execute a function after the form has been submitted - the order of which things are executed is as follows :
User clicks the submit button
The onclick function is executed
The browser submits the page to the url specified in the action of the form
You can prevent the browser submitting the page by returning false from the onclick handler :
function myfunc() {
// do some stuff
return false;
}
the submit button should then be modified like this :
<input type="submit" onclick="return myfunc()"/>
If you do wish to execute a function after the form has been submitted you need to submit the form using AJAX - this doesnt cause the browser to navigate away from the page and a JavaScript function can be executed after the form has been submitted
This is not possible because the form's action would redirect the browser to that URL.
1 option would be to run testFun() on your action url page, but this might not be possible depending on what the function does.
If you are to post more information about what you are actually trying to do here, then it might help.
No, but testFun might (in turn) call another, asynchronous, function that wouldn't run until the form had submitted (at which point it wouldn't run at all since the browser would have left the page).
No it is not possible, after submit you are out of the scope from the current page. But if you are using an iframe for your form submit and call the function on the parent page, then I thought it will work.
The anwswer is "It is not possible"
Why
Because once the browser triggers the submit event all user interaction with page is stopped. After the submit event is triggered the communication is between your browser and the webserver. This is how broswers are designed.
In your case Form submission happens because you have a form in your page and in that form you have an input of type=button. If you dont want to submit the page you can change the type of the input to button.
Check this fiddle http://jsfiddle.net/kiranvj/MBxNs/1/
Related
I have a form with information about some people. Information is coming from a database, and next to each row is a button. When I press the button, modal should open and show only the information about that person. So if I have 5 people, there are also 5 buttons and each buttons should open a modal with information about that person.
My code is almost working. I don't know how to show a modal after pressing the button, because when I press the button the page reloads and the modal will start to show but it won't fully show becuase th page reload will prevent it. My code is working and the modal is showing the correct information, but the problem is that my page reloads after pressing the button,so it doesn't show my modal.
As far as I know I need to implement Ajax to my code but I am not sure how.
Here is my code:
https://github.com/luka3ska/Form
You should try:
<button name="test" type="button" onclick="onClick()">Click</button>
default value of type is submit. And this triggers a refresh.
So the type must be "button"
I think you have a problem about the event, you must stop the default behavior of the button.
You can do that with event.preventDefault().
In Javascript :
document.getElementById("buttonId").addEventListener("click", function(event){
event.preventDefault()
// Ajax request here ...
});
In JQuery :
$("buttonId").click(function(event){
event.preventDefault();
// Ajax request here ...
});
To extend on #Dumhuzy 's anwser and help you understand what's going on. Whenever you have a <button> within <form> that button will submit the form regardless of if it has the attribute type="submit" or not. Submitting a form will cause the page to reload.
<form action="">
<button>Will reload the page</button>
<button id="prevent">Will prevent reload</button>
</form>
To prevent the form from submitting you must prevent the default action with javascript.
document.getElementById("prevent").addEventListener("click", function(event){
event.preventDefault()
});
Although I am able to call Javascript function on hitting the enter key. I am calling a function shortIt() when user hits the enter key, shortIt() takes the text from input box and makes a request to Google URL Shortener API which returns a short URL, but the generated response is visible for only some seconds.
I am showing the response in a div.
Seems to be very weird problem, code is here https://s3-ap-southeast-1.amazonaws.com/s3freebucket/URLShortner/url-shortner.html
But when I click on shortIt button to short the url. It works fine and the response text stays in the div.
This is because on pressing the enter key, the form gets submitted. When this happens you will notice the page reloading. This is a default behaviour and is the consequence of using <form>. On form submission, the page in the forms action attribute is loaded. In this case the action attribute of the <form> is not set and so the page you are on is just reloaded, thus the script stops running and the page reloads.
Two straight forward options for fixing this:
(Simplest) Remove the form tag - it is not used to submit anything so removing it should leave things still working
Prevent the default action when the form submit event is fired.
With JQuery:
$('#myForm').on('submit', function (evt) {
evt.preventDefault(); // prevents form submission
});
Where myForm is the ID of your form tag. You will need add an id attribute to your existing html form tag: <form id="myForm" class="form-horizontal">
I'm doing a tutorial on making a chat server with Node.js and socket.io. Here's what I had in the html:
<form id='chat_form'>
<input id='chat_input' />
<button>Send</button>
</form>
<script type='text/javascript'>
var socket = io();
$('#chat_form').submit(function(){
var message = $('#chat_input').val();
socket.emit('messages', message);
$('#chat_input').val('');
});
</script>
I won't bother putting what I had on the back-end, because that part all worked fine. But in the browser, every time I submitted, the page refreshed, and a /? was added to the end of the URL bar.
Looked around for a bit, and found another tutorial (the one on the socket.io website), that had basically the same code, but they had added return false; to the end of their submit event. Tried that out and it worked fine. I'd like to understand why that worked though. Can anyone explain? Also, can you explain why the /? was added to the URL?
first about /?:
default method of form submit is GET, but you can change it with <form method="POST"> (while default is <form method="GET"> if method is not provided).
With POST form data is passed in request body, with GET - in request url params.
If you have
<form action="/submit.php" method="GET">
<input name="foo" value="1" />
<input name="bar" value="2" />
</form>
And you submit that form, you'll get URL something like /submit.php?foo=1&bar=2.
In your case you have no inputs with name attribute, so your GET params are "empty" (/?<params should go there>).
You can read more in:
http://www.w3schools.com/tags/att_form_method.asp
About return false;
Submitting form forces page reload (with either POST or GET request). If you submit form with javascript you need to prevent this default action. You can do this by
$('#chat_form').submit(function(event){
//....
event.preventDefault();
});
Or with return false;.
A simple and easy answer to this is
"Return false prevents navigation"
Return false is always used in those case where user or browser action needs to be stooped.
In every programming language, the code after return is not executed, which means further action wont take place, which can be
stopping form submit
stopping navigation and hyperlink jumps
other than return false you can also use
event.preventDefault();
event.stopPropagation();
Now about form submit
A form is submitted using GET and POST which can be decided by the author using method="POST" attribute in form tag,
when nothing given by default form submits using GET
which passes values in url - ex - something.html?para1=value1¶2=value2
which is fast and less secure, every time you submit a form with get all the form elements will be passed in the url
From the jQuery submit() docs:
Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.
So what's happening is, the default event behavior triggered when the submit event occurs is being prevented.
The default method of submission for the jQuery submit function is an HTML GET, which supplies the form paramaters as a URL query, in the form of /?queryParam=value. Hence, the /? appears in the URL, with no query parameters after the /? (as none are being supplied in the form).
Hope this helps!
Return false prevents all of the default functions of html element events from firing.
An example is an html form, once you hit the submit button it's default is to navigate to another page. You don't want that to happen if you are using Ajax functions to send data to a server without leaving the page.
Another way to do it is pass an event object parameter to the event function.
Then at the beginning of the function type event.preventDefault ();.
The following link offers a good explanation of why the trailing slash is present. https://webmasters.stackexchange.com/questions/35643/is-trailing-slash-automagically-added-on-click-of-home-page-url-in-browser
your form element has no method, so default method get is set. If you click send all the input elements are added after current page+?
return false prevents the submit action to perform.
This question is inspired by this post.
In a nutshell: Why window.location.href is not redirecting to a new page (example.com) when executing the code below?
<form>
<input type="submit" id="submit" value="Submit">
</form>
<script>
document.getElementById('submit').addEventListener('click', function (e) {
window.location.href = "http://www.example.com";
});
</script>
I've always believed, that setting window.location.href immediately loads a new page, but in this case it doesn't. Submitting the form just reloads the page instead, and setting a new location seems to be totally ignored. Why? How? What I'm missing here?
Please notice, that I'm aware of several ways how to prevent form submitting in this case, rather I'd like to know, why setting location.href is ignored, what is the mechanism behind the behavior? I've tried to search explanation from the standard, but haven't found anything so far.
Additional information
This seems to happen in all major browsers (Chrome, Firefox, IE11, Edge ...), but not when the code is run in a Stack snippet (because it's sandboxed, and won't send forms anyway). A console.log put in the function shows, that the click handler is executed before the actual submission is executed.
A jsFiddle reproducing the issue.
You can see easier here what is happening step by step if you will try tu change location drunning form submission
JSFIDDLE
If you will check your browser network tab than you can see that the submit request is cancelled (but still sent) by redirect request. I believe that same situation occurs when you trying to do it onclick or onsubmit the first request just cancelling the next one and prevent window.location.href redirection.
I belive the key thing here is not to view the problem as 'form submission vs page redirect', but as an event-listeners issue.
What you are doing is to attach an event listener to an html element. And it seems that the policy of DOM elements is to execute all the event listeners first, and then the event itself . In your case, the page is redirected to the url you provided, because you set window.location inside the listener, then the submit event itself takes place, so the same blank page is reloaded
The fact that "event flow process will complete after all listeners have been triggered" is stated here: http://www.w3.org/TR/DOM-Level-2-Events/events.html
So far I haven't figgured out a way to execute the listeners after the event , but if that can be done, that is all you need to make this example work
The main issue is that there is nothing preventing the submit button from actually submitting the form. You would need a return false somewhere for that to happen. I'm not fully certain whether the Submit button logic or the click handler is happening first, but regardless, the form post is taking precedence.
I was able to get the following to work:
<html>
<head>
<script type="text/javascript">
function redirect() {
window.location.href = "http://www.example.com";
return false;
}
</script>
</head>
<body>
<form method="GET" action="">
<input type="submit" id="submitbtn" value="Submit" onclick="return redirect()" />
</form>
</body>
</html>
This example does remove the programmatic addition of the click event, but if that's a hard requirement it should be possible to add that back in.
I have a form where I've specified onSubmit="validate()", but I want to ignore the validation if the submit-button was clicked. Is there a good cross-browser way of detecting if the submit button was clicked and thus ignoring the validation?
Why don't you use a button instead of a submit, and set it's action on the click of the button? That way you can control if you want to validate, submit, or whatever else you like.
The submit event only fires if the form is submitted by the user; not if it is submitted via JS.
Therefore:
<input type="submit" onclick="this.form.submit(); return false;">
If JS is not available, this acts like a normal submit button … and the onsubmit still fails to fire as it also requires JS.
(Attaching events using JS instead of intrinsic event attributes is, as usual, preferred by excluded from this example for the sake of clarity)
you can try to use a <input type="button"... with an onClick that submits the form - a javascript .submit() doesn't fire the onSubmit-function of the form.
Did you try this?
<input type="submit" onclick="void(window.validate=function(){return true;})" value="Submit" />
Just return false, or preventDefault from your submit button handler