How can I disable buttons and allow the form to submit?-CodePudding

Im trying to disable the clicked button and change its src after the form is submitted.The form works, but when i add the code to disable the button. It doesnt submit the form it seems. can i listen for formsubmit in my script file, wait for completion before diabling?

All buttons in table will have different ids like 'A1' 'A2' 'B3' etc...

server.js

//Get Random Index of 'Released Pokemon' For It's Pokedex #ID
const releasedPokemon = [1, 4, 7, 10, 13, 16, 19, 21, 23, 25, 27, 29, 32, 35, 37, 39, 41, 43, 46, 48, 50, 52, 54, 56, 58, 60, 63, 66, 69, 72, 74, 77];
app.post('/encounter', async function(req, res) {
  console.log('POST: /encounter');
  //Catch random pokemon

  //await Fishing.findOneAndUpdate( { _id: fishing._id }, { fishCaught: req.body.fishCaught } );

  const index = Math.floor(Math.random() * releasedPokemon.length);
  const dex = releasedPokemon[index];
  const pokemon = await PokeAPI.pokeAPI(dex);
  console.log("Encountered: "   pokemon.name);
  profile = await CreateProfile.createProfile(profile.username, profile.password);
  res.render('catchPokemon', {
    name: pokemon.name,
    dex: '[DEX]',
    type: pokemon.type,
    statValue: pokemon.statValue,
    img: pokemon.img,
    imgShiny: pokemon.imgShiny,
    profile: profile,
    pokemon: pokemon
  });
});



script.js

function catchPokemon(id) {
  document.getElementById(id   'Btn').disabled = true;
  document.getElementById(id).src = "";
  alert(id);
}

<button id="A1Btn" style="background-color: black;">
     <img type="image" src="https://i.imgur.com/E3zy5Hk.png" alt="Catch Pokemon" id="A1"            onclick="catchPokemon(this.id)" width="75" height="75">
</button>

<!-- these buttons are repeated in a table 5 * 5 grid. Table is surrounded by  -->

<!-- Table is surrounded by -->
<form method="post" action="/encounter">
</form>

CodePudding user response：

<button type='submit' disabled={isDisabled}></button>

isDisabled is some variable which is boolean or some function which retur boolean value and on true it will be disabled. And when button type is submit on click it you will submit form

CodePudding user response：

The only reason a submit button needs to be disabled during a submit is to prevent the user from clicking whilst in the midst of a submit thereby the previous request to server being overridden and so on. Instead of disabling anything you should have an overlay element temporarily cover the whole page for about 2 seconds (totally adjustable delay).

The example below will post to a live server, for 2 seconds an overlay with an animated loading gif will cover the page, and the server response will be displayed in an iframe.

HTML

Assign an #id or a [name] to <form>
Add a block level tag (ex. <div>, <section>, anything styled with display: block, etc), as a child of <body> (ie a direct descendant).
```
  <body>
    <output id='loader' form='UI'></output>
    <form id='UI'>...</form>
    ...
  </body>
```

CSS

Add the following to <style> tag or stylesheet:

  body { position: relative }
  .loading { 
     background: 
     url('https://example.com/path/to/loader.gif') 
     no-repeat center center;
     position: absolute;
     top: 0; bottom: 0; left: 0; right: 0; z-index: 1;
     height: 100%; width: 100%;
     display: block; /* only if #loader is an inline tag */
   }

JavaScript

Use HTMLFormElement interface syntax to reference <form>, <input>s, and <output> (even <fieldset>), it's terse and standard for years
```
  const form = document.forms.UI;
```

Bind an event handler to the <form> to listen for the "submit" event.

  form.onsubmit = loadHandler;
  // OR
  form.addEventListener('submit', loadHandler);

Design the event handler (ie loadHandler(e)) to add .loading class to #loader tag and then remove .loading class after 2 seconds. See example.

const form = document.forms.UI;

form.onsubmit = loadHandler;

function loadHandler(e) {
  const io = this.elements;
  io.loader.classList.add('loading');
  let pause = setTimeout(() => io.loader.classList.remove('loading'), 2000);
};

:root {
  font: 2ch/1 Consolas
}

body {
  font-size: 2ch;
  position: relative;
}

fieldset {
  display: flex;
  align-items: center;
  margin-bottom: 8px
}

input {
  display: inline-block;
  font: inherit;
  font-size: 100%;
  height: 50px;
  padding: 0px 8px;
  box-sizing: content-box
}

.img {
  width: 50px;
  cursor: pointer;
}

iframe {
  display: block;
  width: 100%
}

.loading {
  display: block;
  background: url('https://i.ibb.co/JzHkDb8/loading-buffering.gif') no-repeat center center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

<output id='loader' form='UI'></output>
<form id='UI' action='https://httpbin.org/post' method='post' target='response'>
  <fieldset>
    <legend>POST to Test Server</legend>
    <input name='test' value='test'>
    <input name='btn' class='img' src='https://i.ibb.co/6Y5DH5g/01.png' type='image'>
  </fieldset>
</form>
<fieldset>
  <legend>Server Response</legend>
  <iframe name='response'></iframe>
</fieldset>