HTML Creazione pulsante per aggiungere un numero o togliere un numero

Shini°

Utente Emerald
26 Febbraio 2009
541
60
177
440
Ciao a tutti.
Premetto che sono abbastanza nabbo in html.
Volevo creare una sorta di gestionale magazzino per scarico e carico merci.
Si tratta di una 20ina di merci circa.

Avrei bisogno di creare due pulsanti che mi vadano ad aggiungere +1 o -1 al numero totale di quella merce.
Esempio:

- Patate Qt.2 [Tasto per aggiungere +1] [Tasto per togliere -1]

Non so se ho reso l'idea...
Avete qualche suggerimento?
Grazie
 
Ciao stai usando qualche framework css oppure stai facendo con vanilla html e css? In ogni caso devi creare 2 semplici bottoni dove ad uno ci scrivi +1 e l'altro -1 poi peró il funzionamento non puoi mica assegnarcelo con html, devi sempre usare un linguaggio di programmazione che ti gestisca la logica ed il funzionamento di questo gestionale. Userai sicuramente un database dove salverai le quantitá e le aggiornerai ecc.
 
Ripeto, sono molto inesperto nel settore.
Sono attrezzato solo di notepad in cui scrivo html e css.
E' possibile gestirla magari con php questa funzione?
Perdona le mie eresie...
 
Ripeto, sono molto inesperto nel settore.
Sono attrezzato solo di notepad in cui scrivo html e css.
E' possibile gestirla magari con php questa funzione?
Perdona le mie eresie...

E' possibile fare gestire i bottoni da PHP ma complicheresti tutto, in piu' ogni click di +/- 1 fara' aggiornare la pagina in questa maniera in quanto dovresti fare una richiesta GET o POST ad ogni click.
La strada giusta e' utilizzare JavaScript, in modo che puoi mettere degli eventi ai bottoni che aggiornano la quantita' visibile, quando e' tutto pronto e vuoi salvare i dati nel db puoi inviare la richiesta con prodotti e quantita' a PHP.

Ovviamente questo solo se si tratta di un esercizio per smanettare, un e-commerce vero e' molto complesso e ci sono tanti aspetti di sicurezza da considerare, nel caso volessi davvero pubblicarlo usane uno opensource.
 
E' possibile fare gestire i bottoni da PHP ma complicheresti tutto, in piu' ogni click di +/- 1 fara' aggiornare la pagina in questa maniera in quanto dovresti fare una richiesta GET o POST ad ogni click.
La strada giusta e' utilizzare JavaScript, in modo che puoi mettere degli eventi ai bottoni che aggiornano la quantita' visibile, quando e' tutto pronto e vuoi salvare i dati nel db puoi inviare la richiesta con prodotti e quantita' a PHP.

Ovviamente questo solo se si tratta di un esercizio per smanettare, un e-commerce vero e' molto complesso e ci sono tanti aspetti di sicurezza da considerare, nel caso volessi davvero pubblicarlo usane uno opensource.
Non si tratta di e-commerce, era più una cosa mia personale e volevo provare a scrivermela da solo.
Ti chiedo troppo se ti chiedessi di farmi un esempio banale di codice che permetterebbe di aggiungere quantità +1 o -1 al database utlizzando js?
 
Non si tratta di e-commerce, era più una cosa mia personale e volevo provare a scrivermela da solo.
Ti chiedo troppo se ti chiedessi di farmi un esempio banale di codice che permetterebbe di aggiungere quantità +1 o -1 al database utlizzando js?

Ok allora per dare un idea del concetto ho scritto questo esempio in modo da coprire tutti i linguaggi coinvolti (PHP, JS, HTML).

PHP:
<?php
if (isset($_POST['submit'])) {
    // Fai i controlli sulle variabili prima di includerle nella query
    $patate = $_POST['patate'];
    $mele = $_POST['mele'];
    // salva ordine nel db
}
?>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- ... -->
<form method="POST">
    Patate (Qt. <input type="text" name="patate" id="patate" value="1" />)
    <button class="decqt" data-target="patate">-</button>
    <button class="incqt" data-target="patate">+</button>
    <br>
    
    Mele (Qt. <input type="text" name="mele" id="mele" value="1" />)
    <button class="decqt" data-target="mele">-</button>
    <button class="incqt" data-target="mele">+</button>
    <br>
    
    <input type="submit" name="submit" value="Invia" />
    <script>
        // Trova l'oggetto a cui punta il bottone e cambia il valore di delta
        function changeQt($button, delta) {
            var targetid = $button.attr("data-target");
            var target = document.getElementById(targetid);
            var newvalue = Number(target.value) + delta;
            target.value = newvalue.toString();
        }
    
        (function($) {
            
            $(".incqt").on("click", function() {
                // cambia il valore dell'oggetto a cui e' collegato il bottone +, aggiungendo 1
                changeQt($(this), 1);
            });
            $(".decqt").on("click", function() {
                // cambia il valore dell'oggetto a cui e' collegato il bottone +, togliendo 1
                changeQt($(this), -1);
            });
            
        })(jQuery);
    </script>
</form>
 
  • Mi piace
Reazioni: Shini°
Ultima modifica:
Ok allora per dare un idea del concetto ho scritto questo esempio in modo da coprire tutti i linguaggi coinvolti (PHP, JS, HTML).

PHP:
<?php
if (isset($_POST['submit'])) {
    // Fai i controlli sulle variabili prima di includerle nella query
    $patate = $_POST['patate'];
    $mele = $_POST['mele'];
    // salva ordine nel db
}
?>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- ... -->
<form method="POST">
    Patate (Qt. <input type="text" name="patate" id="patate" value="1" />)
    <button class="decqt" data-target="patate">-</button>
    <button class="incqt" data-target="patate">+</button>
    <br>
   
    Mele (Qt. <input type="text" name="mele" id="mele" value="1" />)
    <button class="decqt" data-target="mele">-</button>
    <button class="incqt" data-target="mele">+</button>
    <br>
   
    <input type="submit" name="submit" value="Invia" />
    <script>
        // Trova l'oggetto a cui punta il bottone e cambia il valore di delta
        function changeQt($button, delta) {
            var targetid = $button.attr("data-target");
            var target = document.getElementById(targetid);
            var newvalue = Number(target.value) + delta;
            target.value = newvalue.toString();
        }
   
        (function($) {
           
            $(".incqt").on("click", function() {
                // cambia il valore dell'oggetto a cui e' collegato il bottone +, aggiungendo 1
                changeQt($(this), 1);
            });
            $(".decqt").on("click", function() {
                // cambia il valore dell'oggetto a cui e' collegato il bottone +, togliendo 1
                changeQt($(this), -1);
            });
           
        })(jQuery);
    </script>
</form>
Grazie mille, faccio un po' di esperimenti ora :)
Messaggio unito automaticamente:

Già che ci sono faccio un'altra domanda.
Se io avessi il mio bel file index.html dove ho scritto il menù di navigazione (con tanto di file .css per renderlo più carino), posso inserire nel body una pagina .php?
 
Grazie mille, faccio un po' di esperimenti ora :)
Messaggio unito automaticamente:

Già che ci sono faccio un'altra domanda.
Se io avessi il mio bel file index.html dove ho scritto il menù di navigazione (con tanto di file .css per renderlo più carino), posso inserire nel body una pagina .php?

Puoi inserire codice php in mezzo all'html, devi pero' cambiare l'estensione del file, chiamandolo quindi index.php
 
  • Mi piace
Reazioni: Shini°