Html form tag that blocks a click counter button

On my chrome extension I try to create a click counter with a reset button but I have a little problem, the two buttons are in an html form tag which blocks them but when I put the two buttons outside the Form tag it works, my question is there a way to put the two buttons in the form tag without them being blocked?

here is the content of my popup.html

<!doctype html>
<html>
    <head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<center>
<div class="box">
<form name="myForm" id="myForm">
<h2> Please enter a code </h2>
 <button id="btn" title="Entrée"></button> 
 <button id="reset-button" title="Actualiser">&#11118;</button> 
<input name="inpt" id="inpt" maxlength="10" autocomplete="off"/>
<h3 id="counter-label" title="Nombre de ticket créer">0</h3>

</form>
<!-- <button id="btn" title="Entrée"></button> -->
<!--   <button id="reset-button" title="Actualiser">&#11118;</button> -->
</div>
</center>
</body>
<script src="popup.js"></script>
</html>

And here is the content of my popup.js

window.addEventListener('DOMContentLoaded', setUpStuff, false);
function setUpStuff(){
document.getElementById("inpt").focus();
    let optionsButton = document.getElementById('btn');
    optionsButton.addEventListener('click', function() {
var empt = document.myForm.inpt.value;
if (empt === "")
{
//coller
document.execCommand("paste");
                 navigator.clipboard.readText()
      .then(txt => {
      document.getElementById("inpt").value = txt;
     })
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {functionnum: document.getElementById("inpt").value.toUpperCase()});

  });
return false;
}
else
{
//sans coller
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {functionnum: document.getElementById("inpt").value.toUpperCase()});
        });
return true;
}
       
});
}

//counter+reset
document.addEventListener('DOMContentLoaded', function() {
var clickbtn = document.getElementById('btn');
var resetBtn = document.getElementById('reset-button');
var x=0
clickbtn.addEventListener("click", function onClick() {
let counter = document.getElementById('counter-label');
x = x+1;
document.getElementById('counter-label').innerHTML = x;
});
resetBtn.addEventListener("click", function onClick() {
x=0 ;
document.getElementById('counter-label').innerHTML = x;
});

});

Hi,

I still had the code from the previous extension, so I thought I’d give this a go. Unfortunately, the code you posted above doesn’t let me recreate your problem.

If I had to guess, I’d say that buttons inside form tags generally tend to submit the form (their type defaults to submit), so that could be causing you problems. Try giving the buttons a type of “button” and see if that helps:

<button type="button" id="btn" title="Entrée">Entrée</button>

Hi,

when i add type=“button” to button id=“btn” and I click on enter nothing happens the counter is not blocked but the enter button does not work in this case

Ok. Can you then please add enough code that I can reproduce your problem and let me know which site I can test it against (if that is important).

1 Like

That you say that it works when the buttons are located outside the form tag shows that the js code is working and that it is probably running before the DOM is fully created.
My solution would be to include a “defer” attribute in the “script” tag.
I would also relocate the script tag as a child of the “head” tag.

1 Like

Thank you very much, finally I was able to solve the problem