0

Estoy haciendo un formulario que recoja datos y después los almacene en variables para hacer operaciones con ellos, pero al almacenarlos en un array y luego intentar recogerlos se pierden por algún lado o no se llegan a recoger con la función que los llama.

var time, position, resultados;

function obtenerDatos(){
    var x1 = document.getElementById("x1").value;
    var v1 = document.getElementById("v1").value;
    var a1 = document.getElementById("a1").value;
    var x2 = document.getElementById("x2").value;
    var v2 = document.getElementById("v2").value;
    var a2 = document.getElementById("a2").value;

    var r = [x1, x2, v1, v2, a1, a2];
    return r;
}

resultados = obtenerDatos();

var x1 = resultados[0];
var x2 = resultados[1];
var v1 = resultados[2];
var v2 = resultados[3];
var a1 = resultados[4];
var a2 = resultados[5];
<div class="col-6">
    <label for="x1">Posición inicial:</label>
    <input type="text" class="form-control" placeholder="m" id="x1">
    <label for="v1">Velocidad inicial:</label>
    <input type="text" class="form-control" placeholder="m/s" id="v1">
    <label for="a1">Aceleración inicial:</label>
    <input type="text" class="form-control" placeholder="m/s2" id="a1">
</div>
<div class="col-6">
    <label for="x1">Posición inicial:</label>
    <input type="text" class="form-control" placeholder="m" id="x2">
    <label for="v1">Velocidad inicial:</label>
    <input type="text" class="form-control" placeholder="m/s" id="v2">
    <label for="a1">Aceleración inicial:</label>
    <input type="text" class="form-control" placeholder="m/s2" id="a2">
</div>

Mi segunda duda es si puedo separar código (en diferentes archivos) de un mismo script que llame funciones o variables de otro archivo. Los dos estaría llamados en el mismo HTML.

Gracias.

1
  • Con respecto a tu segunda duda, la respuesta es si ya que si colocas la referencia a los archivos .js correspondientes ya todos los métodos de ambos archivos estarán disponibles para usarse y si son compatibles entre si pues si funcionan. Commented el 11 mar. 2018 a las 15:07

2 respuestas 2

1

Lo que debes hacer es guardar los datos en una variable y evitar que el formulario te haga el post porque si se refresca la página pierdes los datos. Te dejo un pequeño ejemplo en jquery, espero que te sea de ayuda.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<!-- FORM -->
<form id="dataForm">
    <div class="form-group row">
        <label for="data" class="col-2 col-form-label">Dato</label>
        <div class="col-10">
            <input id="data" name="data" class="form-control" type="text" value="">
        </div>
    </div>
    <input class="btn btn-large btn-primary" value="Save" type="submit">
</form>

<button onclick="processData()">Post-process</button>
 <script>
    // Variable to hold request
    var data = [];
    $("#dataForm").submit(function(event) {
        event.preventDefault();
        data.push($(this).find('input[name="data"]').val());
        alert("Dato Añadida");
    });

    function processData() {
        alert(data);
    }
</script>
</body>
</html>

El tema de separa los ficheros js lo único que tienes que hacer es añadir el código en ficheros js y hacer el include en el html.

1
  • Pero yo quisiera hacerlo sin jquery con JavaScript puro. El problema que veo es que al almacenar en la variable el objeto del formulario si en la consola le pongo .value me da su valor pero al almacenar en una variable el objeto.value en la variable queda undefined. Commented el 11 mar. 2018 a las 17:05
0

Tu código esta correcto.

Solo falta manejar el evento onchange en cada input del formulario, esto lo puedes hacer agregando el metodo addEventListener().

partiendo de tu código, aquí te dejo un ejemplo de como hacerlo:

var time, position, resultados;
var x1,v1,a1,x2,v2,a2; // variables Globales

function obtenerDatos(){
 x1 = document.getElementById("x1").value;
 v1 = document.getElementById("v1").value;
 a1 = document.getElementById("a1").value;
 x2 = document.getElementById("x2").value;
 v2 = document.getElementById("v2").value;
 a2 = document.getElementById("a2").value;

    var r = [x1, x2, v1, v2, a1, a2];
    return r;
}

var input = document.getElementsByTagName("INPUT");

for (i=0; i<input.length; i++) {
 input[i].addEventListener("change",  function(){
  resultados = obtenerDatos();
  console.log(resultados);
 });
};
<div class="col-6">
            <label for="x1">Posición inicial:</label>
            <input type="text" class="form-control" placeholder="m" id="x1">
            <label for="v1">Velocidad inicial:</label>
            <input type="text" class="form-control" placeholder="m/s" id="v1">
            <label for="a1">Aceleración inicial:</label>
            <input type="text" class="form-control" placeholder="m/s2" id="a1">
            <label for="x2">Posición final:</label>
            <input type="text" class="form-control" placeholder="m" id="x2">
            <label for="v2">Velocidad final:</label>
            <input type="text" class="form-control" placeholder="m/s" id="v2">
            <label for="a2">Aceleración final:</label>
            <input type="text" class="form-control" placeholder="m/s2" id="a2">
        </div>

Con respecto a tu segunda pregunta, efectivamente, SI ES POSIBLE, solo debes agregar tus archivos *.js en la pagina de la siguiente manera:

<html>
 <title>mi primera pagina html</title>
 <head>
  <script src="http://localhost/codigo1.js"></script>
  <script src="http://localhost/codigo2.js"></script>
 </head>
 <body>
 ...
 ...
 </body>
</html>

Por último, ten en cuenta que si en ambos código (codigo*.js) se repiten funciones javascript, prevalecerá la última que se cargue.

Espero esto te ayude, Saludos!! ;))...

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.