I was following the code found in here to create a secure login page. The trouble is, it can't create the hidden input element.
function formhash(form, password) {
// Create a new element input, this will be out hashed password field.
var p = document.createElement("input");
// Add the new element to our form.
form.appendChild(p);
p.name = "p";
p.type = "hidden"
p.value = hex_sha512(password.value);
// Make sure the plaintext password doesn't get sent.
password.value = "";
// Finally submit the form.
form.submit();
}
I have read through saying that it only works for IE and not for gecko. Is this true or I just missing something?
Update:
The formhash function works when I place the javascript into the login page. When it is move to an external file, the problem starts again.
#asprin Noted. The reason I place php is because the code was based on php implementation
#Henrik Will do that. Thanks
#RenePot Yup, it was called on the process_login.php page
#MarkGarcia Thanks for the suggestion. Notice it say's that the function wasn't declare
#WernerVesterås Not sure but I think after.
#Quentin Thanks for the suggestion. Will do that :D
Likely, form is simply not set to what you think it is, a jsfiddle.net would probably help us and you debug. I set a working version up at http://jsfiddle.net/JPTyj/ Comment out hidden to actually see it work. Note that you will not the the hidden input field in "view source" in the browser as it is dynamically added to the dom! Use firebug or the chrome dev tools to see it.
Also, most likely you will want to use a library to make it easier for you to develop platform independent code instead of writing bare javascript.
In IE8 (at least), you need to set the type attribute before appending it using setAttribute():
var p = document.createElement("input");
p.setAttribute("type", "hidden");
form.appendChild(p);
http://jsfiddle.net/BePGD/ Tested in IE7, IE8, Chrome.
Related
Im trying to write a small js script that will let a user input a string of text and then output it wrapped in some html to the page.
I know how to do this with php, but it seems a little bit of an overkill for such a simple action, plus im always keen to learn something new.
I was playing around using document.myform.submit(); but i wasnt sure how to submit the form value to a variable and then output that var to the screen using document.write();
Any ideas how i would do this ?
Ive created a jsfiddle of the problem here - http://jsfiddle.net/pudle/axcLz/
There are many ways to do it. Here is the code that shows one of them:
document.getElementById("myform").onsubmit = function (event) {
var link = document.getElementById("mylink");
var textField = document.getElementById("text");
link.href = textField.value;
textNode = document.createTextNode(textField.value);
if (link.hasChildNodes()) {
link.removeChild(link.lastChild);
}
link.appendChild(textNode);
event.preventDefault();
};
jsfiddle: http://jsfiddle.net/TMJGH/5/
I added an id attribute to the a element to make things easier.
First line says that we want to change the function that handles "onsubmit" event in our form and then we define that function. The "event" argument is used only to call .preventDefault() in the last line which basically means that we don't want the form to be actually submitted.
We need to get access to DOM elements in the javascript code, so I used document.getElementById. Then I set the href attribute to the value of the textField. To change the actual link text I created a new text node with the value of the textField (it is possible to use textNode.innerHTML but that won't escape HTML code if someone inserts it in the text field). Then I check if our a element already has some text in it - if yes, it has to be removed. Finally I append the text element as a new child to our a element.
If you want to append more HTML nodes inside a node you can easily create them with document.createElement('element name') and append them to link. I also have to mention that jQuery makes playing with DOM a lot easier.
I'm looking over some pretty extensive code for a web page that is generated from XML/XSL and then has Javascript generate the layout on the fly. What I am having troubles with is that it seems IE (v.10 specifically) is showing that elements are Empty Text Nodes if there is no value, and then regular text (no editable field) if there is a value.
This seems to change the behavior of to be just straight un-editable text.
From what I can see, the first step is for the Javascript to generate elements via the DOM
input = document.createElement("input");
input.setAttribute("id", "blah");
input.setAttribute("type", "text");
Then it will append it to the parent.
Then what seems to happen is that a function is executed that runs through the page again and inserts any values that these fields have.
input.value = "Hello World";
Chrome and Firefox will display the input fields properly with their fields populated, but IE10 will only show the value as if it was just plain text.
I've never worked with this sort of web page generation and hoping someone might be able to help me figure this out so I can troubleshoot this. Changing the way this works (at the time) is not an option so I'm trying to correct it so that IE is happy too.
Thanks
This specific code sequence works in all browsers I've tried it in (Chrome, IE, Firefox):
var elem = document.createElement("input");
elem.type = "text";
elem.id = "test";
document.body.appendChild(elem);
elem.value = "This is some text";
If your exact code is deviating from this, then you should examine the differences or post your exact sequence of code that demonstrates the problem in IE so we have a better idea how to debug or advise.
You can see a working demo of this in any browser you want to try it in here: http://jsfiddle.net/jfriend00/z2FpP/
Things to watch out for in your code:
Is any code setting .innerHTML of a parent which could be wiping out or resetting the child elements.
Is any code setting .innerHTML of the input field itself. This should not be done. Code should use .value to set the text of the input field.
Are there any code errors when the code runs in IE? Check the error console or debug console (hit F12 in IE to get to the debugger where you can see the error console).
Are there any other attributes being set in the input field that might make it read-only instead of editable?
I have a function that is called whenever a select changes. If the select had an ID of "foo" there'd be a text field with an ID of "foo_other" after it that by default is styled "display:none".
If a value of "Other" is picked from the select, the function is supposed to display the text field, and set focus to it. If anything other than "Other" is chosen, it should hide the field and remove anything entered.
Works in FF, IE throws an error "Object required". I was trying to avoid doing an eval() around the dynamic variable... Any help is appreciated.
Code:
function checkOther(inObj){
var other_form_id = inObj.name + "_other";
if(inObj.value == 'Other')
{
document.getElementById(other_form_id).style.display = 'inline';
document.getElementById(other_form_id).focus();
}
else
{
document.getElementById(other_form_id).style.display = 'none';
document.getElementById(other_form_id).value = '';
}
}
My guess is you are having multiple IDs in one document (which is invalid), and IE is more picky about it than FF is. Could that be?
The stupid idiots from microsoft are getting the first id OR NAME.
I have a dynamically generated javascript and name and id of one html element (input) are different. But instead getting the element with specified ID, the idiots of IE8 are getting the first element with that NAME.
I believed they are idiots even i was working 15+ years as windows (visual studio) developer, but i didn't expect such a stupidness ...
Even later,
Hope this will help someone else, not the author of the post.
My solution was to add "id_" prefix for the id tag in order to be sure that the idiots are going to get exactly the normal one, nad not another with with the same name. In my case i'm using id tag for javascript things and the name tag for saving to the DB when the form is sent.
I'm trying to dynamically add some textboxes (input type=text) to a page in javascript and prefill them. The textboxes are coming up, but they are coming up empty. What is the proper way to pre-fill a textbox. Ideally I'd love to use the trick of creating a child div, setting the innerhtml property, and then adding that div to the parent main div but that didn't work. Then I thought I'd use the dom but setting textboxname.value before or after insertion won't work and doing txttextbox.setattribute('value','somevalue') won't work either. Works fine in firefox. What gives? This has to be possible? Here is my code. I know I'm only using string literals, but these will be replaced with the results of a web service call eventually. Below is some code. Oh and how do you format code to show up as you type it? I thought it said to indent four spaces, and I did that but the code is still on one line. Sorry about that.
var table=document.createElement('table');
var tbody=document.createElement('tbody');
var row=document.createElement('tr');
row.appendChild(document.createElement('td').appendChild(document.createTextNode('E-mail')));
var txtEmail=document.createElement('input');
row.appendChild(document.createElement('td').appendChild(txtEmail));
tbody.appendChild(row);
table.appendChild(tbody);
//document.getElementById('additionalEmails').innerHTML="";
document.getElementById('additionalEmails').appendChild(table);
txtEmail.value = 'my text'
Does not work?
You can also use Prototype to do this easily:
document.body.insert(new Element("input", { type: "text", size:20, value:'hello world' }))
I've encountered problems similar to this in the past, and while my memory is a bit fuzzy on why it was happening exactly, I think you may need to make sure the element is actually added to the DOM before modifying its value. e.g:
var txtEmail=document.createElement('input');
document.getElementById('someElementThatAlreadyExists').appendChild(txtEmail);
txtEmail.value = 'sample text';
I ended up solving this problem by injecting the html directly into a page via a child div. That did work, it's just that I am blind and the software I use to read the screen for some stupid reason failed to see the text in the textbox. Go figure. Thanks for the tip on prototype though, if I ever decide not to cheat and add the eleements to the dom directly, I'll do it that way.
I am trying to make a div, that when you click it turns into an input box, and focuses it. I am using prototype to achieve this. This works in both Chrome and Firefox, but not in IE. IE refuses to focus the newly added input field, even if I set a 1 second timeout.
Basically the code works like this:
var viewElement = new Element("div").update("text");
var editElement = new Element("input", {"type":"text"});
root.update(viewElement);
// pseudo shortcut for the sake of information:
viewElementOnClick = function(event) {
root.update(editElement);
editElement.focus();
}
The above example is a shortened version of the actual code, the actual code works fine except the focus bit in IE.
Are there limitations on the focus function in IE? Do I need to place the input in a form?
My guess is that IE hasn't updated the DOM yet when you make the call to focus(). Sometimes browsers will wait until a script has finished executing before updating the DOM.
I would try doing the update, then doing
setTimeout("setFocus", 0);
function setFocus()
{
editElement.focus();
}
Your other option would be to have both items present in the DOM at all times and just swap the style.display on them depending on what you need hidden/shown at a given time.
What version IE? What's your DocType set to? is it strict, standards or quirks mode? Any javascript errors appearing (check the status bar bottom left for a little yellow warning sign) ? Enable error announcing for all errors via Tools > Options > Advanced.
Oisin
The question is already answered by 17 of 26. I just want to point out, that Prototype has native mechanism for this: Function.defer()