javascript form submit not working

Question 1

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.net/sandbox/test.html

Question 2

are you programmatically setting action attribute in your form...as I dont see it

Question 3

need to set method attribute for form too...

Question 4

It doesn't redirect: jsfiddle.net/3RAPj

Question 5

You do have jQuery loaded, right?

Question 6

I do, and even the suggestion with replacing the jquery with non jquery still redirects.

Question 7

Here 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>

Question 8

@user2963178 I think the problem was that you were calling that js before the DOM was loaded. Therefore, you were trying to attach an event to an element that didn't exist yet.

Question 9

Well this example works, but when I added the event.preventDefault() into the script on my main page at probuling.net/sandbox/test.html it still redirects... and jquery is included so I'm still as confused as before. It didn't help that it actually took about 5 minutes of ftping before ipage would stop replacing my file with a blank file lol...

Question 10

and when it redirects it redirects to an old version of the page but of the same name... which does not have jquery, sometimes has different text on the page, and has an old css file which is no longer included.

Question 11

Patrick Q is right, you need to put the Javascript binding code AFTER your html form. I just did it, it works perfectly

Question 12

Ah I didn't understand what he meant. Yes now it works with that change.

Question 13

Add action attribute to the form or you are just refreshing the page on submit.

<form id="editingForm" action="/another/url">

I would recommend 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.

Question 14

That's not the issue. By default the page would post back on itself.

Question 15

I know how to use normal form submit. What I want is for it to not refresh the page or load any other page. Basically the input fields let the user modify the CSS of some elements on the page, and a textarea lets the user modify the contents of those elements as well. So when the form is submitted I want it to just run the javascript functions, which do all the work. I have it all working in the sense that I tied it to an onclick of a button, and so it works nicely with that. However I can't get it to work with the form, so that's what I'm interested in.

Question 16

Submit function callback is working fine. Checkout the fiddle jsfiddle.net/ankur1990/935V6

Question 17

remove line return false;

This prevent default event. Read more detail: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Question 18

try doing it without jQuery. Also, try using the event.preventDefault

document.querySelector('#editingForm').onsubmit = function(event) {
 alert('abc');
 event.preventDefault();
 return false;
};

Question 19

that doesn't work either. I'm putting the url of the file up in the OP. probuling.net/sandbox/test.html

Question 20

I just tried your test page and it works as expected for me (on Chrome). What browser are you using? Did you disable javascript?

Julien Greard 1,0491 gold badge14 silver badges34 bronze badges · Accepted Answer · 2014-02-20 15:28:32Z

1

Here 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>

Share

Improve this answer

edited Feb 20, 2014 at 15:33

Satpal's user avatar

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Feb 20, 2014 at 15:28

Julien Greard's user avatar

Julien Greard

1,0491 gold badge14 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Patrick Q

Patrick Q Over a year ago

@user2963178 I think the problem was that you were calling that js before the DOM was loaded. Therefore, you were trying to attach an event to an element that didn't exist yet.

2014年02月20日T15:39:20.303Z+00:00

user2963178

user2963178 Over a year ago

Well this example works, but when I added the event.preventDefault() into the script on my main page at probuling.net/sandbox/test.html it still redirects... and jquery is included so I'm still as confused as before. It didn't help that it actually took about 5 minutes of ftping before ipage would stop replacing my file with a blank file lol...

2014年02月20日T15:45:37.203Z+00:00

user2963178

user2963178 Over a year ago

and when it redirects it redirects to an old version of the page but of the same name... which does not have jquery, sometimes has different text on the page, and has an old css file which is no longer included.

2014年02月20日T15:46:54.05Z+00:00

Julien Greard

Julien Greard Over a year ago

Patrick Q is right, you need to put the Javascript binding code AFTER your html form. I just did it, it works perfectly

2014年02月20日T15:47:23.99Z+00:00

user2963178

user2963178 Over a year ago

Ah I didn't understand what he meant. Yes now it works with that change.

2014年02月20日T15:51:29.333Z+00:00

|

CollectivesTM on Stack Overflow

javascript form submit not working

4 Answers 4

6 Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

4 Answers 4

6 Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related