I am getting an error (document.my_formm.fieldName.value is null or not an object) from the below code:
<html>
<head>
<title>(Type a title for your page here)</title>
<script language=JavaScript>
function check_length(my_formm,fieldName)
{
alert(fieldName);
alert(document.my_formm.fieldName.value);
}
</script>
</head>
<body>
<form name=my_form method=post>
<input type="text" onChange=check_length("my_form","my_text"); name=my_text rows=4 cols=30 value="">
<br>
<input size=1 value=50 name=text_num> Characters Left
</form>
</body>
</html>
Your check_length function is using variables to identify the form and field names, however, by using dot notation, you are referring to a element of document named my_formm. When you are are using variable names, you should use the bracket notation instead:
function check_length(my_formm,fieldName)
{
alert(fieldName);
alert(document[my_formm][fieldName].value);
}
Also, you should really quote attributes in your input:
<input type="text" onKeyPress="checkCompanyName();" onChange="check_length('my_form', 'my_text');" name="my_text" rows="4" cols="30" value="">
In your javascript you have referred to the form as 'my_formm' i.e. you have an extra 'm' at the end which is not present in the HTML, this could be your problem.
Why does your JavaScript method take in that first parameter if it never uses it?
Just do onChange=check_length(this)
and in your function
function check_length(element)
{
// element points to the element in question
// element.form points to the form if you need it
alert(element.value);
}
In general it would be nice to write WHAT error are you getting...
anyhow checkCompanyName is not defined in the code you wrote.
Also you're passing two strings as variable, they do not have properties...
A better way to do this:
<script type="text/javascript">
function checkLength()
{
inp = document.getElementById("myInput");
len = document.getElementById("len");
len.value = inp.value.length;
}
</script>
<input id="myInput" onkeyup="checkLength()" />
<input id="len" />
EDIT AFTER COMMENT:
<script type="text/javascript">
function checkLength(inputname, lenname)
{
inp = document.getElementById(inputname);
len = document.getElementById(lenname);
len.value = inp.value.length;
}
</script>
<input id="myInput" onkeyup="checkLength('myInput', 'len')" />
<input id="len" />
document.my_formm looks for a form named my_formm. You need to use the associative array sintax instead, like document[my_formm], which will pass the value in my_formm at runtime, rather than looking for a property in the document object called my_formm (which doesn't exist).
Related
I'm a newcomer to JavaScript. I'm trying to get what I thought would be a simple "onchange" event to work with an input form element and have a JavaScript function write back the value of the input using .innerHTML.
Here is what my output looks like:
First Name *
Hello [object HTMLCollection]
How do I deal with a variable returning the message of "[object HTMLcollection]" Please be explicitIn answering, because as I said, I'm a newcomer to javascript.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onchange event Testing input text</title>
<script type="text/javascript">
<!--
function write_firstname()
{
var fnid = document.getElementById("fnm");
var fn = document.getElementsByName("first_name");
fnid.innerHTML = "Hello " + fn;
}
//-->
</script>
</head>
<body>
<form>
<!---->
<label for="first">First Name *</label>
<br />
<div class="form_indent">
<input id="first" type="text" name="first_name" onChange="write_firstname();" autofocus>
<p id="fnm"></p>
<br />
</div>
<!---->
<!---->
<div class="form_indent">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
<!---->
</form>
</body>
</html>
I know it's probably something simple. Someone please kick me in the right direction!
document.getElementsByName("first_name"); returns a collection of elements matching the selector, a nodeList.
Note the s in getElements... everytime you see that, there's a chance more than one element could match, and a nodeList is returned instead of a single DOM node.
A nodeList is an array-like object containing the elements, so you're trying to add an object to a string, and as that's not really possible, javascript runs toString() to turn the nodeList into a string, and the string representation is [object HTMLCollection]
What you could be doing instead is just passing the element to the function
<input id="first" type="text" name="first_name" onchange="write_firstname(this);" autofocus>
and then do
function write_firstname(elem) {
var fnid = document.getElementById("fnm");
fnid.innerHTML = "Hello " + elem.value;
}
FIDDLE
I am new to "html" and "Javascript".
<p id="pid"></p>
<script>
abc="hello";
document.getElementById("pid").innerHTML=abc;
</script>
<input type="text"
value="<script>document.getElementById("pid").innerHTML</script>"/>
How the code gets executed in the above case.
Looks like you are trying to set a value of the input field to be equal to the content of the pid paragraph. In this case you should set value property of the HTMLInputElement. You can get a reference to it using getElementById (there are many ways to get this element object) which you already know how to use. For example:
<p id="pid"></p>
<input type="text" id="input" />
<script>
var abc = "hello";
var pid = document.getElementById("pid");
pid.innerHTML = abc;
document.getElementById("input").value = pid.innerHTML;
</script>
the content of the 'value' attribute is just text, the browser will not interpret the JS code.
You can use the DOM instead:
<p id="pid"></p>
<script>
abc="hello";
document.getElementById("pid").innerHTML=abc;
</script>
<input id = "myInput" type="text" value="" />
<script>
document.getElementById("myInput").value = abc;
//OR : document.getElementById("myInput").value = getElementById("pid").innerHTML;
</script>
see : Accesing the javascript variable in html tag
I think you're trying to do this:
<script>
function myFunction(){
var abc="hello";
document.getElementById("pid").innerHTML=abc;
}
</script>
<p id="pid"></p>
<input type="button" value="Click Me" onclick="myFunction();" >
I'm trying to learn how to use JS in order to create a unit converter for a site I'm working on.
I did have intentions of trying to accomplish it using PHP but someone pointed out how inefficient it would be and so I'm now trying to learn JS to carry out the same tasks.
I've written a very small test function to add two numbers, it worked fine. I then adjusted it slightly to take in a few more params and to check a couple of conditions, again that worked fine - I created a new object and passed the variables in directly.
I now need to pass the values from the form that I have into this function in order to compute the sum and output the result. I keep getting an error of 'undefined'. I've googled and read but can't seem to find a solution.
so far I have:
<script type="text/javascript">
function Convert(from, to, units){
this.from = $("#from").val();
this.to = $("#to").val();
this.units = $("#units").val();
}
Convert.prototype.convertThem = function(){
if(this.from == "degC"){
if(this.to == "degF"){
return this.units * 347956757524;
}
}
}
calcTempTest = new Convert(this.from, this.to, this.units);
alert(calcTempTest.convertThem());
console.log(calcTempTest);
</script>
Could anyone tell me what I'm doing wrong please? The 'to','from' and 'units' are the id's from the form.
The Form:
<div class="form">
<label for="units">Units:</label>
<input type="text" name="units" id="units" class="required digits" />
</div>
<div class="form">
<label for="from">Convert From:</label>
<select name="from" id="from">
<option value="from">-Select an Option-</option>
</select>
</div>
<div class="form">
<label for="to">Convert Into:</label>
<select name="to" id="to">
<option value="to">-Select an Option-</option>
</select>
</div>
<div class="form">
<label> </label>
<input type="submit" name="submit" value="Convert!" />
</div>
many thanks.
Explanation
Your select selected option value onLoad both are "from" and "to". Since these are not equal to "degF" and "degC", your assignments won't go on, the resulting variable will be undefined since no value will be asssigned to it.
Solution
Add several option to your select or change their default value. I also added a default value to the input.
HTML
<input type="text" name="units" id="units" value="12" class="required digits" />
<option value="degC">-Select an Option-</option>
<option value="degF">-Select an Option-</option>
EDIT
I have added a JSFiddle here which executes the script on the button click with the following modifications to JavaScript:
NOTE: I also added the real formula.
JavaScript/jQuery
$('input[name="submit"]').click(function () {
var c = new Convert();
alert(c.convertThem());
});
function Convert() {
this.from = $("#from").val();
this.to = $("#to").val();
this.units = $("#units").val();
}
Convert.prototype.convertThem = function () {
if (this.from == "degC") {
if (this.to == "degF") {
return this.units * 1.8 + 32;
}
}
}
I think when you create the convert object you're trying to pass variables that don't exist:
calcTempTest = new Convert(this.from, this.to, this.units);
I'm pretty sure this stands for window at that point and windw.from is undefined. You don't seem to be doing anything with these values anyway so you could change it to:
calcTempTest = new Convert();
Maybe the following answer could help you out with what this stands for in JS: Prototypical inheritance - writing up
Here is some minimally working code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
</head>
<body>
<div class="form">
<label for="units">Units:</label>
<input type="text" name="units" id="units" class="required digits" />
</div>
<div class="form">
<label for="from">Convert From:</label>
<select name="from" id="from">
<option value="degC">degC</option>
</select>
</div>
<div class="form">
<label for="to">Convert Into:</label>
<select name="to" id="to">
<option value="degF">degG</option>
</select>
</div>
<div class="form">
<label for="output">Output:</label>
<input type="text" id="output" />
</div>
<div class="form">
<label> </label>
<input type="submit" id="subm" name="submit" value="Convert!" />
</div>
<script type="text/javascript">
(function () {
function Convert(from, to, units) {
// when convert is created set a reference to the input elements
this.$from = $("#from");
this.$to = $("#to");
this.$units = $("#units");
this.$output = $("#output");
}
Convert.prototype.convertThem = function () {
// this.$... is a jQuery object containing the input elements
if (this.$from.val() == "degC") {
if (this.$to.val() == "degF") {
this.$output.val( this.$units.val() * 347956757524);
}
}
}
calcTempTest = new Convert();
$("#subm").on("click", null, null, function () {
calcTempTest.convertThem();
});
})();//anonymous funciton, no variables in global scope
</script>
</body>
</html>
There are several issues with your code. Most of them have been resolved in the accepted answer, but I wanted to provide some more insights that would help you create more reusable code in the future.
Since I have already created a jsfiddle with my own example, it will be a shame to let it go to waste so I will post it anyway with some comments.
Using constructor parameters
function Convert(from, to, units, res){
this.from = from;
//etc...
}
Passing parameters to an object's constructor (and using them) makes it more reusable. You did not use the passed parameters and the selected answer used what I assume was your original solution (hard-coding the element values into the object upon construction).
This way you can have multiple instances of the converter on the same page, you can put its code in an external file as it gets more complex and only put the instantiation logic in the page itself (if your page structure changes, there is no need to change the external file, just update the provided constructor parameters).
Storing node references instead of values
The other thing I wanted to point out is the way the calculation is done.
Your implementation requires a new object to be created for each calculation. I find it much better to create a single Converter and obtain the values only when required. That it the reason I stored a reference to the form field DOM nodes and did not store their values.
$("#btnConvert").click(calcTempTest.convertThem.bind(calcTempTest));
I used bind(...) in the click attachment to preserve the object's scope.
Good luck!
I have a problem. I want the text to be filled by the default value when user lefts it blank here is my code. Please help me to tackle this error.
<html>
<head>
<title>
</title>
<script lang='javascript'>
function makeBlank(obj,defMsg){
if(obj.value==defMsg){
obj.value="";
}
}
function fillDefValue(obj,defMsg){
if(obj.value==""){
obj.value=defMsg;
}
}
</script>
</head>
<body>
<input style="width:190px" onblur="fillDefValue(this,'User Name')" onfocus="makeBlank(this,'User Name')" value="Name" name="fromname" id="fromname" type="text">
</body>
</html>
You don't have to pass the default value to the functions, it's integral part of the textbox element itself:
function makeBlank(obj) {
if(obj.value === obj.defaultValue){
obj.value = "";
}
}
function fillDefValue(obj) {
if(obj.value == "") {
obj.value = obj.defaultValue;
}
}
Then pass only the element:
onblur="fillDefValue(this);" onfocus="makeBlank(this);"
Live test case - it works on all major browsers, probably all browsers.
Your code has a minor error. The functions which make the text field blank or filled with default value have an if statement which checks the condition if(obj.value==defMsg) which is defMsg='User Name'. But in the text field you are assigning value = "Name" so the if condition never become true. Thats why your code is not working. You should either use <input .... value="User Name" ......> or you can call the both functions as <input ...onblur="fillDefValue(this,'Name')" onfocus="makeBlank(this,'Name')" vlaue="Name"....>. Doing any of these two changes the code will work fine. Here is your code with the first change I mentioned:
<html>
<head>
<title>
</title>
<script lang='javascript'>
function makeBlank(obj,defMsg){
if(obj.value==defMsg){
obj.value="";
}
}
function fillDefValue(obj,defMsg){
if(obj.value==""){
obj.value=defMsg;
}
}
</script>
</head>
<body>
<input style="width:190px" onblur="fillDefValue(this,'User Name')" onfocus="makeBlank(this,'User Name')" value="User Name" name="fromname" id="fromname" type="text">
</body>
</html>
You’re probably looking for the placeholder HTML attribute.
<input placeholder="e.g. username42">
You only need JavaScript as a fallback for older browsers. This jQuery plugin will take care of it for you. Here’s a demo: http://mathiasbynens.be/demo/placeholder
how can I take the value of a query string and place it into an input box? Currently I have:
<input type="text" name="spouse" id="spouse" value="<script type="text/javascript">
document.write("Name: " + Request.QueryString("spouse"));
</script>"/>
But that only takes the script take and all of its contents and places it into the input box.
I would like to be able to take my query string that is coming from this code:
<tr >
<td><input type="text" name="n1" value="Duck, Donald" /></td>
<td><input type="text" name="n2" value="Daisy" /></td>
<td><input type="button" value="Show" title="Show"
onclick="location.href='example123.html?name=' + escape(this.form.n1.value)+ '&spouse=' + escape(this.form.n2.value);" />
</td>
and have the value for name or spouse appear inside of an input box. What is the proper way to place a value into an input box from a query string?
Request.QueryString is not a native JavaScript function. Use the document.location object and parse out the value you want.
Perhaps use the onload function to perform the action you need. This calls your function once the document has been fully loaded and so you know all tags in the html will exist at this point and be can be referenced properly.
eg.
<html>
<head>
<title>Value Setting</title>
<script type="text/javascript">
window.onload = (function() {
document.getElementById('spouse').value = "one way";
document.forms[0].elements[1].value = "another way";
/* note elements refers to only input children */
});
</script>
</head>
<body>
<form id="myform">
<div>
<input id="first-field" value="first-field" onchange="this.value += ' an example';"/>
</div>
<div>
<p>
<input id="spouse" value="spouse"/>
</p>
</div>
</form>
</body>
</html>
You can't embed elements in attributes as that isn't valid html. Though some attributes can get evaluated as javascript. Namely attributes such as action, onchange, onclick and so on.