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.
Related
I created a link https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137 To fill the input field CNPJ.
This is fine. However, I need to run the function preencheParametros('CNPJ') together above link.
So, I tried something like this https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')
And not worked. How handle this?
First Way: Not Worked
GET method
<form method="post" action="https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" name="nForm" id="nForm">
<div class="CInput" id="CCnpj">
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
</div>
</form>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137
Second Way: Not Worked
Read GET method in JS
Input values:
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
<input type="button" value="Get Input Values" id="retrieveInputValuesButton" />
<script>
var cnpj = document.getElementById("lCnpj");
var element = document.getElementById("retrieveInputValuesButton");
element.onclick = function() {
window.open("https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" + cnpj.value + "&exec=preencheParametros('CNPJ')");
};
</script>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')
I'm sorry, but there is no way to pass in executable instructions to a website like that (unless they specifically provide you a way to do so). That would be a huge security risk if anyone could just inject code.
You could however try cooking something up with a Greasemonkey script.
It's called Greasemonkey for Firefox, or Tapermonkey for Chrome
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);
}
I have this error but I can't see how to fix it. I've used JSLint with some results (it just tells me document isn't a global value, or the 'else clause' was not needed, etc) but no solution.
I have a form to be submitted and I need to compare that both email fields are equal. So I want a nice simple email1 == email2 script, jQuery isn't my strongest point, but I came up with this:
My form ID is "regIn", my email fields are type="email" (HTML5) and id="MailA" and id="MailB" respectively.
I have preloaded jquery 1.11.1.min.js
My jQuery code (see below why the #forgotten is still in there):
$(document).ready(function() {
$('#forgotten').click(function() {
$('#passbox').toggle(360);
return false;
});
$('#regIn').submit(function() {
// * referenced; but this isn't in the code: alert('alert1');
if ($('#MailA').val() === $('#MailB').val()) {
return true;
}
$('#errorMsg').innerHTML("Emails need to be the same!");
alert('Hello');
return false;
});
});
So - I use Alerts to see how far the script gets (i know, tacky debugging). firebug doesn't report page errors or script errors that I can see. The "alert 1" always fires on form submission, and successfully shows me the values of #MailA.val() and #MailB.val(),
But the if statement doesn't seem to fire at all. I have tried making the values variables (var d1 = $('#MailA').val() etc. ) but that doesn't change anything, the form always submits and neither the if or the else (which did surround the text below the if statement clause but JSLint said it wasn't needed so I removed it).
I have also used variations of syntax, using != and == but was also reading from JSLint that === and !== are preferred.
My HTML:
<form enctype="multipart/form-data" name="regIn" id="regIn" autocomplete="off" accept-charset="utf-8" action="#" method="post">
<div class="inputContainer">
<input type="email" value="" tabindex="31" id="MailA" name="regMailA" required>
</div>
<div id="errorMsg"></div>
<div class="inputContainer">
<input type="email" value="" id="MailB" tabindex="32" name="regMailB" required>
</div>
<div class="registerRow">
<input type="submit" class="regButton" value="Register" tabindex="34">
</div>
</form>
As I said, I've looked around for the last hour or so and I just can't see what it is.
Obviously the code is stripped down for the question, the only other aspect is that there is another piece of jQuery in the document ready function - as shown the #forgotten appears for showing / hiding an info. box, this works fine.
please note that you are using:
$('#errorMsg').innerHTML("Emails need to be the same!");
if you try to alert $('#errorMsg').innerHTML it will be undefined.
When you using JQuery selectors $('#errorMsg') JQuery will wrap the dom object with JQuery dom object that own JQuery special methods(val, html, etc), so you don't have access to the core method innerHTML, instead you should use:
$('#errorMsg').html("Emails need to be the same!");
Enjoy!
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.
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;