When I use this code the console.log and the value in the field disappear right away.
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
How can I prevent that from happening. Or what am I doing wrong?
The final goal will be to append the result of a calculation by the value of the field into another field.
edit:
<html>
<head>
<script src="bereken.js"></script>
</head>
<body>
<form id="berekenForm">
Bereken: <input type="text" name="bereken" id="bereken"/><br />
<input type="submit" value="Bereken" id="berekenKnop"/>
</form>
</body>
</html>
The submit button is doing its default task. i.e. submitting the form. Try handling that.
Value in the field 'bereken' not disappearing.See the code below. If this is not the expected answer, please, Update the question with question in details:
<html>
<head>
<script type="text/javascript">
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
</script>
</head>
<body>
<div id="berekenKnop">
Click Here to console value
</div><br/>
<input type="text" value=" bereken value" id="bereken" />
</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>
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
window.alert("Hi");
//var name-"Bhuvanesh";
//var Comment="Zack";
//window.alert("Hello");
}
};
</script>
</html>
This code above works and the code below does not work
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
//window.alert("Hi");
var name-"Bhuvanesh"; //Edited from - to =
var Comment="Zack";
window.alert("Hello "+name);
}
};
</script>
</html>
I do not understand why the code below does not work. I have used window.onload to make sure the page renders first. Somehow the code does not seem to work. I am trying to make a simple page that can accept Name and comment from the textbox and display it on the webpage. I am relatively new to web development. Any help is appreciated.
Edit 1: This code below does not seem to work.`
var name=document.getElementByName("usrname");
var Comment=document.getElementByName("comnts");
document.write(name+ "wrote "+Comment);
As far as I can tell, getElementByName is not a function. You can use getElementsByName (note the plural). This will return a collection rather than an element. More than this, you were fetching the entire element, not the value of the element like it seems you want. The following works for me:
var name = document.getElementsByName("usrname")[0].value;
var comment = document.getElementsByName("comnts")[0].value;
document.write(name + "wrote "+ comment);
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>