How do I prevent my page to reload or refresh on submitting the HTML form (textarea) on a button click?

Question

Here is the form:

<form method="post">
       <label class="left margin-left-10">Involve in discussion</label>
       <br>
      <textarea name="chat" placeholder="Write.." cols="20" wrap="soft" maxlength="1000" class="left"></textarea>
      <button name="sendmsg" class="background-none text-white background-primary-hightlight text-s-size-12">Send</button>
<form>

Possible duplicate of [How to prevent form from being submitted?](http://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) — dsadnick, Apr 07 '17 at 21:29
Send the form somewhere or submit it via AJAX. Also `
` should be `
` that is currently opening a second `form`. — chris85, Apr 07 '17 at 21:29
@HaydenThring The default type of a button in a form is to submit, if undeclared. https://www.w3.org/TR/html401/interact/forms.html#adef-type-BUTTON — chris85, Apr 07 '17 at 21:34
I addressed that 7 minutes ago. `Send the form somewhere or submit it via AJAX.` — chris85, Apr 07 '17 at 21:37
@chris85 thanks i did have that suspicion, what if he used a type button, or but the button outside the form, otherwise there is javascript — Hayden Thring, Apr 07 '17 at 21:39
Look up ajax jquery docs for that, but you will make it simpler if you avoid that if possible. Just trigger the form submit with javascript, or interact with the form with javascript. You havent really said what you want to do with the form apart from just not submit it normally... — Hayden Thring, Apr 07 '17 at 22:22
@HaydenThring i am making a message box, in that i am receiving and sending messages. Now coming back to this form I am sending a message which is the value user inputs in . The problem is every time I submit the form the page refreshes. I want to prevent that refresh. I hope you understand now. — Mohammad Aitisam Yaseen, Apr 08 '17 at 08:22
Sure, than if you want to submit and receive data without page load/refresh you need ajax, look up the simplified $.get and $.post commands in jquery. — Hayden Thring, Apr 08 '17 at 11:42

score 0 · Answer 1 · answered Apr 07 '17 at 21:46

0

Make

<button name="sendmsg" class="background-none text-white background-primary-hightlight text-s-size-12">Send</button>

This

<input type="button" value="Send" name="sendmsg" class="background-none text-white background-primary-hightlight text-s-size-12" />

answered Apr 07 '17 at 21:46

Hayden Thring

1,718
17
25

My main problem is to prevent page refresh on submitting the form on a button click. Is this replacement a solution? Hayden Thring – Mohammad Aitisam Yaseen Apr 07 '17 at 21:50
Correct, it should do nothing when clicked with the replacement code suggested. – Hayden Thring Apr 07 '17 at 22:08
You can also just use `type="button"` in the original code, so that the button isn't a submit button. – Barmar Apr 07 '17 at 22:17
so – Hayden Thring Apr 07 '17 at 22:19
@HaydenThring I just removed the button now sumitting it with the Enter key. – Mohammad Aitisam Yaseen Apr 08 '17 at 08:24
If you dont want to do that you can use the onsubmit option in the form tag , and simply return false https://www.w3schools.com/jsref/event_onsubmit.asp – Hayden Thring Apr 08 '17 at 11:40

How do I prevent my page to reload or refresh on submitting the HTML form (textarea) on a button click?

1 Answers1