javascript form submit not working

Question

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

are you programmatically setting `action` attribute in your `form`...as I dont see it — Vikram, Feb 20 '14 at 15:16
I do, and even the suggestion with replacing the jquery with non jquery still redirects. — user2963178, Feb 20 '14 at 15:27

score 1 · Accepted Answer · edited Feb 20 '14 at 15:33

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>

edited Feb 20 '14 at 15:33

Satpal

132,252
13
159
168

answered Feb 20 '14 at 15:28

Julien Greard

969
1
12
32

@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. – Patrick Q Feb 20 '14 at 15:39
Well this example works, but when I added the event.preventDefault() into the script on my main page at http://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... – user2963178 Feb 20 '14 at 15:45
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. – user2963178 Feb 20 '14 at 15:46
Patrick Q is right, you need to put the Javascript binding code AFTER your html form. I just did it, it works perfectly – Julien Greard Feb 20 '14 at 15:47
Ah I didn't understand what he meant. Yes now it works with that change. – user2963178 Feb 20 '14 at 15:51
there is also "event" missing in the call of the function... function(event){} instead of function(){} – Julien Greard Feb 20 '14 at 15:55

score 0 · Answer 2 · answered Feb 20 '14 at 15:17

0

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.

answered Feb 20 '14 at 15:17

juminoz

3,168
7
35
52

That's not the issue. By default the page would post back on itself. – Patrick Q Feb 20 '14 at 15:19
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. – user2963178 Feb 20 '14 at 15:20
Submit function callback is working fine. Checkout the fiddle http://jsfiddle.net/ankur1990/935V6/ – Ankur Aggarwal Feb 20 '14 at 15:23

score 0 · Answer 3 · answered Feb 20 '14 at 15:19

0

remove line return false;

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

answered Feb 20 '14 at 15:19

vadim.zhiltsov

9,294
2
15
16

score 0 · Answer 4 · answered Feb 20 '14 at 15:22

0

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

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

answered Feb 20 '14 at 15:22

PatAtCP

577
3
10

that doesn't work either. I'm putting the url of the file up in the OP. http://probuling.net/sandbox/test.html – user2963178 Feb 20 '14 at 15:26
I just tried your test page and it works as expected for me (on Chrome). What browser are you using? Did you disable javascript? – PatAtCP Feb 20 '14 at 16:34

javascript form submit not working

4 Answers4