How do I get the <input>'s Value
- I'm trying to make a page viewer through the iframe, so. I have searched up some things to help. But nothing has correctly done something to help. I've tried
Codes I used that didn't work.
Found on W3Docs, I used this portion of a code...
function getInputValue() {
// Selecting the input element and get its value
let inputVal = document.getElementsByClassName("inputClass")[0].value;
// Displaying the value
alert(inputVal);
}<input type="text" placeholder="Type " id="inputId" class="inputClass">
<button type="button" onclick="getInputValue();">Get Value</button>How do I get the <input>'s Value
- I'm trying to make a page viewer through the iframe, so. I have searched up some things to help. But nothing has correctly done something to help. I've tried
Codes I used that didn't work.
Found on W3Docs, I used this portion of a code...
function getInputValue() {
// Selecting the input element and get its value
let inputVal = document.getElementsByClassName("inputClass")[0].value;
// Displaying the value
alert(inputVal);
}<input type="text" placeholder="Type " id="inputId" class="inputClass">
<button type="button" onclick="getInputValue();">Get Value</button>It didn't properly alert the value of the input.
I also tried this, its supposed to have a variable inside of a function that I can simply put inside a button's onclick
var input = document.getElementById("input_id").value;
this also failed in return. nothing happened when I put it inside of a button.
Additional
Is there any source I can find things like this?
Share Improve this question edited May 14, 2021 at 21:44 j08691 208k32 gold badges269 silver badges280 bronze badges asked May 14, 2021 at 21:26 TheodoreTheodore 3031 gold badge3 silver badges15 bronze badges 10- What do you mean by "make a browser through the iframe"? If you're trying to access an input in a different frame/iframe, you won't be able to – Codebling Commented May 14, 2021 at 21:33
- I didn't mean a "browser through iframe". I meant something where you can view pages throught the input. like wear-a-mask.ml or something. @Codebling – Theodore Commented May 14, 2021 at 21:35
-
var input = document.getElementById("inputId").value;(not input_id) – Kinglish Commented May 14, 2021 at 21:36 - @Kinglish input_id was the Id of the input. – Theodore Commented May 14, 2021 at 21:38
-
2
I pasted the code you claimed doesn't work into a snippet and it appears to work just fine. You're also causing some confusion because you claim
getElementById("input_id")doesn't work but in your example the ID isinputId– j08691 Commented May 14, 2021 at 21:44
4 Answers
Reset to default 2The best way to get the value of an input is by making a form:
<form class="my-form">
<input type="text" placeholder="Type " name="my-input">
<button>Get Value</button>
</form>
<script>
let form = document.querySelector(".my-form");
form.addEventListener("submit", function (e) {
e.preventDefault() // This prevents the window from reloading
let formdata = new FormData(this);
let input = formdata.get("my-input");
alert(input);
});
</script>
That's the best way of geting data from inputs. You simply put the values of the form with new FormData(), and then you get the input values with formdata.get("input_name")
Like @Kinglish said, you made a typo when using getElementById.
<input type="text" placeholder="Type " id="inputId" class="inputClass">
<button type="button" onclick="getInputValue();">Get Value</button>
<script>
function getInputValue() {
let inputVal = document.getElementById("inputId").value;
alert(inputVal);
}
</script>
It should be "inputId", not "input_id".
I dont get why there is a '[0]' in between the objects..maybe this can help you. Declare the variable first and then use it.
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
function myFunction() {
var x;
x = document.getElementById("numb").value;
}
To use values entered in input tag use the following code. In following code value entered in input tag is pushed in the array named as myLead `
let inputBtn = document.querySelector("#input-btn")
let myLead = [];
const inputEl = document.getElementById("input-el");
inputBtn.addEventListener("click", function(){
myLead.push(inputEl.value);//here value of input field is pushed in array
console.log(myLead)
})
`