Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

weird ie problem 1

Status
Not open for further replies.
MalCarne

MalCarne

Technical User
Apr 1, 2005
70
US
I am adding a button to a form, and having really weird problems in IE 7.

This code:
Code: 
var locker = document.createElement("input");
                 swatch.appendChild(locker);
                 locker.setAttribute("type","submit");
                 locker.innerHTML="Add To My Locker";
                 locker.setAttribute("class","btn");
                 locker.setAttribute("id","btnSubmit");
                 locker.setAttribute("onClick","return setItem()");
                 locker = swatch.appendChild(locker);

Renders a textbox ????? While it renders a button that works fine in firefox.

While this code
Code: 
var locker = document.createElement("button");
                 swatch.appendChild(locker);
                 //locker.setAttribute("type","submit");
                 locker.innerHTML="Add To My Locker";
                 locker.setAttribute("class","btn");
                 locker.setAttribute("id","btnSubmit");
                 locker.setAttribute("onClick","return setItem()");
                 locker = swatch.appendChild(locker);

Renders a button in both IE and firefox, but the onclick event is not firing in IE. (tried both "onclick" and "onClick".

Has anyone run across this? I'm at a loss with a deadline tomorrow, if anyone can help, it's sure appreciated.

Thanks.
 
Sort by date Sort by votes
Try this:

Code: 
var locker = document.createElement("input");
                 locker.setAttribute("type","submit");
                 locker.innerHTML="Add To My Locker";
                 locker.setAttribute("class","btn");
                 locker.setAttribute("id","btnSubmit");
                 locker.setAttribute("onClick","return setItem()");
                 swatch.appendChild(locker);

Don't add the input until after you define all the attributes, and don't add it twice with this strange code
Code: 
locker = swatch.appendChild(locker);



[monkey][snake] <.
 
Upvote 0 Downvote
Thanks monksnake. I'm quite new at this, and I could swear that I read somewhere in the last week that when adding elements to a form you had to 1) create the element 2) bind it to the form 3) set the attributes and then 4) bind everything to the form after the attributes are set. It seems kinda strange, but I took it at face value.

I tried your code and found that IE hates the innerHTML tag (errors on load) but "locker.value = sometext" will add the label to the button. For some reason the class isn't being recognized by my css (works with all other instances of the class). Those two are minor, as the onClick event is being ignored and the form is just submitting.
The function called by onClick does form validation and sets the action of the form before submitting. Any ideas on why only IE would be ignoring that?
 
Upvote 0 Downvote
Just an update, IE won't respond to ANYTHING that I've tried for an onClick, even just a simple alert.

Again, it all works fine in IE. I'm wondering if this is not getting bound to the form properly?
 
Upvote 0 Downvote
I was hasty on my reply yesterday.

Yeah, the innerHTML will work after you append it to the rest of the document, wasn't 100% before. You could also create a text node and append that to the button.

You can do what feherke did for the onclick, or you can add the button, then set the onclick:

button.onclick = function() {return setItem()};

I'll write up a small example that does everything, I need the practice anyway [smile]




[monkey][snake] <.
 
Upvote 0 Downvote
I've tried that both before the appendChild and after. Both result in "Object does not support this property or method".
Again, only in IE.
 
Upvote 0 Downvote
Sorry, monksnake posted while I was. By "that" in my above post I was referring to the addEventListener
 
Upvote 0 Downvote
Thanks all. The onclick=function works in both browsers.
 
Upvote 0 Downvote
Ok I wrote an example from scratch, you can see how it works:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
</head>
<script type="text/javascript">
function createButton() {
   var swatch = document.getElementById("thisForm");
   var locker = document.createElement("input");
     locker.setAttribute("type","submit");
     locker.setAttribute("value", "Add To My Locker");
     locker.setAttribute("class","btn");
     locker.setAttribute("id","btnSubmit");
     swatch.appendChild(locker);
     locker.onclick = function(){alert("hey");};
}

</script>
<style type="text/css">
input.btn {
   width:400px;
}
</style>

<body>
<form id="thisForm" method="post" action="">
<input type="button" onclick="createButton()" value="Add Button" />
</form>

</body>
</html>


[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
224
amrmnabil
amrmnabil
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
174
bs6600
bs6600
Disskyz
  • Locked
  • Question
New to JavaScript, Having a problem with an array
Replies
2
Views
186
Disskyz
Disskyz
bs6600
  • Locked
  • Question
Accordion - Anchors in panels causing problems 1
Replies
6
Views
238
feherke
feherke
Michael Davis
  • Locked
  • Question
Robert.Husted Calendar Script Problem?
Replies
2
Views
150
Michael Davis
Michael Davis

Part and Inventory Search

Sponsor

Back
Top