Below is the sample code in my JSP page:
<form name = loginform method = post action="">
<table class=registerTable>
<tr>
<td>Username:</td></tr>
<tr><td>
<input name=user type=text class=usnm required size=28 maxlength=35 autocomplete="off" onblur="validateUser()" onkeyup="checkUsernameAvailability(this.value)"><br></td></tr>
<tr><td>
<span id = uerrmsg class = error></span><br></td></tr>
</table>
</form>
When onblur=validateUser() is called the following code executes:
function validateUser(){
if(loginform.user.value.length<5){
document.getElementById("uerrmsg").innerHTML="minimum 5 characters";
return false;
}else{
document.getElementById("uerrmsg").innerHTML="";
return true;
}
}
Error Console in FF gives the following error
loginform is not defined
Please help me on this.
PS: Above code works in all other browser.
you can use input.getAttribute("name") to get name attribute of an input.
This works for almost all browsers.
By the way, if you use getElementById, you must populate "id" field of input.
You should be using document.loginform.
You don't need the form for this.
First give your input an id: id="user". Then you can access it using document.getElementById(), as you do with the element. something like this:
document.getElementById("user").value.length
Also, your code is very non-standard, for eg you should not put a " " (space) between the attribute (or it's value) and the = sign. And the attributes' values should be within quotes (Look at the source code of this page, for example).
Related
What's wrong in this, i want to pass the value to the field of the specific form
var formid = 'addtaskform{/literal}{$smarty.session.formno}{literal}';
document.formid.title.value = 'yeah';
i am getting this error
TypeError: document.getElementById(...) is null
There is no problem with concatenation in that case. You probably do something else wrong.
Look at the following example:
PHP file:
$_SESSION['formno'] = 5;
$smarty->display('test.tpl');
Smarty template file:
<input type="text" id="addtaskform5" value="5" />
<script type="text/javascript">
{literal}
var formid = 'addtaskform{/literal}{$smarty.session.formno}{literal}';
document.getElementById(formid).value = 'yeah';
{/literal}
</script>
It works fine. Value of input is changed from 5 to yeah
You most likely don't have a form element with the id formid in your site, at least it is not what you actually want to achieve.
What you are looking for is this:
document[formid].title.value = 'yeah';
document.formid (Dot Notation) : get the element with the id formid
document[formid] (Bracket Notation): get the element with the id that is stored in the value formid
I need to take the contents of form fields (client, phone number) validate them (most likely using regex) and concatenate them into an alert and a modify some html so on form submit I get
<p>John smith
99999999
2 wilerby dr
morrowie city
morrowie </p>
and alert("form data")..
I tried with something like var field1 = document.forms[0].elements[0].value,
but not sure how to address the fields.
Edit:
<form id="form1" action="form_action.asp">
<fieldset>
<table cellpadding="3" border="0">
<th> Order Details </th>
<tr>
<td>Client Name:</td>
<td><input id="clientname" type="text" name="clientname" value="" maxlength="20"></td>
</tr>
...
Edit 2
var name = document.getElementById('clientname').value;
function buttontest()
{
alert(clientname);
}
using this script I keep getting a [object HTMLInputElement] alert, the script is external and the script tag is in the header.
You should use DOM selectors alike document.getElementById('elementId').value.
Please read the resembling documentation about such browser APIs: https://developer.mozilla.org/en-US/docs/Web/API/document
Try add an ID to those fields, and use getElementById(). Example.
var val = document.getElementById('id_field').value;
document.getElementById('id_tag').innerHTML = val;
var clientName = document.getElementById('clientname').value;
alert(clientName);
if you already know the sequence no of the element that you want to address then only you can use the syntax you specified i.e. as follows:
document.forms[form_index].elements[form_element_index].value
form_index->the index of the particular form where the element is.
form_element_index->the index of the element in the particular form.
So you could use:
alert(document.forms[form_index].elements[0].value);
N.B.-form_index will be 0 only if the form you refer to is the first form in your document.
Otherwise
If you don't know either the sequence no of the form or the sequence no of the element in the form you should use the id attribute to refer to it(No need of any reference to the form where the element is) which is the usual approach and I personally suggest you to use this.
So in your code use the following:
alert(document.getElementById('clientname').value)
You should use document.getElementById('ID'), you can go to www.w3schools.com for more details.
I'm working on a website and was experiencing this problem, so I simplified it as much as possible.
index.html:
<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
<form id="myForm" onsubmit="log(this.id)">
<input name="id">
</form>
</body>
</html>
test.js:
function log(str){
console.log("str=" + str);
}
When I submit the form, I see this:
str=[object HTMLInputElement]
and when I change the value of name to anything but "id", I see the expected
str=myForm
I get the exact same behavior if I switch all instances of "name" and "id" in the code. In other words, it doesn't seem to be a particular limitation of either attribute, but something more general.
I'm running MAMP on OS X 10.8; experiencing problem in Firefox 22.0 and Chrome ver. 28.
Thanks in advance
The .id on form elements accesses form fields by their name. To get the ID attribute use this.getAttribute('id').
When you gave the input the name "id", log(this.id) translates to log(myForm.id) where id is a property of myForm, it is in fact the input child element. This is indicated by the [object HTMLInputElement] class name which appears.
When you name the input child control to something else this.id now refers to the forms id attribute.
The same logic applies when you switch "id" with "name" since you can refer to controls by either their name or id.
Well, that's because this.id is being interpreted as "the element with name id that belongs to the form", that's why you're receiving an [object HTMLInputElement] through the parameter. When there is no such input (i.e. when you name it differently), this.id is interpreted as the form id.
I run into a problem while using jQuery templates (http://api.jquery.com/category/plugins/templates/)
First: defined a template like this one:
<td>
<input type="text" value="${Text}" />
</td>
When it renders user types some text into it, but I don't know how to get what he types. All I receive is old "value" attribute value.
The code I use to get data back:
var enteredData = row.tmplItem();
var note = enteredData.data;
var data = {};
data.NoteId = note.NoteId;
data.NoteText = note.Text;
I'd be grateful for any help!
Thank you!
You should be able to use
$('input').val()
to get the entered value
(obviously it would be best to give the input an id so you don't call all inputs on the page!)
try this:
<td>
<input type="text" value="${Text}" id="text${id}"/>
</td>
and
$('#text'+ id).val() //if you want a specific one of more inputs
or just set a static id if you only have one....
I'm trying to take user form input and display it back to the user, among other things (all of which require the input being stored as a JS variable).
I'm trying to spit it out in an alert, as a quick feedback loop, and all I keep getting is [object HTMLInputElement]. I've tried to use document.forms[0] and document.getElementById (like below) and neither work. Also, I'm using bootstrap typeahead, could that be complicating this issue?
What am I missing?
Here's the code:
<div class="hero-unit">
<h1> Title </h1>
<p> This form description </p>
<form class="well" name="formInput" action= "#">
<label>Input</label>
<input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL"]"/>
</label>
<div class="form-actions" "span3">
<input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
<script language="JavaScript" type="Text/JavaScript">
var theInput = document.getElementById('txtvarInput');
</script>
</div>
</form>
</div>
<div class="page-header">
<h1>Input:
<script language="JavaScript" type="Text/JavaScript">
document.write(theInput.value);
</script>
</h1>
Edit: PART II, now the code works for the alert, but I need to use it elsewhere (like I said) and the variable isn't available in other sections of the html. Above, I'm just trying to get it to display that same value as a part of the html. It could be my JS, but this is pretty boilerplate stuff, so I think it's related to the location of the variable.
What do I need to do use it elsewhere? I've added the next div above to show what I'm trying.
--left an extra declaration of the variable in part II by accident, was one of the tests I was trying, removed now.
Right now, the object you're alerting is an HTML element, not a string. You can get its value using the value property:
alert('you chose ' + theInput.value)
(Note that you probably didn't mean:
var theInput = document.getElementById('txtvarInput').value;
As other answers suggest, because that would give you an empty string. It's only read once.)
You are trying to output the entire HTML-object that you have selected, not the value-property of it. Since alert() expect a string, JavaScript gives you the string representation of that object which is [object HTMLInputElement].
Try this instead:
var theInput = document.getElementById('txtvarInput').value;
var theInput = document.getElementById('txtvarInput');
should be
var theInput = document.getElementById('txtvarInput').value;
In the alert, use
theInput.value
You need to use the value property:
var theInput = document.getElementById('txtvarInput').value;
You forgot .value
Something like:
document.getElementById('txtvarInput').value
You are going to print the value of the input at the page load time. You will get an empty alert.
just do this!
<input name="submit" type="submit" class="btn" value="Select" onclick="alertVal()"/>
<script language="JavaScript" type="Text/JavaScript">
function alertVal(){
var theInput = document.getElementById('txtvarInput').value;
alert('you chose ' + theInput);
}
</script>