Prendere l'id del tag form con un bottone

**stefano_261283** · 29-10-2014, 21:31

Sto scapocciando

Cosa devo scrivere all'interno della funzione aggiorna() per far scrivere peppa nel div contenuto nel form con id="peppa" e non in quello con id="peppe" (o altri con id differenti)?

codice HTML:

<form name="form" id="peppa" action="add.php" method="post">
<input type="hidden" id="prodotto"  value="peppa">
<div id="scriviqui"></div>
<input type="button" value="Aggiungi al carrello" onclick="aggiorna()">
<input type="submit" value="invia">
</form>

<form name="form" id="peppe" action="add.php" method="post">
<input type="hidden" id="prodotto"  value="peppe">
<div id="scriviqui"></div>
<input type="button" value="Aggiungi al carrello" onclick="aggiorna()">
<input type="submit" value="invia">
</form>

Grazie!

**KillerWorm** · 30-10-2014, 01:18

Stai sbagliando approccio.
Tieni sempre ben presente che gli id sono, e devono essere, univoci.
In altre parole, non puoi avere più id con lo stesso valore sullo stesso documento.

Ti consiglio di utilizzare delle classi.
Puoi usare il metodo querySelector() per cercare gli elementi interessati da cui prelevare, e su cui scrivere, il valore.
Passando la keyword this alla funzione, puoi impostare una ricerca relativamente al pulsante che richiama tale funzione.

Un esempio pratico:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      /* un po' di style */
      .contenuto{width:200px;height:80px;border:1px solid Blue;}
      form{margin-bottom:20px}
    </style>
    <script type="text/javascript">
      function aggiorna(me){                                  // "me" fa riferimento al pulsante chiamante
        var form = me.parentNode;                             // L'elemento form in cui è contenuto "me"
        var inputProdotto = form.querySelector(".prodotto");  // Cerco l'elemento con classe "prodotto"
        var divContenuto = form.querySelector(".contenuto");  // Cerco l'elemento con classe "contenuto"
        divContenuto.innerHTML = inputProdotto.value;         // Metto il valore dentro il div
      }
    </script>
  </head>
  <body>
    <form name="form" id="peppa" action="add.php" method="post">
      <input type="hidden" class="prodotto" value="peppa">
      <div class="contenuto"></div>
      <input type="button" value="Aggiungi al carrello" onclick="aggiorna(this)">
      <input type="submit" value="invia">
    </form>
    <form name="form" class="peppe" action="add.php" method="post">
      <input type="hidden" class="prodotto" value="peppe">
      <div class="contenuto"></div>
      <input type="button" value="Aggiungi al carrello" onclick="aggiorna(this)">
      <input type="submit" value="invia">
    </form>
  </body>
</html>

Prego!

**cassano** · 30-10-2014, 10:24

codice:

var inputProdotto = form.querySelector(".prodotto");

Se ci sono più elementi però non va bene , non è mneglio un id univoco ?

Discussione: Prendere l'id del tag form con un bottone

Strumenti discussione

Ricerca discussione

Visualizza

Prendere l'id del tag form con un bottone

Permessi di invio