recherche

Maison  >  Questions et réponses  >  le corps du texte

Façons de protéger le formulaire contre la soumission du bouton

Sur la page suivante, en utilisant Firefox, la suppression du bouton soumet le formulaire, mais pas l'ajout du bouton.

Comment empêcher le bouton remove de soumettre un formulaire ? 


function addItem() {
  var v = $('form :hidden:last').attr('name');
  var n = /(.*)input/.exec(v);

  var newPrefix;
  if (n[1].length == 0) {
    newPrefix = '1';
  } else {
    newPrefix = parseInt(n[1]) + 1;
  }

  var oldElem = $('form tr:last');
  var newElem = oldElem.clone(true);
  var lastHidden = $('form :hidden:last');

  lastHidden.val(newPrefix);

  var pat = '="' + n[1] + 'input';

  newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '="' + newPrefix + 'input'));
  newElem.appendTo('table');
  $('form :hidden:last').val('');
}

function removeItem() {
  var rows = $('form tr');
  if (rows.length > 2) {
    rows[rows.length - 1].html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<html>
<body>
    <form autocomplete="off" method="post" action="">
        <p>Title:<input type="text" /></p>
        <button onclick="addItem(); return false;">Add Item</button>
        <button onclick="removeItem(); return false;">Remove Last Item</button>
        <table>
            <th>Name</th>

            <tr>
                <td><input type="text" id="input1" name="input1" /></td>
                <td><input type="hidden" id="input2" name="input2" /></td>
            </tr>
        </table>
        <input id="submit" type="submit" name="submit" value="Submit">
    </form>
</body>

</html>


P粉245276769P粉245276769415 Il y a quelques jours653

répondre à tous(1)je répondrai

  • P粉908138620

    P粉9081386202023-10-11 09:42:03

    Vous utilisez un élément bouton HTML5. N'oubliez pas que la raison est que ce bouton a un comportement de soumission par défaut, comme indiqué dans la spécification W3, comme suit : Bouton HTML5 W3C

    Vous devez donc préciser explicitement son type : 

    <button type="button">Button</button>

    Pour remplacer le type de soumission par défaut. Je voulais juste souligner pourquoi cela se produit.

    répondre
    0
  • Annulerrépondre