Using a button with JavaScript & HTML [duplicate]

• 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"><a href="javascript://Save as TXT" id="submitLink">Save as TXT</a></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>