1

tengo un problema con este codigo, la idea seria que cuando toque el boton "submit" me muestre abajo los datos cargados en el formulario

<!-- Formulario -->
<div class="formulario">
    <h1> Tienda offline </h1>

    <form name="cargar" method="get" action="cargar.html">
        <p>Nombre:<input type="text" class="nombre"
        name="producname"></p>
        <p>Precio:<input type="text" class="precio" name="price"></p>
        <p>ID:<input type="text" class="id" name="identify"></p>
        <input type="submit" name="add" value="Añadir producto" class="boton1" id="addproducto" onclick="cargar">
        <input type="submit" name="mod" value="Modificar producto" class="boton1"
        id="modproducto">
    </form>
</div>

<div id="java">

</div>

<script>

    var nombre, identify, precio;

    function cargar() {
        var nombre = document.forms.cargar.producname.value;
        identify = document.forms.cargar.identify.value;
        precio = document.forms.cargar.price.value;

        document.getElementById('java').innerHTML =
        `
            <div>
                <p>$nombre;</p>
                <p>$identify;</p>
                <p>$precio;</p>
            </div>
        `
    }

</script>

La idea seria que me muestre los valores cargados en la misma pagina

1

2 respuestas 2

1

Aquí te dejo un ejemplo (funcional) de como hacerlo tratando en lo posible hacer cambios (mínimos) a tu código.

function cargar_add() {
 var nombre = document.forms.cargar.producname.value,
 identify = document.forms.cargar.identify.value,
 precio = document.forms.cargar.price.value;
 document.getElementById("java").innerHTML = '<div><p>'+nombre+'</p><p>'+identify+'</p><p>'+precio+'</p></div>'
}
<!-- Formulario -->
<div class="formulario">
    <h1> Tienda offline </h1>

    <form name="cargar" method="get" action="cargar.html">
        <p>Nombre:<input type="text" class="nombre"
        name="producname"></p>
        <p>Precio:<input type="text" class="precio" name="price"></p>
        <p>ID:<input type="text" class="id" name="identify"></p>
        <input type="submit" name="add" value="Añadir producto" class="boton1" id="addproducto" onclick="cargar_add();return false;">
        <input type="submit" name="mod" value="Modificar producto" class="boton1"
        id="modproducto">
    </form>
</div>

<div id="java">

</div>

1

Se me ocurre que hagas lo siguiente:

  1. En lugar de un botón submit mejor un button para evitar el comportamiento por defecto de submit que sería recargar la página web
  2. el botón lo obtenemos por medio de JS a través de su id
  3. a la var que contiene el acceso al botón le asignamos un handler en el evento click para que cada que se presente este evento la función que va por dentro se active
  4. Por dentro obtenemos cada inputy los imprimimos concatenandolo
  5. El handler que recibe 2 parámetros, uno es el evento y otro es la función

CÓDIGO

 <form name="cargar" method="get" action="cargar.html">
        <p>Nombre:<input type="text" class="nombre"
        id="producname"></p>
        <p>Precio:<input type="text" class="precio" id="price"></p>
        <p>ID:<input type="text" class="id" id="identify"></p>
        <input type="button" id="add" value="Añadir producto">
    </form>
</div>

<div id="java">

</div>

<script>
    let btn = document.querySelector("#add")
    btn.addEventListener("click", function cargar() {
        let nombre = document.querySelector("#producname").value
        let price = document.querySelector("#price").value
        let identify = document.querySelector("#identify").value

        document.querySelector('#java').innerHTML = nombre+' '+price+' '+identify
    })
</script>
2
  • Muchas gracias shadow! me solucionaste todo el código, me había olvidado que submit refrescaba la pagina
    – Juan
    el 13 dic. 2018 a las 4:14
  • Hola @Juan recuerda que si esta respuesta soluciono la problematica expuesta en tu pregunta, puedes marcarla como aceptada, revisa recorrido de bienvenida , saludos!
    – Jorgesys
    el 13 dic. 2018 a las 21:33

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.