Jump to content
Please Use CODE Tags

(HTML) Form Input to JS-Variable

Yali
By Yali
in Programming
 Share
Posted

Hey

I'm trying to get the input of this, 

<input type="number" name="htmlInput"></form>

to be the value of a variable like javascriptInput = htmlInput.

Is that going to work?

 

-Y

99 Kid. Yes. A 'Youngster'.

World famous Couchpotatoe.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

If you're using jQuery

  

var input = $('input[name="yournamehere"]').val();

 

Vanilla JS

  

var input = document.getElementById("youridhere").value;

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Adding to momo's answer. If you only have the one form element with the name htmlInput, then a more precise example would be  

var input = document.getElementsByTagName("htmlInput")[0].value;

If you have more than one input called htmlInput you can just do the following

  

var input = document.getElementsByTagName("htmlInput")[0].value;
var input2 = document.getElementsByTagName("htmlInput")[1].value;
var input3 = document.getElementsByTagName("htmlInput")[2].value;

Note that when counting with JavaScript you start counting from 0, not 1

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted (edited)
  • Author

-

Edited by Yali

99 Kid. Yes. A 'Youngster'.

World famous Couchpotatoe.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
29 minutes ago, Hazy125 said:

Adding to momo's answer. If you only have the one form element with the name htmlInput, then a more precise example would be  


var input = document.getElementsByTagName("htmlInput")[0].value;

If you have more than one input called htmlInput you can just do the following

  


var input = document.getElementsByTagName("htmlInput")[0].value;
var input2 = document.getElementsByTagName("htmlInput")[1].value;
var input3 = document.getElementsByTagName("htmlInput")[2].value;

Note that when counting with JavaScript you start counting from 0, not 1

 

49 minutes ago, MOMO said:

If you're using jQuery

  


var input = $('input[name="yournamehere"]').val();

 

Vanilla JS

  


var input = document.getElementById("youridhere").value;

 

Thanks for the quick response.

 

So i tried it but it doesent really work.. Im trying to get a number in the form and paste that in the next square. 

<!DOCTYPE html>
<html>
    <head>
        <script>
        var inputJavascript = document.getElementById("htmlInput")[1].value;
        </script>
        
        <style>
            .whitetext {color: white;}
            body{background-color: black}
            table{border-style: ridge; border-width: 10px; border-color: white; padding: 10px; padding-right: 20px; padding-bottom: 20px;}
            td{border-style: groove; border-width: 10px; border-color: white; padding: 5px; color: black; font-family: arial;}
            tr{border-style: groove; border-width: 10px; border-color: white;}
            th{font-family: arial; color: white; padding: 5px;}
        </style>
    </head>
<body>
    <table>
      <tr>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th></th>
        <td><form><input type="number" name="htmlInput"></form></td>
        <td class="whitetext"><script>document.write(inputJavascript);</script></td>
      </tr>
    </table>
</body>
</html>

 

99 Kid. Yes. A 'Youngster'.

World famous Couchpotatoe.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 
<!DOCTYPE html>
<html>
    <head>
        <style>
            .whitetext {color: white;}
            body{background-color: black}
            table{border-style: ridge; border-width: 10px; border-color: white; padding: 10px; padding-right: 20px; padding-bottom: 20px;}
            td{border-style: groove; border-width: 10px; border-color: white; padding: 5px; color: black; font-family: arial;}
            tr{border-style: groove; border-width: 10px; border-color: white;}
            th{font-family: arial; color: white; padding: 5px;}
        </style>
    </head>
<body>
    <table>
      <tr>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th></th>
        <td><input type="number" id="htmlInput" onchange="myFunction()"></td>
        <td class="whitetext" id="output"></td>
      </tr>
    </table>
 <script>
		function myFunction() {
    		var inputJavascript = document.getElementById("htmlInput").value;
		document.getElementById("output").innerHTML = inputJavascript;
		}
	</script>
</body>
</html>


 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

here is the example

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange2 

<!DOCTYPE html>
<html>
<body>

<p>Modify the text in the input field, then click outside the field to fire the onchange event.</p>

Enter some text: <input type="text" name="txt" value="Hello" onchange="myFunction(this.value)">

<script>
function myFunction(val) {
    alert("The input value has changed. The new value is: " + val);
}
</script>

</body>
</html>

this is what youre suppose to do to write code that properly manipulates the DOM

             ☼

ψ ︿_____︿_ψ_   

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, Yali said:

 

Thanks for the quick response.

 

So i tried it but it doesent really work.. Im trying to get a number in the form and paste that in the next square. 


<!DOCTYPE html>
<html>
    <head>
        <script>
        var inputJavascript = document.getElementById("htmlInput")[1].value;
        </script>
        
        <style>
            .whitetext {color: white;}
            body{background-color: black}
            table{border-style: ridge; border-width: 10px; border-color: white; padding: 10px; padding-right: 20px; padding-bottom: 20px;}
            td{border-style: groove; border-width: 10px; border-color: white; padding: 5px; color: black; font-family: arial;}
            tr{border-style: groove; border-width: 10px; border-color: white;}
            th{font-family: arial; color: white; padding: 5px;}
        </style>
    </head>
<body>
    <table>
      <tr>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th></th>
        <td><form><input type="number" name="htmlInput"></form></td>
        <td class="whitetext"><script>document.write(inputJavascript);</script></td>
      </tr>
    </table>
</body>
</html>

 

Ok, I think I accidentally confused you with my post. The option I gave you was slightly different to momo's. Your form element doesn't have an 'id' attribute, but it has a name attribute. So I gave you the getElementsByTagName method to use. This method returns a list of all elements with a 'name' of whatever you choose, which is why you have to specify the number in these brackets [ ]. If you want to use id, it is much easier, no need to worry about the number thing you just need to change your input and script as follows 

       <script>
        var inputJavascript = document.getElementById("htmlInput").value;
        </script>
        
        <input type="number" name="htmlInput" id"htmlInput">

 

Second. In my previous post I mentioned that JavaScript counted from 0. So you would have needed to have it like this anyway 

var inputJavascript = document.getElementsByTagName("htmlInput")[].value;

Instead of the number 1. Since you only have one with a tag name of htmlInput, it would put that tag at the start of the list it makes. So the first item in that list is item 0..... Sorry, I think that little explanation didn't help all that much

 

Third, your script doesn't work quite the was you imagine it would. JavaScript needs triggers to function. You have no triggers. And as I'm writing this @vorticalbox has provided you with a solution for the trigger problem. Basically, in his solution any text in your text box gets put into the next table item when you click that button.

 

This works fine, but if you want it to happen as you're typing or don't want the button you can just change your input to the following  

<input type="number" id="htmlInput" onKeyPress="myFunction()">

Instead of having the button in vorticalbox's example

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 hours ago, Hazy125 said:

Ok, I think I accidentally confused you with my post. The option I gave you was slightly different to momo's. Your form element doesn't have an 'id' attribute, but it has a name attribute. So I gave you the getElementsByTagName method to use. This method returns a list of all elements with a 'name' of whatever you choose, which is why you have to specify the number in these brackets [ ]. If you want to use id, it is much easier, no need to worry about the number thing you just need to change your input and script as follows 


       <script>
        var inputJavascript = document.getElementById("htmlInput").value;
        </script>
        
        <input type="number" name="htmlInput" id"htmlInput">

 

Second. In my previous post I mentioned that JavaScript counted from 0. So you would have needed to have it like this anyway 


var inputJavascript = document.getElementsByTagName("htmlInput")[].value;

Instead of the number 1. Since you only have one with a tag name of htmlInput, it would put that tag at the start of the list it makes. So the first item in that list is item 0..... Sorry, I think that little explanation didn't help all that much

 

Third, your script doesn't work quite the was you imagine it would. JavaScript needs triggers to function. You have no triggers. And as I'm writing this @vorticalbox has provided you with a solution for the trigger problem. Basically, in his solution any text in your text box gets put into the next table item when you click that button.

 

This works fine, but if you want it to happen as you're typing or don't want the button you can just change your input to the following  


<input type="number" id="htmlInput" onKeyPress="myFunction()">

Instead of having the button in vorticalbox's example

 

2 hours ago, SCHISCHKA said:

here is the example

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange2 


<!DOCTYPE html>
<html>
<body>

<p>Modify the text in the input field, then click outside the field to fire the onchange event.</p>

Enter some text: <input type="text" name="txt" value="Hello" onchange="myFunction(this.value)">

<script>
function myFunction(val) {
    alert("The input value has changed. The new value is: " + val);
}
</script>

</body>
</html>

this is what youre suppose to do to write code that properly manipulates the DOM

Perfect it works! Exactly how i imagined it. Thank you for not just pasting stuff, but actually explaining it. Really appreciated!

99 Kid. Yes. A 'Youngster'.

World famous Couchpotatoe.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×