Posizionare due button di due differenti form su una stessa linea

di
jad(v)a
il
2 risposte
J
jad(v)a
Pochi posts
Iscritto da
feb, 2021
Messaggi:
15

Posizionare due button di due differenti form su una stessa linea

Ciao ragazzi, mi sono appena iscritta e spero tanto che potete aiutarmi. Sto cercando di mettere due pulsanti di due form diversi su una stessa riga; mi sono aiutata guardando vari siti su internet. Il button "Elimina" funziona mentre il button "Aggiorna" no. Potete gentilmente aiutarmi?
Sto creando un CRUD in Spring.
<form id="update" action="/update" method="post">
    <c:forEach var="fruit" items="${listFruit}">
    <input type="hidden" name="id" value="${fruit.id}" />
  
		DIVERSI INPUT TIPE "TEXT"
		
    </c:forEach>
    </form>

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

    <input type="submit" id="up" value="Aggiorna" />
    <input type="submit" id="de" value="Elimina"/>
   

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

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

2 Risposte

  • C
    cali
    Utente Attivo
    Iscritto da
    apr, 2020
    Messaggi:
    290

    Re: Posizionare due button di due differenti form su una stessa linea

    Ciao e benvenuta nel forum!

    Ti ho fatto un esempio veloce con jquery, ajax e php... Ho fatto delle modifiche al tuo codice! Ovviamente poi lo adatterai per le tue esigenze!

    HTML o PHP dipende se la pagina è dinamica o no:
    
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>

    <form id="update" method="post">
  
    	<input type="text" id="1" value="01">
    	<input type="text" id="2" value="02">
    	<input type="text" id="3" value="03">
    
    </form>

    <form id="delete" method="POST">

          <input type="hidden" id="fruit" value="fruit"/>

    </form>

    <input type="submit" OPPURE type="button" id="up" value="Aggiorna" />
    <input type="submit" OPPURE type="button" id="de" value="Elimina"/>
   

<script>
$(document).ready(function(){
    $("#up").click(function(){
        
        var val1 = $("#1").val();
        var val3 = $("#2").val();
        var val2 = $("#3").val();
                        
        $.ajax({
                type: "POST",
                url: "api1.php",
                data: {val1: val1, val2: val2, val3: val3},
                datatype: "html",
                contentType: 'application/x-www-form-urlencoded',
                timeout: 3000,
                success: function(response){
                    alert (response);
                },
                error: function(){
                    alert("Chiamata fallita, si prega di riprovare....");
                } 
        });
        return false;
    }); 
});

$(document).ready(function(){
    $("#de").click(function(){
        
        var fruit = $("#fruit").val();
                    
        $.ajax({
                type: "POST",
                url: "api2.php",
                data: {fruit: fruit},
                datatype: "html",
                contentType: 'application/x-www-form-urlencoded',
                timeout: 3000,
                success: function(response){
                    alert (response);
                },
                error: function(){
                    alert("Chiamata fallita, si prega di riprovare....");
                } 
        });
        return false;
    }); 
});
</script>
</body>
</html>
    PHP API1: 
    
<?php
echo $_POST['val1'].' - '.$_POST['val2'].' - '.$_POST['val3'];
?>
    PHP API2: 
    
<?php
echo $_POST['fruit'];
?>
    Nulla esclude di scrivere il codice js in uno o più file che crei tu per poi essere richiamati! Senza scrivere script insieme all' html. Poi dipende sempre dai casi!

    La libreria jquery la puoi sempre scaricare e richiamare in locale invece di utilizzare un CDN come in questo caso. Ho utilizzato CDN di Google per farlo funzionare. Basta che fai copia e incolla del codice e funziona.

    Se hai dubbi.... chiedi!

    Ciao
  • J
    jad(v)a
    Pochi posts
    Iscritto da
    feb, 2021
    Messaggi:
    15

    Re: Posizionare due button di due differenti form su una stessa linea

    cali ha scritto:

    Ciao e benvenuta nel forum!

    Ti ho fatto un esempio veloce con jquery, ajax e php... Ho fatto delle modifiche al tuo codice! Ovviamente poi lo adatterai per le tue esigenze!

    HTML o PHP dipende se la pagina è dinamica o no:
    
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>

    <form id="update" method="post">
  
    	<input type="text" id="1" value="01">
    	<input type="text" id="2" value="02">
    	<input type="text" id="3" value="03">
    
    </form>

    <form id="delete" method="POST">

          <input type="hidden" id="fruit" value="fruit"/>

    </form>

    <input type="submit" OPPURE type="button" id="up" value="Aggiorna" />
    <input type="submit" OPPURE type="button" id="de" value="Elimina"/>
   

<script>
$(document).ready(function(){
    $("#up").click(function(){
        
        var val1 = $("#1").val();
        var val3 = $("#2").val();
        var val2 = $("#3").val();
                        
        $.ajax({
                type: "POST",
                url: "api1.php",
                data: {val1: val1, val2: val2, val3: val3},
                datatype: "html",
                contentType: 'application/x-www-form-urlencoded',
                timeout: 3000,
                success: function(response){
                    alert (response);
                },
                error: function(){
                    alert("Chiamata fallita, si prega di riprovare....");
                } 
        });
        return false;
    }); 
});

$(document).ready(function(){
    $("#de").click(function(){
        
        var fruit = $("#fruit").val();
                    
        $.ajax({
                type: "POST",
                url: "api2.php",
                data: {fruit: fruit},
                datatype: "html",
                contentType: 'application/x-www-form-urlencoded',
                timeout: 3000,
                success: function(response){
                    alert (response);
                },
                error: function(){
                    alert("Chiamata fallita, si prega di riprovare....");
                } 
        });
        return false;
    }); 
});
</script>
</body>
</html>
    PHP API1: 
    
<?php
echo $_POST['val1'].' - '.$_POST['val2'].' - '.$_POST['val3'];
?>
    PHP API2: 
    
<?php
echo $_POST['fruit'];
?>
    Nulla esclude di scrivere il codice js in uno o più file che crei tu per poi essere richiamati! Senza scrivere script insieme all' html. Poi dipende sempre dai casi!

    La libreria jquery la puoi sempre scaricare e richiamare in locale invece di utilizzare un CDN come in questo caso. Ho utilizzato CDN di Google per farlo funzionare. Basta che fai copia e incolla del codice e funziona.

    Se hai dubbi.... chiedi!

    Ciao

    Grazie per l'interessamento, scusami però purtroppo php non lo uso. Sto usando Spring, quindi Java, e Jsp, insieme ad html. Ancora non lo conosco il php, lo studierò un'altro momento.
    Sarebbe possibile averlo in html? Grazie e scusami ancora.
Devi accedere o registrarti per scrivere nel forum
2 risposte