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>

Using multiple submit buttons in one form with a tag?

I am using submit button with a tag. However, one more button needs to be used.
Can I use two submit buttons with a tag in one form?
<div>
...
<form id="action-1" action='my action1 html' method="post">
<input class="mini-action" type="text" name="mini" value="1">
</form>
</div>
<div class="details">
// A tag submit button currently in use
<a title="action1" href="#" onclick="document.getElementById('action-1').submit()">action-1</a>
</div>
<div class="details">
// ToDo: Here I want to send to action2 url when submit button is clicked.
<a title="action2" href="#" onclick="document.getElementById('action-2').submit()">action-2</a>
</div>

The tags you used are not submit buttons but links hijacked to act as buttons, additionally it is considered to be best practice to place the submit buttons inside the form they submit.
You can override the submit button's action with the attribute formaction
<form action="action-1">
<!-- input fields go here -->
<button type="submit">this will trigger action-1</button>
<button type="submit" formaction="action-2">this will trigger action-2</button>
</form>

Simple login system UserController

I have the following:
a login route in app.js that sets success: false if invalid password or username.
but for some reason in the actual login html the authentication process is completely ignored.
Am I missing something?

You are using an href. You need to have a button of a submit type to submit the form.
Change your <div class="form-login" ng-submit="login()"> line to:
<form class="form-login" ng-submit="login()">. That will tell Angular this is a form. Then, change your closing </div> to </form> as well.
<span class="group-btn">
<button type="submit" class="btn btn-primary btn-md">
login <i class="fa fa-sign-in"></i>
</button>
</span>

Django Alert message On Submit

I am trying to display a simple alert message once a user clicks the Save and Email to Corporate button inside of a modal. The modal submits the form and sends an email based on the auth.users group so the load takes a second. I need to alert the user of this after they submit so they do not continue to click the button. I don't need anything fancy, so I am using <div onsubmit="myfunction"> and <script> to display the alert. This worked the first time but that was it.
How would I code this in the <div> and <script> to work every time, or is there better solution?
template.html
</div>
<div class="modal-footer">
<div onsubmit="myFunction">
<input type="submit" form="formset" class="btn btn-primary" value="Save and Email to Corporate">
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
script
<script>
function myFunction() {
alert("The email was submitted");
}
</script>

angular js on enter prevent submit

I am new to angular js and I am developing a form which has many input fields and two buttons- one for cancel and another one for submitting the form.
i am having a ng-submit="" on the form tag to recognize if the form is submitted and show some error messages.
Problem i am facing is when i click on enter 'cancel' button is triggered. How do i prevent this?
I tried adding type=input on the button but it does not work.
<button type="button" ng-click="function">Cancel</button>
I cannot change the button tag to input tag as i am applying some styles and i am losing them if i change the tag.
How do I achieve this?
Thanks in advance.
UPDATE:
below is the code for button.
<div class="button-group-right" style="width:49%; float:left">
<button class="btn btn-large btn-tertiary btn-right" ng-click="subnmitPage()">
<span class="btn-text">
<span class="btn-text-container">Submit</span>
</span>
<span class="btn-icon">
<i class="navigateright button-icon"></i>
</span>
</button>
</div>

i fixed it by adding $event in my function and saying preventDefault().
code below.
in html:
<button ng-click="subnmitPage($event)"/>
and in controller
$scope.subnmitPage=function(event){
event.preventDefault();
}