Submit button with textbox and JS - javascript

I want to create a textbox with a submitt button, and then store the data in the textbox into a js variable. How can I do that?

You can do this using HTML forms and then take the value attribute using JavaScript:
var myValue;
function submit() {
myValue = document.getElementById("myTextArea").value;
console.log(myValue);
}
<form action="javascript:submit()">
<textarea id="myTextArea"></textarea>
<input type="submit">
</form>
The final value is contained in the myValue variable.

//get value in console log
var a = document.getElementsByTagName('textarea')[0];
document.getElementsByTagName('input')[0].addEventListener('click',function(e){
e.preventDefault()
console.log(a.value)
})
//or get value in specific div
document.getElementsByTagName('input')[0].addEventListener('click',function(e){
e.preventDefault()
document.getElementById('val').innerHTML = a.value;
})
<form>
<textarea></textarea>
<input type="submit">
<br/>
</form>
<div id='val'></div>

Related

How do I remove the input typed in by user in an input tag after form submission through vanilla javascript?

<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
How do I make it so that the input typed in by the user in the input field is cleared when a submit button is pressed (the one which does not refreshes the page)
you can add this to the onclick function of your button and replace the myForm with the id of your form element
document.getElementById("myForm").reset();
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input
field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
You can also write the javaScript in-between the script tag in a Function or any other way that you want.
You can create a function and add it into the onSubmit event of your form (assuming that you have a form) and then inside of that function you only need to clear the value using something like this:
document.getElementById('day-set').value = ''
Example:
<form onsubmit="myFunction()">
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
<input type="submit">
</form>
<script>
function myFunction(){
document.getElementById('day-set').value = ''
}
</script>

not getting value in html from with javaScript

I am not getting value in the alert box I am trying to get all values by using function with onclick. It gave me an empty value so how do I get all value with this keyword.
form
<form>
<input type="text" id='textid' />
<button class="btn" type="submit" onclick="myfunc(this);">click</button>
</form>
function
function myfunc(el){
let x = el.value;
alert(x) }
You are alerting value of button, instead you should first get the input and then get its value using .value property
const input = document.querySelector("input");
function myfunc(el) {
let x = input.value;
alert(x)
}
<form>
<input type="text" id='textid' />
<button class="btn" type="submit" onclick="myfunc(this);">click</button>
</form>

set the value from an input field on my html page in Localstorage

How can I set the value from an input field on my html page with localstorage.
Like if I type something in an input field for example "Hello" and I press on a button Submit. Then the title from the page should change to "Hello". But it needs to be saved in localstorage if possible.
<p>Hello</p>
<div class="form-group">
<label for="text">Change title:</label>
<input type="text" class="form-control inputBox" id="text" name="text">
</div>
<button>submit</button>
You can save value to localStorage with localStorage.setItem and localStorage.getItem to get localStorage value. Here is the working example.
$(document).ready(function(){
if(localStorage.getItem("inputvalue")){
$('p').text(localStorage.getItem("inputvalue"));
}
$('button').on('click', function() {
localStorage.setItem("inputvalue", $('#text').val());
$('p').text(localStorage.getItem("inputvalue"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello</p>
<div class="form-group">
<label for="text">Change title:</label>
<input type="text" class="form-control inputBox" id="text" name="text">
</div>
<button>submit</button>
You will need some Javascript for this.
You can take the value of the input like so :
var inputValue = document.getElementById("text").value;
Then you can set that into the localStorage.
localStorage.setItem("text", inputValue );
Then you can retrieve the value from local storage with
var valueFromStorage = localStorage.getItem("text")
Identify your submit button and your text area for your header :
<button id="submit">submit</button>
<p id="heading-title">
Then get the click event for that button and perform your DOM update.
var submitButton = document.getElementById("submit");
submitButton.addEventListener("click", function(e) {
document.getElementById("heading-title").innerHTML = valueFromStorage;
})
References
GetElementById
LocalStorage

Changing innerHTML based on input value

This is the HTML code:
<body>
<form>
<input id="input" type="text" name="input" value="Enter Here">
<input type="submit" value="Submit">
</form>
<div id="display">
</div>
</body>
This is the JavaScript:
input = document.getElementById("input");
if (input.value == "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
When I change the input value by clicking on the input field and typing "Hello", it does not display "Hello" in display.innerHTML. I would like it to display "Hello" when "Hello" is typed into the input field. That's a lot of "Hello"'s! Any help would be great! Thanks in advance.
var input = document.getElementById("input"),
display=document.getElementById("display");
input.oninput=function(){
if (input.value === "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
};
<input id="input" type="text" name="input" value="Enter Here">
<div id="display">
</div>
Your javascript code only gets executed once before you have entered anything in the input field.
You need to either setup a change handler for the input field or a submit handler for the form and set display.innerHTML.
Also, did you miss a display = document.getElementById("display");?
If you want use your button for submit the value of your textbox (your input type text-field) use onclick event as follows:
function displayData() {
var div_display = document.getElementById('display');
/* This is your input, but you shoud use another Id for your fields. */
var textValue = document.getElementById('input').value;
/* Change the inner HTML of your div. */
div_display.innerHTML = textValue;
}
<input id="input" type="text" name="input" value="Enter Here" />
<input type="submit" value="Submit" onclick="displayData();" />
<div id="display">
</div>
Hope it helps.

How to get value from HTML textbox in Javascript

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks
here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>
Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}
See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>
If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});
use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}

Categories

Resources