Problem with javascript and forms

Question

Problem with javascript and forms

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have a problem with this code, the idea would be that when I click on the "submit" button, it shows me the data loaded in the form below

<!-- 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>

The idea would be to show me the values loaded on the same page

javascript formularios

asked by Juan 13.12.2018 в 04:18

source

2 answers

Problem with php spacing in file handling Compile without having Visual Studio installed

score 1 · Answer 1

Here is an example (functional) of how to do it trying as much as possible to make changes (minimum) to your code.

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>

score 1 · Answer 2

It occurs to me that you do the following:

Instead of a submit button better a button to avoid the default behavior of submit that would reload the web page

the button is obtained through JS through its id

to the var that contains the access to the button we assign a handler in the event click so that each time this event is presented the function that goes inside is activated

Inside we get every input and we print them by concatenating it

The handler that receives 2 parameters, one is the event and the other is the function

CODE

 <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>