0

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

hellomynameisA
  • 546
  • 1
  • 7
  • 28
  • `javascript://Save as TXT` is not a valid URL and will generate JavaScript errors trying to process it because `Save as TXT` is not valid JavaScript. Hint: do not use the, `javascript://` pseudo protocol, and avoid antiquated tutorials still using it. :-) – traktor Aug 20 '20 at 23:58

2 Answers2

1

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>
Sascha
  • 4,576
  • 3
  • 13
  • 34
  • At first I thought this was the best solution, but I'm sorry it's still not working. For example, if I click on a corner of your button it still doesn't work. – hellomynameisA Aug 20 '20 at 21:21
  • You are right, the A-tag was disturbing. After deleteing from it, it works on the corner too. – Sascha Aug 20 '20 at 21:32
1
  • 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>
Kyle Lin
  • 827
  • 8
  • 16