I'm learning JavaScript. I want to print the data that user writes in the textbox.The operation should go hand-in-hand i.w if he writes 2 it should be displayed 2 first then 23 then displayed 23 and so on.
function onChange() {
document.getElementById("display").innerHTML = document.getElementById("name").value;
}
<html>
<head>
</head>
<body>
Enter Your Name:<input type="text" id="name" onkeyup="this.onChange();">
Show::<span id="display"></span>
</body>
</html>
There is no this before onchange.
You can use this.value to directly access the value and use it instead of targeting the element again using getElementById.
function onChange(value) {
document.getElementById('display').innerHTML = value;
}
<html>
<head>
</head>
<body>
Enter Your Name:<input type="text" id="name" onkeyup="onChange(this.value)"> Show::
<span id="display"></span>
</body>
</html>
Try this:-
function onChange() {
document.getElementById("display").innerHTML = document.getElementById("name").value;
}
<html>
<head>
</head>
<body>
Enter Your Name:<input type="text" id="name" onkeyup="onChange()"> Show::
<span id="display"></span>
</body>
</html>
Related
When I'm running this code it is not showing me the message which I want to display (i.e: res).Suppose I'm giving an input "$code$".Can anyone just help me out?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form>
<input type="text" name="a" id="a">
<button onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var res=msg.replace("$code$","1101");
document.getElementById("a").innerHTML=res;//this is to print res.
}
</script>
</body>
</html>
Two elements can't have the same ID. Further, an input element's value can not be obtained using the innerHTML property. Also, on clicking the submit button, the page will reload since the form get's submitted. To prevent that, call the function parse in an onsubmit on the <form> tag, and return false from the function.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form onsubmit="return parse();">
<input type="text" name="a" id="a">
<button type="submit">submit</button>
<p id="b"></p>
</form>
<script>
function parse(){
var msg = document.getElementById("a").value;
document.getElementById("b").innerHTML = msg;
return false;
}
</script>
</body>
</html>
Check this:
<form>
<input type="text" name="a" class="input_field" id="a">
<button type="button" onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var form = document.getElementsByTagName("form")[0]
msg = form.getElementsByClassName("input_field")[0].value;//this is to print res.
}
</script>
I added type="button" to the button to prevent the form from reloading the page
As the following, in codeigniter view, I want to call twice js events- 'onchange' and 'onblur' function
Is it possible? How can I call?
Please see below code.
<html>
<bods >
<input type="text" value="here is a text field" onblur="alert('Blur Event!')" onchange="alert('Change Event!')" >
</body>
</html>
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname" onchange="alert('ok')" onblur="blurfunction()">
<script>
function blurfunction() {
var x = document.getElementById("fname");
x.value = x.value.toLowerCase();
}
function keyupcall(){
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Both the methods will called at the same time, I am not sure for what purpose you required it.
But you can write both the method as following.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("The text has been changed.");
});
$("input").blur(function(){
alert("This input field has lost its focus.");
});
});
</script>
</head>
<body>
<input type="text">
<p>Write something in the input field, and then click outside the field.</p>
</body>
</html>
I have this text field hidden with HTML hidden code, now when the user enter an invalid input I use javascript to unhide the text field and display an error message, this is what is suppose to happen.
I have seen a lot of css style like
`style.visibility = 'visible';` and `style.display='block';`
But none of them are working for me what happens is that the error text shows for less than a second and then disappears, any one would like to share their thoughts.
This is the complete code for better understanding, it's still not working in firefox and Edge while IE and Chrome wont do anything, in Firefox, it just blinks once on each button press and that about it.
Javascript:
</script>
function validate(){
var firstname = document.getElementById("fn").value;
if (firstname == "") {
document.getElementById("fn").style.visibility = "visible";
document.getElementById("fn").text = "ERROR";
}
}
function init()
{
var formData = document.getElementById("enqForm");
formData.onsubmit = validate;
}
window.onload = init;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts.js"></script>
</head>
<body>
<form id="enqForm">
<input id="fn" type="text" placeholder="First Name *" />
<input id="sendbutton" type="submit" value="Enquire" />
</form>
</body>
</html>
Instead of changing the style, you can change the form's type attribute.
Using JavaScript - assuming you want to change lnspan to text:
document.getElementById('lnspan').type = 'text';
Style is not the same as the type attribute.
Also there's two id attributes in your <input>, you may want to change that.
**THAT IS THE ANSWER TO YOUR QUESTION**
<html>
<head>
<script>
function newDoc() {
document.getElementById("hid").type="text";
document.getElementById("hid").value="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<input type="hidden" id="hid" value="">
</body>
</html>
<!--However this makes your error message as text field which is not good.
What you can do is make the Error into embedded into paragraph <p> so the
users cannot change it and it also looks more professional
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
document.getElementById("te").innerHTML="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<p id="te">
</body>
</html>
I want the data in the text field to transfer to a popup, but when I trigger the popup, it is always blank, no matter what is in the box.
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input type="text" name=popupMess><br>
</body>
<script>
function popup() {
window.confirm(name.popupMess);
}
</script>
</html>
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input id="popupMess" type="text"><br>
</body>
<script>
function popup() {
alert(document.getElementById('popupMess').value);
}
</script>
</html>
You forgot the " in name="popupMess".
function popup () {
var text = document.querySelector("input[name='popupMess']").value;
window.confirm(text);
}
Hi here is my jsfiddle that demonstrates the functionality
http://jsfiddle.net/7pjqfcvd/2/
you have to
mark the input element with an Id
<input type="text" id="popupMess"/>
use the id in document.getElementById call to obtain the input element
var elem = document.getElementById("popupMess");
retrieve the value from the element and pass it into the messagebox
window.confirm(elem.value);
But still if you want to use name then try this...
<html>
<head>
<title>Popup</title>
</head>
<body>
<button onclick="popup()">Click for popup</button>
<input type="text" name=popupMess><br>
<script>
function popup() {
var d = document.getElementsByName("popupMess");
window.confirm(d[0].value);
}
</script>
</body>
</html>
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>