How to get text field values in Javascript - javascript

I have the following HTML/JS code:
<!DOCTYPE html>
<html>
<body>
<input type='text' id='action' placeholder='defualt'>
<button type='button' onclick='document.getElementById("action").placeholder="it worked!"'>Change Placeholder</button>
</body>
</html>
When the button is pressed, the placeholder value of the action text input field is set to 'it worked!'
What I would like to do is make the script set the placeholder of the field whatever the user puts into it when the user presses the button. How should I do this?

To access the input element's value, you can access .value property. Then just like you set the placeholder, you can assign that to .placeholder property.
Finally, if you wish to have the placeholder visible immediately, you can reset the value by setting it to an empty string.
function setPlaceHolder() {
var input= document.getElementById("action");
input.placeholder=input.value;
input.value = "";
}
<!DOCTYPE html>
<html>
<body>
<input type='text' id='action' placeholder='defualt'>
<button type='button' onclick='setPlaceHolder();'>Change Placeholder</button>
</body>
</html>

Try this
function myfns() {
var x = document.getElementById("action").value;
console.log(x)
document.getElementById("action").placeholder = x
document.getElementById("action").value = "";
}
<html>
<body>
<input type='text' id='action' placeholder='defualt'>
<button type='button' onclick='myfns()'>Change Placeholder</button>
</body>
</html>

Related

Input length is undifined

< Why Input Length Is Undifined
Js
function calc() {
var inp = document.getElementById("inp");
var result = document.getElementById("result");
var inpval = inp.value
result.innerHTML = inpval;
alert(inp.length);
}
Html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input id="inp" class="inp" Type="number"/>
<center>
<div id="calc" class="calc" onclick="calc()">Calculate</div>
<br />
<br />
<p id="result"></p>
</center>
</body>
</html>
Please help me with this code I don't know why I am getting this error whenever I click on function it always shows undifined
getElementbyId returns Element and the Element has no length property. This is the reason why that output is undefined. So if you want to get the length of the value of the input element, you have to access input element with value property like inp.value or inpval.
After then, you can get the length of that like inp.value.length or inpval.length.

How do i alert the textbox input to a user

If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE

Set Input Value to Javascript Variable

Let's say I have a variable called x in javascript. How can I set the value of a text input (HTML) to that variable? For example:
The value of the input will now be Swag
<input type="text" value="Swag" />
But if I want the value to be a javascript variable? How do I do? Something like this? (I am just guessing, trying to make my point clear)
<input type="text" value="variable.x" />
You can set it in your javascript code like:
<input id="myInput" type="text" value="Swag" />
<script>
var test = "test";
document.getElementById("myInput").value = test;
</script>
This is a better solution and will probably avoid confusion for newbies...
<!DOCTYPE html>
<html>
<body>
<h1>Input and Display Message</h1>
<p>Enter a message</p>
<input type="text" id="msg" ><br>
<button onclick="displayMessage()">Click me</button>
<p id="showinputhere"></p>
<script>
function displayMessage(){
let themsg = document.getElementById("msg").value;
if (themsg){
document.getElementById("showinputhere").innerHTML = themsg;
}
else{
document.getElementById("showinputhere").innerHTML = "No message set";
}
}
</script>
</body>
</html>

Javascript code not being executed on button click

I have some html and some javascript code that is supposed to take input in a text box, and open a new tab with the Wikipedia page of whatever was in the text box. However, I'm using this as an extension, and google chrome doesn't allow inline javascript.
page.js
document.getElementById("search").addEventListener("click", searchPage);
function searchPage() {
console.log("test")
var temp = document.getElementById(pageName);
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
popup.html
<!DOCTYPE html>
<html>
<body>
Random
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js></script>
</body>
</html>
Anyone have any clue why this isn't working?
what you can do instead is include your JS in your HTML <head> tag, and add an onClick attribute to your button, like so:
<!DOCTYPE html>
<html>
<body>
<a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js"></script>
</body>
</html>
I think the problem was that in your original code, you had <script src="./page.js></script> instead of <script src="./page.js"></script>
then you can change your javascript to be the following:
document.getElementById('search').addEventListener('click', searchPage);
function searchPage() {
console.log("hjabdfs");
var temp = document.getElementById('pageName');
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
please note that I also changed var temp = document.getElementById(pageName) to var temp = document.getElementById('pageName'), as pageName is not a variable.
Input type submit is trying to submit a form. You need to add an action to that submit button or you can change it to a button and the event will fire.
Your click event listener doesn't work because it has not been loaded yet. Or in other words, you need to make sure this line <script src="./page.js></script> is correctly pointing to page.js.

innerHTML not displaying text

Please excuse my basic query to javascript and html
I am new to javascript and html. I am trying to work with javascript on click and few other things. In below code, am trying to display a text on "onclick" function. I am using an external javascript.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" >
<script type="text/javascript" src="/home/roger/Documents/html/myScript.js"></script>
</head>
<body>
<form>
First Name: <input type="text" name="first" id="names"/><br>
Phone Number: <input type="number" name="numb" id="numb"/><br>
<button type="button" onclick="verifyText()">Click Me!</button>
</form>
</body>
</html>
Below is my code in myScript.js
function verifyText(){
document.getElementById("names").innerHTML = "Why not displaying?.";
}
If I put alert in function, pop comes out, but I am unable to figure why innerHTML is not working. Any help will be highly appreciated. Thanks.
You need to set the value, because names is an input field.
document.getElementById("names").value = "Why not displaying?.";
See: http://jsfiddle.net/zrmrx/
names is an <input>. You need to set its value, instead of innerHTML. Try this:
function verifyText(){
document.getElementById("names").value = "Must display now!";
}
Use the javascript element.setAttribute('[attr]','string') to save the user input values or input checkbox checks as part of the document innerHTML. The reset() function changes the form input back to its current Attribute setting. Javascript can dynamically change the default input value with the setAttribute therefore, change the user input default value when reset() is clicked or your code reloads it as part of a saved innerHTML.
function update_attribute() {
var obj = document.getElementById('demo');
if (obj.type == 'checkbox') {
if (obj.checked == true) {
obj.setAttribute('checked', 'checked');
} else {
obj.removeAttribute('checked');
}
}
if (obj.type == 'text') {
obj.setAttribute('value', obj.value);
}
}
<form id='myform'>
<label>Text Input</label><br>
<input type='text' id='demo'>
<br>
<br>
<button type='button' onclick='update_attribute(this)'>Change Attribute</button>
<button type='reset'>RESET</button>
</form>

Categories

Resources