Javascript output as value of hidden input

Question

How can I set the ouput of this javascript function as the value for a hidden input on a html form?

document.write(states[i][1]);

works fine but I cannot get it to fill in the value with the code as shown below.

    if (to == 'abbr'){
        input = input.replace(/\w\S*/g, function(txt){return 
        txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
        for(i = 0; i < states.length; i++){
            if(states[i][0] == input){
            document.getElementById("sid").value = (states[i][1]);
                 }
             }    
         } 
     }       

</script>
<form action="we2.php" method="post">
<input type="text" id="sid" name="s1"/>
<input type="submit" value="Verify">
</form>

What is wrong with this code / what is the right way to do this?

Thanks!

score 0 · Answer 1 · answered Jun 22 '17 at 05:30

0

This should do it.

HTML:

<input type="hidden" id="HiddenInput" />

JavaScript:

document.getElementById("HiddenInput").value = someFunction();

answered Jun 22 '17 at 05:30

Edison D'souza

4,551
5
28
39

I see that you are trying to assign values to input field using a loop. Have to really added so many input field's in your HTML before calling this function? – Edison D'souza Jun 22 '17 at 05:39
I'm not sure what you mean. The script is just state abbreviation conversion array from github so all the inputs above the form are only part of the function. – Carter Roeser Jun 22 '17 at 05:41
Your code looks fine to me except this part (states[i][1]). You are asking to set output of a funtion to the input field but states seems to be a var. Please rectify. – Edison D'souza Jun 22 '17 at 05:47

score 0 · Answer 2 · answered Jun 22 '17 at 05:34

0

Have you checked if states[i][0] == input evaluates to true?

answered Jun 22 '17 at 05:34

Jan Ciołek

1,796
3
17
32

Yes, the function works fine with document.write so the if function is true. – Carter Roeser Jun 22 '17 at 05:35
can you log this value ? ```states[i][1]``` – Jan Ciołek Jun 22 '17 at 05:41
Like console.log or give an example? – Carter Roeser Jun 22 '17 at 05:45
inside ```if(states[i][0] == input)``` statement insert ```console.log(states[i][1]) ``` do you get any value? – Jan Ciołek Jun 22 '17 at 05:49
Yes that returns a value. Like I said this is just a conversion array so input Oregon, console log shows OR for that. – Carter Roeser Jun 22 '17 at 05:54
Same with document.write. 'OR' shows on screen, but nothing is shown for document.getElementById – Carter Roeser Jun 22 '17 at 05:55
as @ShivamRajput mentioned your javascript code can evaluate before the html elements are loaded.Wrap your code in this statement https://stackoverflow.com/a/7088499/6947248 – Jan Ciołek Jun 22 '17 at 06:02

score 0 · Answer 3 · answered Jun 22 '17 at 05:43

0

Write JavaScript code after html code end in your page or at the end of page.

answered Jun 22 '17 at 05:43

ShivamRajput

146
1
5

score 0 · Accepted Answer · answered Jun 22 '17 at 06:04

0

I found a easier solution by just turning the entire function into a variable then the variable into the DOM:

var response = abbrState('<?php echo $_GET['state']; ?>', 'abbr');

document.getElementById("sid").value = response;

answered Jun 22 '17 at 06:04

Carter Roeser

360
3
23

score 0 · Answer 5 · answered Jun 22 '17 at 06:20

The following should work.

HTML:

<div style="display:none" id="example"></div>

Javascript:

function addTextNode(text) {
  var newtext = document.createTextNode(text),
      element = document.getElementById('example');

  element.appendChild(newtext);
}

function yourFunctionDataHere(){
    return 'test1234';
}


addTextNode(yourFunctionDataHere());

Just make sure, that the return type of your function is of type string. If you want to see the output simply remove the style="display:none" from the div in the above example.

Try it online on jsfiddle.

Javascript output as value of hidden input

5 Answers5