Consider the following example:
<form action="process.php" id="myForm">
.....
....... all my form elements
</form>
I first accessed my form elements this way:
function verifyForm() {
var frm_elements = myForm.elements;
//do something here
}
The above code worked well with the latest versions of Chrome and Internet explorer. However it always failed with Firefox. FF complained about the error : "Could not find the id myForm"
To get this working I replaced myForm.elements with document.getElementById('myForm').elements. It worked fine all the three browsers I tested.
I am just curious to know why did it fail on FF? Did I do anything wrong ?
modify this
<form action="process.php" id="myForm">
to this
<form action="process.php" name="myForm">
Because the DOM forms collection works off of name, therefore to access using the form name you need to add the name attribute to the tag. Which will allow the following statements to work.
document.forms["myform"]
document.forms.myform
document.myform
Here is some reference http://www.quirksmode.org/js/forms.html
Apparently Chrome and IE bind forms to document. This is not standard AFAIK.
> foo = 1
> window.foo
1
getElementById is the right way to go. Although document.forms.myForm also works for me.
Related
My head is about to explode. I can't get this to work the way i want, and i can't seem to find out what's wrong with it.
I have a form which i need to process with AJAX.
But before i do that, i want to save it in window.sessionStorage.
The functionality has to work cross-device, and i'm having trouble with iOS.
There's alot of questions around stackoverflow and google concerning this, with various fixes. But none of them seem to work for me.
I have this form:
<form role="form" id="searchForm" data-method="search" action="" onsubmit="return doStuff('search')" data-ajax="false">
<div class="form-group">
<input type="search" id="search" name="s" class="form-control" placeholder="Search...">
<span class="help-block"><small>Search by partnumber, suppler or free text</small></span>
</div>
<button type="submit" data-ajax="false" class="btn btn-block btn-warning">Search</button>
</form>
Now, when the form is submitted, it runs through a function at about 200 lines, i've narrowed it down to where the code breaks.
Right here:
sessionStorage.last = search;
return false;
I
've gone from localStorage to sessionStorage in hope that, that might solve the problem, it didn't
I've tried the "right" way to set the variables with this sessionStorage.setItem('last', 'search')
But to no help.
The form is still being submitted regardless of what i do.
If i return false; BEFORE the sessionStorage it works fine, and stops the form.
It works fine on desktops and android, but it fails misserably on iOS devices
Debugging i've tried:
console.log(sessionStorage.last) returns null
console.log(typeof sessionStorage) returns object
console.log(sessionStorage.last = 'foo') returns foo
If you need more code / need me to try anything, please tell me!
According to Apple's docs, it should work:
https://developer.apple.com/library/safari/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html
I've used localStorage without any issues, but not sessionStorage (though the docs say it should be interchangeable). You could try a try-catch block, so that the code doesn't crash, and you can get some clues. Apple mentions it could throw a QUOTA_EXCEEDED_ERR exception.
try {
sessionStorage.setItem("last", search);
} catch (e) {
alert("error: " + e);
}
Safari is removing the first instance of the beginning and end form tags from the DOM from a backbone.js app. The innerHTML is unaffected! Firefox has no issues at all with my code and performs perfectly. The code is inserted into the DOM from a script/template file using underscore.
<form id="i-get-removed" action="#">
<div>This content here does not get removed no matter what!!!</div>
</form>
<form id="I-do-not-get-removed-but-I-would-if-the-above-form-was-not-there" action="#">
.
</form>
Here's what the safari web inspector shows after the container is rendered:
<div>This content here does not get removed no matter what!!!</div>
<form id="I-do-not-get-removed-but-I-would-if-the-above-form-was-not-there" action="#">
.
</form>
I'm absolutely beside myself with this - I couldn't imagine a way to make this happen if I wanted to. I would greatly appreciate any insight into this insanity!
A form nested within a form will cause this behavior in Safari.
I have forms with submit buttons that use javascript. The code looks following:
<form action="settings.php" method="post" id="myform" class="forms">
...some form fields here
<button type="submit" name="submit_ok" value="Save" onClick="document.myform.submit();">Save</button>
However, IE 10 (Win7 x64) displays this error when trying to submit form:
"Unable to get property submit of undefined or null reference"
All other browsers don't display any errors. If I click Yes when IE asks if I want to continue running scripts on this page, everything works well, but I need to remove this error badly.
All form controls (such as buttons, inputs, etc) have a property form that references the parent <form> element. You can therefore use
this.form.submit();
Why even bother doing it this way? Your submit button's default action will submit the form.
IE is probably looking for an element by name when traversing the document object. Your form has no name attribute.
I'm having trouble not being too familiar with how to debug such problems. In my HTML lets say I have a form:
<form name="myForm" >
<table>
<tr>
<td>
<input type="radio" name="myType" value="val" onclick="someFunc(this.value)"checked > stuff here
<input type="radio" name="myType" value="val2" onclick="someFunc(this.value)"> stuff2 here
</td>
..
</form>
In Javascript code, I am referencing this by:
myForm.myType[0].checked
In IE this works fine, but not in Firefox. In Firefox I tried:
alert (myForm)
and also:
if (frmDateType == null)
{
alert('null!');
}
else
{
alert('not null!');
}
However, in both these cases Firefox doesn't even display an alert, it is basically doing nothing though it is fine in IE. I have installed Firebug and it doesn't show any errors (or at least I can't find them). So I'm not sure how to debug such an issue, why I don't see any errors and why Firefox doesn't like MyForm? Any tips?
You are assuming that anything with a name attribute will get a global variable that matches. This is non-standard behaviour.
You shouldn't be giving forms name attributes anyway, see the specification:
Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.
So, first replace the name attribute with an id.
<form id="myForm">
And then you can access the form via:
document.getElementById('myForm')
or
document.forms.myForm
I'm not sure as to why your Firefox is not displaying any alert; but you should check the Firefox Error Console. Simply click in your address bar and press the Alt key on your keyboard to highlight the system menu; under Tools -> Web Developer -> Web Console you will be able to see all JavaScript, HTML and CSS errors encountered on the page at load time..
--
Please make sure you are referencing the form currectly in JavaScript:
myForm = document.getElementById("myForm"); // This requires the form to have an id.
Alternatively, you can reference the form using its name (not always works!)
myForm = document.forms.myForm;
Ok, I am developing a simple program to do xmlhttprequests so I can get a handle on how they work. On that page I have a simple text box, a label, and a button. When the button is clicked it sends out a request to another page via the javascript method, and it stores the response in the label.
(this is all the code in the body)
<form id="form1" runat="server">
<div>
<input type="text" id="text1" value="StuffInTheBox" name="text1"/>
<label id="label1">Please Enter Name.</label>
</div>
</form>
<button id="button1" onclick="checkName(text1.value,'')">BUTTON</button>
This works perfectly in google chrome. But when it came time to try it out in IE7 it gave me an error. It said "Error: 'text1' is undefined". I've been trying to tweak everything I can to see if it makes a difference but now I'm kind of lost.
Any help would be much appreciated
edit: checkname function per request
The method calls loadXMLDoc which creates the xmlhttprequest object, forking the construction for older IE who use ActiveX and modern browers who have it native. It also creates a method to watch the status change, and if it is done successfully it recalls checkname with checkName('',results)
function checkName(input, response)
{
if (response != ''){
// Response mode
message = document.getElementById('label1');
message.innerHTML = response;
}else{
// Input mode
loadXMLDoc("http://localhost/xmlTest/Return.aspx","input="+input);
}
}
In your JavaScript "checkName(text1.value,'')" it is unclear what text1.value is referencing. You're assuming it's referencing the DOM Object you've declared in your HTML and FireFox seems to make that assertion as well however IE doesn't. text1 could have easily been a reference to an object declared earlier in your JavaScript code.
var text1 = {value: ""};
Frankly I'm surprised that FireFox didn't throw an error.
When referring to DOM objects (i.e. HTML elements) you need to use the document.getElementById or document.getElementsByName methods.
The following example was tested and works in both FireFox and IE and I would assume to work in Chrome, Safari and Opera as well.
<form id="form1" runat="server">
<div>
<input type="text" id="text1" value="StuffInTheBox" name="text1"/>
<label id="label1">Please Enter Name.</label>
</div>
</form>
<button id="button1" onclick="checkName(document.getElementById('text1').value,'')">BUTTON</button>
"text1" is the id of the input, but you haven't declared that the text1 variable in the JavaScript refers to that.
Perhaps this will work for you:
<button id="button1" onclick="checkName(document.getElementById('text1').value,'')">BUTTON</button>
It uses document.getElementById to retrieve the input before trying to find its value.