We Keep Coding

Using a button with JavaScript & HTML [duplicate]

This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
Closed 2 years ago.
I know, the title seems to lead to a repetitive/useless question, but I can't find a solution in other questions. Let me explain better and read what follows before closing my question.
I created a form by learning from different sources. It all seems to work fine, until I have to click on submit button, with "Save as TXT" written on it. It happens quite a strange thing:
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
I think I found why this happens, but I can't fix it. It seems to be something which has to do with both my HTML code and my JavaScript code. Here it is a part of it:
Javascript
$(function(){
$("#submitLink").click(function(event){
// things to do on submit...
});
});
HTML
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
</div>
</form>
How can I change this part of the code in order to submit successfully by clicking anywhere on the button (and do what I write in the JS function)?
Thanks in advance,
happy coding everyone!
ps. I read this "famous" question you added by after closing my question, but it is not helping me. By writing type="button" instead of type="submit" I get no results, I'm sorry

if I click on the text "Save as TXT" inside the button, it submits my data correctly;
When you click on the text itself, you are clicking the <a> element, and therefore triggering its event listener.
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
When you click on any part of the button, are triggering the <button>'s event listener.
Therefore, I suggest
So it seems like the solution is to taking the <a> element's event listener and attaching it to the <button>.
One way to do this is to replace
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
with
<button class="btn btn-primary btn-lg" id="align" onclick="{Save as TXT}" type="button">Save as TXT</button>
where "{Save as TXT}" was the code you previously had in the <a>'s href.
The reason you need to add type="button" is so you can disable the button's default behavior submitting the form (and therefore refreshing the page).
Then, since you got rid of the <a> tag, you need to attach any listeners that used to listen for clicks on the <a> tag to the <button> instead.
To do this, replace:
$("#submitLink").click(function(event){
// things to do on submit...
});
with
$("#align").click(function(event){
// things to do on submit...
});
See it in action:
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" onclick="console.log('Submitted')" type="button">Save as TXT</button>
</div>
</form>

You need for the BUTTON type 'button' but you had 'submit'. So it wants to submit the form which follows in a reloading, with button the action is needed to be done from you.
The A-tag is not needed so I deleted it. On the contrary if clicked at the corners anything happened, now this functions
<button type="button" id='btn'>Save as TXT</button>
Just test it.
$(function(){
$("#btn").click(function(event){
console.log('Submit');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="myForm" action="" id="formToSave">
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="btn" type="button">Save as TXT</button>
</div>
</form>

work with button in form without submit form jsp

I am using two buttons in <form>. one for submit form and other for add categories to textfield.
<button id="catadd" class="btn-default" onclick="me()">+ Add Category</button>
<button name="submitcreate" id="submitcreate" type="submit" class="btn-default">
categories add to textfield using JavaScript. onclick="me()" for that.
but when i click on catadd button form submit too.
how stop it.

You need to set the type attribute to button
<form>
<button type="button">click me for some js logic</button>
<button>I am a submit by default !</button>
</form>

A button with no type attribute acts as type="submit", and will attempt to submit form data when clicked.
So, the simple solution of your query would be to specify the type of the "categories add" button like:
<button id="catadd" class="btn-default" onclick="me()">+ Add Category</button>
More details here: https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9

Error clicking button in form with Jaunt

So I am trying to submit a form using Jaunt. There are two submit buttons, a check and apply. I am Trying to click the check button but am having some trouble because it cant find the button with the identifier of "check".
I am basically copying what is done on the Jaunt tutorial #15,
http://jaunt-api.com/jaunt-tutorial.htm
I have tried the value of the button as well but to no luck
Code:
form.submit("Check");
Html:
<input name="action" class="a-button-input" type="submit" value="checkValue" aria-labelledby="gc-redemption-check-value-announce">
<span id="gc-redemption-check-value-announce" class="a-button-text" aria-hidden="true">
<span id="gc-redemption-check-value-button-text" class="a-size-base">Check</span>
</span>

If the Jaunt thing is not work maybe you can try jQuery
$('.submitButton').click(function(){
$('form').submit();
});

Show save button after the form's submit on xeditable angular directive

I'm using xeditable angular directive.Could you tell me how to show the save button after the form's submit ? At this moment when we click the saveit goes to the Edit mode.That is the default behaviour.So I need to override it.That is I need to stop it and show the save button.Thanks in advance.
JSFiddle
<form editable-form name="tableform" onaftersave="saveTable()">
//Ui code here
<button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
</form>
UPDATE
Actually my use case is where I need to show the spinner until finish the form's submit.After that I'll close the whole form (this is a modal popup on my app).That's why I need to stay on that page.I'm going to show the spinner on top of the Save button.

In your code submit is on form level not at row level.
So, you have pass your validation which is checkName() function in your case (you can try by commenting it), then only it will call saveTable() function.
Or you can put your saveTable() in row level.

Your save button is inside a conditional tag that is only displayed on edit mode.
You may append it into the .btn-edit like:
<div class="btn-edit">
<button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">edit</button>
<button type="submit" ng-show="!tableform.$visible" ng-disabled="tableform.$invalid" class="btn btn-primary">save overall</button>
</div>
Take a look that using the form controller you may check if the entire form is valid or not
JSFiddle

Button redirect not working

Can someone tell me why this is not working:
<button class="btn danger" id="delete" onclick="return $(location).attr('href','http://yahoo.com');">Delete</button>
I have this placed in a form just beside the submit button. When it's clicked, it's like I clicked the submit button.

If you're trying to make the button load that URL, the correct way to do it is:
<button class="btn danger" id="delete" onclick="document.location.href = 'http://yahoo.com'">
I don't think wrapping it in jQuery helps much here since location isn't a DOM object.

Use the window.location property. See comment below.