Les gars, j'essaye de mettre deux boutons de deux formes différentes sur la même ligne. J'ai essayé de mettre un identifiant sur les deux boutons afin de pouvoir les gérer en css. En particulier, ce que je veux faire est de mettre le bouton «supprimer» à côté du bouton «mettre à jour». C'est ce que j'ai essayé de faire mais cela ne fonctionne pas car le bouton «supprimer» reste sous le bouton «mettre à jour».

//First form
<form action="../updatecustdet" method="post">
<pre>
<c:forEach var="customer" items="${listCustomer}">
<input type="hidden" name="id" value="${customer.id}" />
.
.
.
.
        
<input type="submit" id="up" value="Update" />
</c:forEach>    
</pre>
</form>


//Second form
<form action="../deletefromdetailslist" method="POST">

      <input id="cust" name="customer" type="hidden" value="${customer.id}"/>
      <input type="submit" id="de" value="Delete"/>
      </c:forEach>
</form>
#up {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    display:inline-block;
}

#de {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    top:-43px;
}

Un grand merci à ceux qui m'aideront

0
a_l_e_x 24 févr. 2021 à 15:37

3 réponses

Meilleure réponse

Supprimez les boutons des éléments form et placez-les tous les deux sous le deuxième formulaire. Donnez également aux deux formulaires un id unique afin que votre code HTML corresponde désormais à ceci:

<form id="update" action="../updatecustdet" method="post">
<pre>
<c:forEach var="customer" items="${listCustomer}">
<input type="hidden" name="id" value="${customer.id}" />
.
.
.
.

</c:forEach>
</pre>
</form>

<form id="delete" action="../deletefromdetailslist" method="POST">

      <input id="cust" name="customer" type="hidden" value="${customer.id}"/>

      </c:forEach>
</form>

<input type="submit" id="up" value="Update" />
<input type="submit" id="de" value="Delete"/>

Placez le javascript suivant au bas de votre <body>, sinon les boutons ne fonctionneront pas:

<script>
  document.getElementById('up').addEventListener('click', () => document.getElementById('update').submit());
  document.getElementById('de').addEventListener('click', () => document.getElementById('delete').submit());
</script>

Utilisez le javascript suivant si votre navigateur ne prend pas en charge ECMA6:

<script>
  document.getElementById('up').addEventListener('click', function() {
     document.getElementById('update').submit();
   });

  document.getElementById('de').addEventListener('click', function() {
    document.getElementById('delete').submit();
  });
</script>

Votre CSS est bon, aucun changement n'est nécessaire.

0
TimonNetherlands 24 févr. 2021 à 20:34

Je parle peut-être de conneries, mais je suis à peu près sûr que form.submit () fait partie de l'API normalisée HTTP et en tant que tel, il est censé déclencher une seule étape du protocole GET / POST / WHATEVER http.

https://tools.ietf.org/html/rfc2068#section-9.5

0
EverNight 24 févr. 2021 à 12:45
<form id="update" action="../updatecustdet" method="post">
    <pre>
    <c:forEach var="customer" items="${listCustomer}">
    <input type="hidden" name="id" value="${customer.id}" />
    .
    .
    .
    .

    </c:forEach>
    </pre>
    </form>

    <form id="delete" action="../deletefromdetailslist" method="POST">
          <c:forEach var="customer" items="${listCustomer}">
          <input id="cust" name="customer" type="hidden" value="${customer.id}"/>
          </c:forEach>
    </form>

    <input type="submit" id="up" value="Update" />
    <input type="submit" id="de" value="Delete"/>

<script>
  document.getElementById('up').addEventListener('click', function() {
     document.getElementById('update').submit();
   });

  document.getElementById('de').addEventListener('click', function() {
    document.getElementById('delete').submit();
  });
</script>
</body>
</html>
0
a_l_e_x 25 févr. 2021 à 11:19