0

Tengo un formulario de pedidos con varios input y quiero enviar el valor de todos estos input a un servlet a través de jQuery Ajax hacia un servlet. Mi problema es que la cantidad de estos input es variable, es decir, el usuario es libre de aumentar más pedidos(input) por tanto debería enviar un arreglo con el valor de dichos input. Pero no tengo idea de cómo hacerlo.

Aquí les dejo mi código.

function getInput(type, placeholder,clase,name){
   var nodo = document.createElement("input");
  nodo.type = type;
  nodo.placeholder = placeholder;
  nodo.className = clase;
  nodo.name = name;
  nodo.required ="";
  return nodo;
}
function append(className, nodoToAppend){
  var nodo = document.getElementsByClassName(className)[0];
  nodo.appendChild(nodoToAppend);
}
function agregaCaja(){
 var nodo = getInput("number","el precio","precio","precio");
 append("formulario",nodo); 
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
      
</head>
<body>
<form >
<div class="formulario">
<input type="number" placeholder="precio" class="precio">
</div>
<br>
<input type="submit" id="btnregistrar" value="enviar">
<input type="button" value="agregar" onclick="agregaCaja()">
</form>
</body>
<script>
           $(document).ready(function(){
          $("#btnregistrar").click(function(){
          var subTotal = $(".precio");
              $.get("/LuanTextilesProyecto/prueba",{"subTotal[]":[subTotal[0].value,subTotal[1].value]}, function(data, status){
                 alert("Data: " + data + "\nStatus: " + status);
                });
             });
           });
        </script>
</html>

parte del codigo del servlet prueba

try{
     String[] subtotal = request.getParameterValues("subTotal[]");           
     out.println("<h3>subtotal :"+subtotal[0]+"</h3>");     
}
catch(Exception e){
     out.println("<h1> el pedido no se pudo registrar</h1>");
}

1 respuesta 1

0

Lo recomendable sería crear un array en el javaScript y mandarlo así al servlet. Y en el servlet al recogerlo, tendrías que recorrerlo con un for para obtener los datos del array.

function getInput(type, placeholder,clase,name){
   var nodo = document.createElement("input");
  nodo.type = type;
  nodo.placeholder = placeholder;
  nodo.className = clase;
  nodo.name = name;
  nodo.required ="";
  return nodo;
}
function append(className, nodoToAppend){
  var nodo = document.getElementsByClassName(className)[0];
  nodo.appendChild(nodoToAppend);
}
function agregaCaja(){
 var nodo = getInput("number","el precio","precio","precio");
 append("formulario",nodo); 
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
      
</head>
<body>
<form >
<div class="formulario">
<input type="number" placeholder="precio" class="precio">
</div>
<br>
<input type="submit" id="btnregistrar" value="enviar">
<input type="button" value="agregar" onclick="agregaCaja()">
</form>
</body>
<script>
        $(document).ready(function(){
          $("#btnregistrar").click(function(){
              var subTotal = [];
              $( "input[type=number]" ).each(function( index ) {
                 subTotal.push( $( this ).val() );
                 console.log( $( this ).val() );
              });
              $.get("/LuanTextilesProyecto/prueba",{"subTotal[]":subTotal}, function(data, status){
                 alert("Data: " + data + "\nStatus: " + status);
                });
             });
           });
        </script>
</html>

parte del codigo del servlet prueba

    try{

       String[] subtotal = request.getParameterValues("subTotal[]");

       for(int i = 0; i < subtotal.length; i++)
       {
          out.println("<h3>subtotal :"+subtotal[i]+"</h3>");
       }

    }
    catch(Exception e){
         out.println("<h1> el pedido no se pudo registrar</h1>");
    }
1
  • Su respuesta no usa AJAX, solamente jQuery. Con AJAX puede pasar el arreglo en la properidad data y JSON.stringify(), como así: data: JSON.stringify(data), (Un ejemplo en inglés stackoverflow.com/questions/12693947/…)
    – Duston
    Commented el 8 dic. 2021 a las 14:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.