I am trying to autofocus input on button click but it doesn't work. Code can be found here for edit: https://www.w3schools.com/code/tryit.asp?filename=FPPCFP5RTU9E
<input type="text" id="myText" autofocus>
<button onclick="myFunction()">Focus Input</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myText").autofocus = true;
}
</script>
autofocusis an HTML attribute. If you want to set the focus property by JavaScript you have to use focus().
So try document.getElementById("myText").focus();:
Working Code:
function myFunction() {
document.getElementById("myText").focus();
}
<input type="text" id="myText" autofocus>
<button onclick="myFunction()">Focus Input</button>
<p id="demo"></p>
Related
I would like to display the result from the name field in a read-only text field called output. I have it working via .innerHTML, but I'm not sure how to get the result into a text box.
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:green;">
</h1>
<h2>Text value property</h2>
<p>
Change the text of the text field, and then click the button below.
</p>
Name:<input type="text" id="myText" value="Mickey">
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
Output:<input type="text" id="myText" readonly>
</body>
</html>
I would like to get the result inside a read-only text field.
Try the readonly property on the input element that's going to hold the output :
<body>
<h2>Text value property</h2>
<p>Change the text of the text field, and then click the button below.</p>
Name:<input type="text" id="myText" value="Mickey" />
<button type="button" onclick="myFunction()">Try it</button>
<input type="text" readonly id="output" style="display: none;">
<script>
function myFunction() {
var x = document.getElementById('myText').value;
var output = document.getElementById('output');
output.style.display = 'block';
output.value = x;
}
</script>
</body>
I was able to get it to work using this code.
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}
</script>
<h2>Text value property</h2>
<p>
Change the text of the text field,
and then click the button below.
</p>
Name:<input type="text" id="myText" value="Mickey">
<button onClick="myFunction()">Try it</button><br>
<span id="demo"></span>
All you need to do is set the .value property of the output text input. The .value property can be written to via JavaScript even if it is read only to the user. Also, make sure that your input and output fields don't share the same ID:
const myText = document.getElementById("myText");
const output = document.getElementById("output");
document.getElementById('tryit').addEventListener('click', () => {
output.value = myText.value;
});
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>Text value property</h2>
<p>
Change the text of the text field, and then click the button below.
</p>
Name:<input type="text" id="myText" value="Mickey">
<button type="button" id="tryit">Try it</button>
<p id="demo"></p>
Output:<input type="text" id="output" readonly>
</body>
</html>
It's also a good practice to use .addEventListener() instead of onclick handlers. It is the newer way of doing event handlers.
I have started javascript DOM manipulation, I come across an error maybe.
Whenever I input in name field like jaykumar and press click me button .In demo, jaykumar comes and with in few microseconds go.
function myfunction() {
var x = document.getElementById("myform").elements["fname"].value;
document.getElementById("demo").innerHTML = x;
}
<form id="myform">
name<input type="textbox" name="fname"> email
<input type="textbox" name="email">
<button onclick="myfunction()"> Click me</button>
</form>
<div id="demo"></div>
A button inside a form's default behaviour is to submit the form. To change this make the button of type="button"
function myfunction() {
var x = document.getElementById("myform").elements["fname"].value;
document.getElementById("demo").innerHTML = x;
}
<form id="myform">
name<input type="textbox" name="fname"> email
<input type="textbox" name="email">
<button type="button" onclick="myfunction()"> Click me</button>
</form>
<div id="demo"></div>
I have a one word <p>, and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery.
This is the paragraph to change
<p class="editor-example" id="screen-name">Name</p>
and this is the form and the button I'm using to get and apply the change
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time.
Thanks!!
Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag
document.getElementById('apply').addEventListener('click', function() {
document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
<button id="apply" type="button">Apply</button>
</form>
You need to write keypress event for the text box
$("#text").keypress(function() {
$("#p").html($("#text").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>
You can do like this:
$(document).ready(function(){
$("#nameID").keyup(function(){
var name = $("#nameID").val();
$("#screen-name").text(name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
As you said:
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!
In Jquery:
$(document).ready(function(){
$('#nameID').keyup(function(){
$('#screen-name').text($(this).val());
});
});
In html:
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
$("#apply").click(function() {
$("#paragraph").text($("#nameID").val());
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p id="paragraph">This Text changes from the form below</p>
<form>
<input id="nameID" type="text" >
<button id="apply" type="button">Apply</button>
</form>
I am having trouble outputing text to a div in Javascript. When I call the function on button click it displays the text for a fraction of second and then disappears. Why is it so? The code is given below;
Code:
function val(){
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
HTML:
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="submit" onclick="val()">Sign Up</button>
</form>
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" id="asd">Sign Up</button>
</form>
$('#asd').click(function () {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
});
FIDDLE
I made a few changes. I changed the button type from submit to button also i added an id for the button. check it
You have a submit button in a form, its default action is to submit the form that is why the result is disappearing(the page is getting refreshed).
Since you really don't want to submit the form(here you are just doing some dynamic changes to the page), one easy solution is to change the type of the button to button
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
Another solution is to prevent the default action of the submit button click by returning false
Try this:
Your code works as expected but as you have taken button type as submit, i submits the form.
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
<form name="test_form">
<input id="demo" type="text" value="">
</form>
<button onclick="data()">GO</button>
<script>
var x=document.getElementById("demo");
function data()
{
x.innerHTML="TEST";
}
</script>
I am trying to input JavaScript function into input field but I've got a problem with that, nothing is happening, any ideas how to fix it?
x.innerHTML="TEST";
should be
x.value="TEST";
<script>
function data()
{
var x=document.getElementById("demo");
x.value="TEST";
}
</script>
<form name="test_form">
<input id="demo" type="text" value="">
</form>
<button onclick="data();">GO</button>
http://jsfiddle.net/vdAY7/