Get data from a form and store it in variables

Question

Get data from a form and store it in variables

Navigation

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

0

I'm making a form that collects data and then stores it in variables to make operations with them, but when you store them in an array and then try to pick them up they get lost somewhere or they do not get picked up with the function that calls them.

Initial position: Initial velocity: Initial acceleration:

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

And this is the javascript code

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

My second question is whether I can separate code (in different files) from the same script that calls functions or variables from another file. The two would be called in the same HTML.

Thank you.

javascript html formularios

asked by Samuel Reyes 11.03.2018 в 15:00

source

2 answers

Show table in HTML with Ajax and Json how can I sort the following data using regex in python?

score 1 · Answer 1

What you should do is save the data in a variable and avoid that the form makes the post because if the page is refreshed you lose the data. I leave you a small example in jquery, I hope it helps you.

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

The issue of separating the js files all you have to do is add the code in js files and do the include in the html.

score 0 · Answer 2

Your code is correct.

We only need to manage the event onchange in each input of the form, this you can do it by adding the method addEventListener() .

Based on your code, here is an example of how to do it:

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>

Regarding your second question, effectively, IF POSSIBLE, you should only add your * .js files on the page as follows:

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

Finally, keep in mind that if in both code ( codigo*.js ) functions javascript are repeated, the last one that is loaded will prevail.

I hope this helps you, Greetings !! ;)) ...