js call form value to variable

Question

Ok noobablicious question. But has had me sumped.

Im declaring the value of a hidden form field with a Js script with in a function.

eg These are just examples not the real script.

function myFunction(){
    var text = "hello world";
    var number = 12345;



    document.getElementById('text').value= text; 
    document.getElementById('number').value= number; 

  }

Then I want to be able to use the value of the form value as a variable in another script. I realize that there is the option to declare these variables globally. However I have heard that it is not as secure. Or a streamlined as I am going for.

Second Script example...

    var autoText = document.getElementById('text').value;
    var autoNumber = document.getElementById('number').value;

    ...do stuff with variables.

However this is not working and returns undefined. Is this the correct DOM path to access the value of my form fields or do I need to find an attribute and its child??

What other options are available to me??

Thanks for your time. HTML is...

  <form action="http://mysite/mypath" method="post">

  <input type="text" name="text" id="text" value="">
  <input type="text" name="text" id="number" value="">
  <input type= "submit" name="go" value="go" allign="middle"/>
  </form> 

Answer 1

That should be fine, assuming that you have the correct ID's set to the elements you want. Remember, that ID's are required to be unique, or unpredictable issues will arise.

Make sure that you are running your code, after the DOM is loaded. Otherwise the element might not yet exist in the DOM, and so the document.getElementById method will fail to find it..

Answer 2

Or, you could just store that data in a closure so that both functions have access to the variable, but it's not stored in the global scope. Like so:

(function(){
  var text = "blah blah",
      number = 12345;

  function insertValues() {
    document.getElementById('text').value= text; 
    document.getElementById('number').value= number; 
  }
  function otherStuffWithValues() {
    alert(text);
    alert(number);
  }
  insertValues();
  otherStuffWithValues();
}())

Additionally, You could also declare the variables inside the first function, and then pass the variables onto the second function as a parameter like so:

function insertValues() {
  var text = "blah blah",
      number = 12345;
  document.getElementById('text').value= text; 
  document.getElementById('number').value= number;
  otherstuff(text,number)
}

function otherstuff(sometext,somenumber) {
  alert(sometext);
  alert(somenumber);
}
insertValues()

Answer 3

I think that you haven't set starting script when page load. If so, you can use this simple event handler:

window.onload = myFunction;

With myFunction will be function with yours above code.