in jquery event.preventDefault not working [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
I am trying to call jquery's preventDefault() but when I submit the form..it shows the default behaviour and the page gets reloaded.
index.html--
<body>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/script.js"></script>
<p>Welcome to the chat app!</p>
<ol id="messages"></ol>
<form id="message-form">
<input type="text" name="message" placeholder="Message"/><br>
<button>Send</button>
</form>
</body>
script.js---
jQuery('#message-form').on('submit',function(e)
e.preventDefault();
socket.emit('createMessage',
From:'User',
Text:jQuery('[name=message]').val()
);
return false;
);
javascript jquery node.js socket.io event-handling
asked Nov 11 at 15:03
shubham arora
13
marked as duplicate by charlietfl javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 11 at 15:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
I am trying to call jquery's preventDefault() but when I submit the form..it shows the default behaviour and the page gets reloaded.
index.html--
<body>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/script.js"></script>
<p>Welcome to the chat app!</p>
<ol id="messages"></ol>
<form id="message-form">
<input type="text" name="message" placeholder="Message"/><br>
<button>Send</button>
</form>
</body>
script.js---
jQuery('#message-form').on('submit',function(e)
e.preventDefault();
socket.emit('createMessage',
From:'User',
Text:jQuery('[name=message]').val()
);
return false;
);
javascript jquery node.js socket.io event-handling
asked Nov 11 at 15:03
shubham arora
13
marked as duplicate by charlietfl javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 11 at 15:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Is that script wrapped in jQuery.ready? If not since it is in the head it will not find the form because it doesn't exist yet. Also any errors in browser console?
– charlietfl
Nov 11 at 15:04
Nope. It's not wrapped inside jquery.ready method
– shubham arora
Nov 11 at 15:07
So does that fix the problem when it is?
– charlietfl
Nov 11 at 15:07
Thanks man!! that works fine
– shubham arora
Nov 11 at 15:17
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
I am trying to call jquery's preventDefault() but when I submit the form..it shows the default behaviour and the page gets reloaded.
index.html--
<body>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/script.js"></script>
<p>Welcome to the chat app!</p>
<ol id="messages"></ol>
<form id="message-form">
<input type="text" name="message" placeholder="Message"/><br>
<button>Send</button>
</form>
</body>
script.js---
jQuery('#message-form').on('submit',function(e)
e.preventDefault();
socket.emit('createMessage',
From:'User',
Text:jQuery('[name=message]').val()
);
return false;
);
javascript jquery node.js socket.io event-handling
asked Nov 11 at 15:03
shubham arora
13
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
I am trying to call jquery's preventDefault() but when I submit the form..it shows the default behaviour and the page gets reloaded.
index.html--
<body>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/script.js"></script>
<p>Welcome to the chat app!</p>
<ol id="messages"></ol>
<form id="message-form">
<input type="text" name="message" placeholder="Message"/><br>
<button>Send</button>
</form>
</body>
script.js---
jQuery('#message-form').on('submit',function(e)
e.preventDefault();
socket.emit('createMessage',
From:'User',
Text:jQuery('[name=message]').val()
);
return false;
);
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
javascript jquery node.js socket.io event-handling
javascript jquery node.js socket.io event-handling
asked Nov 11 at 15:03
shubham arora
13
asked Nov 11 at 15:03
shubham arora
13
asked Nov 11 at 15:03
shubham arora
13
asked Nov 11 at 15:03
shubham arora
13
asked Nov 11 at 15:03
shubham arora
13
13
marked as duplicate by charlietfl javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 11 at 15:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by charlietfl javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 11 at 15:20
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Is that script wrapped in jQuery.ready? If not since it is in the head it will not find the form because it doesn't exist yet. Also any errors in browser console?
– charlietfl
Nov 11 at 15:04
Nope. It's not wrapped inside jquery.ready method
– shubham arora
Nov 11 at 15:07
So does that fix the problem when it is?
– charlietfl
Nov 11 at 15:07
Thanks man!! that works fine
– shubham arora
Nov 11 at 15:17
add a comment |
1
Is that script wrapped in jQuery.ready? If not since it is in the head it will not find the form because it doesn't exist yet. Also any errors in browser console?
– charlietfl
Nov 11 at 15:04
Nope. It's not wrapped inside jquery.ready method
– shubham arora
Nov 11 at 15:07
So does that fix the problem when it is?
– charlietfl
Nov 11 at 15:07
Thanks man!! that works fine
– shubham arora
Nov 11 at 15:17
1
1
Is that script wrapped in jQuery.ready? If not since it is in the head it will not find the form because it doesn't exist yet. Also any errors in browser console?
– charlietfl
Nov 11 at 15:04
Is that script wrapped in jQuery.ready? If not since it is in the head it will not find the form because it doesn't exist yet. Also any errors in browser console?
– charlietfl
Nov 11 at 15:04
Nope. It's not wrapped inside jquery.ready method
– shubham arora
Nov 11 at 15:07
Nope. It's not wrapped inside jquery.ready method
– shubham arora
Nov 11 at 15:07
So does that fix the problem when it is?
– charlietfl
Nov 11 at 15:07
So does that fix the problem when it is?
– charlietfl
Nov 11 at 15:07
Thanks man!! that works fine
– shubham arora
Nov 11 at 15:17
Thanks man!! that works fine
– shubham arora
Nov 11 at 15:17
add a comment |
2 Answers
2
active
oldest
votes
up vote
-1
down vote
If you have a look at the W3C specification, it would seem obvious thing to try to mark your button elements with type='button' when you don't want them to submit.
A button element with no type attribute specified in form represents the same thing as a button element with its type attribute set to "submit"
You should make your button type as "button" and try the code. It should not reload the page.
answered Nov 11 at 15:08
nkuma_12
52712
No. Then the submit event won't trigger on the form. You need a submit button for that to occur
– charlietfl
Nov 11 at 15:15
It will still trigger, we have a click event attached in the script so that function will be triggered and you can submit the form there.
– nkuma_12
Nov 11 at 15:24
Right now since the button acts as a submit type the jQuery('#message-form').on('submit',function(e).. will not even be in picture since page reloads
– nkuma_12
Nov 11 at 15:25
No you are understanding it wrong. A submit button will trigger the submit event that OP is listening to. Atype="button"also prevents user submitting by hitting enter key on keyboard. the preventDefault() stops the default submit process
– charlietfl
Nov 11 at 15:26
add a comment |
up vote
-1
down vote
Change that button element completely with <input type="submit" value="Send."/> and see if that'll work.
answered Nov 11 at 15:10
Minder Mondo
1336
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
-1
down vote
If you have a look at the W3C specification, it would seem obvious thing to try to mark your button elements with type='button' when you don't want them to submit.
A button element with no type attribute specified in form represents the same thing as a button element with its type attribute set to "submit"
You should make your button type as "button" and try the code. It should not reload the page.
answered Nov 11 at 15:08
nkuma_12
52712
No. Then the submit event won't trigger on the form. You need a submit button for that to occur
– charlietfl
Nov 11 at 15:15
It will still trigger, we have a click event attached in the script so that function will be triggered and you can submit the form there.
– nkuma_12
Nov 11 at 15:24
Right now since the button acts as a submit type the jQuery('#message-form').on('submit',function(e).. will not even be in picture since page reloads
– nkuma_12
Nov 11 at 15:25
No you are understanding it wrong. A submit button will trigger the submit event that OP is listening to. Atype="button"also prevents user submitting by hitting enter key on keyboard. the preventDefault() stops the default submit process
– charlietfl
Nov 11 at 15:26
add a comment |
up vote
-1
down vote
If you have a look at the W3C specification, it would seem obvious thing to try to mark your button elements with type='button' when you don't want them to submit.
A button element with no type attribute specified in form represents the same thing as a button element with its type attribute set to "submit"
You should make your button type as "button" and try the code. It should not reload the page.
answered Nov 11 at 15:08
nkuma_12
52712
No. Then the submit event won't trigger on the form. You need a submit button for that to occur
– charlietfl
Nov 11 at 15:15
It will still trigger, we have a click event attached in the script so that function will be triggered and you can submit the form there.
– nkuma_12
Nov 11 at 15:24
Right now since the button acts as a submit type the jQuery('#message-form').on('submit',function(e).. will not even be in picture since page reloads
– nkuma_12
Nov 11 at 15:25
No you are understanding it wrong. A submit button will trigger the submit event that OP is listening to. Atype="button"also prevents user submitting by hitting enter key on keyboard. the preventDefault() stops the default submit process
– charlietfl
Nov 11 at 15:26
add a comment |
up vote
-1
down vote
up vote
-1
down vote
If you have a look at the W3C specification, it would seem obvious thing to try to mark your button elements with type='button' when you don't want them to submit.
A button element with no type attribute specified in form represents the same thing as a button element with its type attribute set to "submit"
You should make your button type as "button" and try the code. It should not reload the page.
answered Nov 11 at 15:08
nkuma_12
52712
If you have a look at the W3C specification, it would seem obvious thing to try to mark your button elements with type='button' when you don't want them to submit.
A button element with no type attribute specified in form represents the same thing as a button element with its type attribute set to "submit"
You should make your button type as "button" and try the code. It should not reload the page.
answered Nov 11 at 15:08
nkuma_12
52712
answered Nov 11 at 15:08
nkuma_12
52712
answered Nov 11 at 15:08
nkuma_12
52712
answered Nov 11 at 15:08
nkuma_12
52712
52712
No. Then the submit event won't trigger on the form. You need a submit button for that to occur
– charlietfl
Nov 11 at 15:15
It will still trigger, we have a click event attached in the script so that function will be triggered and you can submit the form there.
– nkuma_12
Nov 11 at 15:24
Right now since the button acts as a submit type the jQuery('#message-form').on('submit',function(e).. will not even be in picture since page reloads
– nkuma_12
Nov 11 at 15:25
No you are understanding it wrong. A submit button will trigger the submit event that OP is listening to. Atype="button"also prevents user submitting by hitting enter key on keyboard. the preventDefault() stops the default submit process
– charlietfl
Nov 11 at 15:26
add a comment |
No. Then the submit event won't trigger on the form. You need a submit button for that to occur
– charlietfl
Nov 11 at 15:15
It will still trigger, we have a click event attached in the script so that function will be triggered and you can submit the form there.
– nkuma_12
Nov 11 at 15:24
Right now since the button acts as a submit type the jQuery('#message-form').on('submit',function(e).. will not even be in picture since page reloads
– nkuma_12
Nov 11 at 15:25
No you are understanding it wrong. A submit button will trigger the submit event that OP is listening to. Atype="button"also prevents user submitting by hitting enter key on keyboard. the preventDefault() stops the default submit process
– charlietfl
Nov 11 at 15:26
No. Then the submit event won't trigger on the form. You need a submit button for that to occur
– charlietfl
Nov 11 at 15:15
No. Then the submit event won't trigger on the form. You need a submit button for that to occur
– charlietfl
Nov 11 at 15:15
It will still trigger, we have a click event attached in the script so that function will be triggered and you can submit the form there.
– nkuma_12
Nov 11 at 15:24
It will still trigger, we have a click event attached in the script so that function will be triggered and you can submit the form there.
– nkuma_12
Nov 11 at 15:24
Right now since the button acts as a submit type the jQuery('#message-form').on('submit',function(e).. will not even be in picture since page reloads
– nkuma_12
Nov 11 at 15:25
Right now since the button acts as a submit type the jQuery('#message-form').on('submit',function(e).. will not even be in picture since page reloads
– nkuma_12
Nov 11 at 15:25
No you are understanding it wrong. A submit button will trigger the submit event that OP is listening to. A
type="button" also prevents user submitting by hitting enter key on keyboard. the preventDefault() stops the default submit process– charlietfl
Nov 11 at 15:26
No you are understanding it wrong. A submit button will trigger the submit event that OP is listening to. A
type="button" also prevents user submitting by hitting enter key on keyboard. the preventDefault() stops the default submit process– charlietfl
Nov 11 at 15:26
add a comment |
up vote
-1
down vote
Change that button element completely with <input type="submit" value="Send."/> and see if that'll work.
answered Nov 11 at 15:10
Minder Mondo
1336
add a comment |
up vote
-1
down vote
Change that button element completely with <input type="submit" value="Send."/> and see if that'll work.
answered Nov 11 at 15:10
Minder Mondo
1336
add a comment |
up vote
-1
down vote
up vote
-1
down vote
Change that button element completely with <input type="submit" value="Send."/> and see if that'll work.
answered Nov 11 at 15:10
Minder Mondo
1336
Change that button element completely with <input type="submit" value="Send."/> and see if that'll work.
answered Nov 11 at 15:10
Minder Mondo
1336
answered Nov 11 at 15:10
Minder Mondo
1336
answered Nov 11 at 15:10
Minder Mondo
1336
answered Nov 11 at 15:10
Minder Mondo
1336
1336
add a comment |
add a comment |
1
Is that script wrapped in jQuery.ready? If not since it is in the head it will not find the form because it doesn't exist yet. Also any errors in browser console?
– charlietfl
Nov 11 at 15:04
Nope. It's not wrapped inside jquery.ready method
– shubham arora
Nov 11 at 15:07
So does that fix the problem when it is?
– charlietfl
Nov 11 at 15:07
Thanks man!! that works fine
– shubham arora
Nov 11 at 15:17