As according to the advice at Prevent form redirect OR refresh on submit? , I have my form which is
<form id="editingForm">
Line height (between 10 and 60):
<input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
<input type="submit" id="submitLineChange" value="Submit">
</form>
In a file called test.html. The javascript is
$('#editingForm').submit(function(){
alert("abc");
return false;
});
The intent is to have the function be called, and then javascript can do something to the page, but the page is not reloaded or redirected elsewhere. However, instead what I get is say I set LineHeightEntry to 40 and hit submit. Then it redirects to test.html?LineHeightEntry=40. Why does it do that?
edit - The file is at .html
As according to the advice at Prevent form redirect OR refresh on submit? , I have my form which is
<form id="editingForm">
Line height (between 10 and 60):
<input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
<input type="submit" id="submitLineChange" value="Submit">
</form>
In a file called test.html. The javascript is
$('#editingForm').submit(function(){
alert("abc");
return false;
});
The intent is to have the function be called, and then javascript can do something to the page, but the page is not reloaded or redirected elsewhere. However, instead what I get is say I set LineHeightEntry to 40 and hit submit. Then it redirects to test.html?LineHeightEntry=40. Why does it do that?
edit - The file is at http://probuling/sandbox/test.html
Share Improve this question edited May 23, 2017 at 12:17 CommunityBot 11 silver badge asked Feb 20, 2014 at 15:11 user2963178user2963178 51 gold badge1 silver badge6 bronze badges 5-
1
are you programmatically setting
actionattribute in yourform...as I dont see it – Vikram Commented Feb 20, 2014 at 15:16 - need to set method attribute for form too... – rt2800 Commented Feb 20, 2014 at 15:16
- 1 It doesn't redirect: jsfiddle/3RAPj – veelen Commented Feb 20, 2014 at 15:17
- You do have jQuery loaded, right? – Patrick Q Commented Feb 20, 2014 at 15:18
- I do, and even the suggestion with replacing the jquery with non jquery still redirects. – user2963178 Commented Feb 20, 2014 at 15:27
4 Answers
Reset to default 1Here is a working example:
<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
<form id="editingForm" action="toto">
Line height (between 10 and 60):
<input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
<input type="submit" id="submitLineChange" value="Submit">
</form>
<script>
$('#editingForm').submit(function(event)
{
alert("abc");
event.preventDefault(); // if you want to disable the action
return false;
});
</script>
</html>
Add action attribute to the form or you are just refreshing the page on submit.
<form id="editingForm" action="/another/url">
I would remend learning how to use normal form submit before even try using Javascript. Any input with name attribute will be appended to the URL since you have no action and default method is set to GET.
remove line return false;
This prevent default event. Read more detail: http://fuelyourcoding./jquery-events-stop-misusing-return-false/
try doing it without jQuery. Also, try using the event.preventDefault
document.querySelector('#editingForm').onsubmit = function(event) {
alert('abc');
event.preventDefault();
return false;
};
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745252463a4618759.html
评论列表（0条）