Inner.html in Internet Explorer

Dear Experts,

I'm creating an order form, where the user can add more addresses with a single click.
They can pick a recepients from a select list, and after they choosed one, the details of the selected recepients appear in a div.
The basic of my form looks like this:
<fieldset name="name[]" id="name">
<select name="select_name[]" id="select_name">
<option>...</option>
<div id="to_field" name="to_field[]"></div>
</fieldset>
(From this fieldset user can have as many as he wants, that's why I use arrays)

From this you can see, that the details must appear in the div called to_field.

I do the whole form with javascript, and to write texts into the div I use the following:
var fields = document.getElementsByName("to_field[]");
...
fields[i].innerHTML ='Content goes here';

It works fine in FF, Safari and Opera but not in IE 7. (I don't care IE6 anymore:) )

How could I repair this bug?

Thank you for your time!
peterjanosiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Andyc75Software ArchitectCommented:
Try using get getElementsByID instead of getElementsByName.
0
Andyc75Software ArchitectCommented:
There is a known bug with getElementsByName() in IE.

Sorry and that would be getElementById()
0
peterjanosiAuthor Commented:
Hi Andyc75!

Thanks for the fast reply. As I know getElementByID can be used for a single element. But I've got more with the same name (to_field[]), that's why I choosed getElementsByName, cause it returns an array. Or is there any method to use "ByID" with arrays?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Andyc75Software ArchitectCommented:
Here is a partial IE Fix I found.

http://www.dreamincode.net/code/snippet293.htm

function getElementsByName_iefix(tag, name) {
     
     var elem = document.getElementsByTagName(tag);
     var arr = new Array();
     for(i = 0,iarr = 0; i < elem.length; i++) {
          att = elem[i].getAttribute("name");
          if(att == name) {
               arr[iarr] = elem[i];
               iarr++;
          }
     }
     return arr;
}

Open in new window

0
peterjanosiAuthor Commented:
It seems, javascript hates me....
I played with the code, but it doesn't want to work.
I attach my code, maybe it's useful.

:(
function SelectDetails()
{
    var addresses = document.getElementsByName("to_address[]"); //counts the number of select lists on the page
    for(i=0;i<addresses.length;i++)
    {
        var fields = document.getElementsByName("to_field[]"); // the div for the content of inner.HTML
        if(addresses[i].value!='self|<? echo $_SESSION['id']; ?>')
        {
            <?php
            $company=mysql_query("SELECT DISTINCT(company_id) FROM table");
            while($c=mysql_fetch_array($company))
            {
                echo "if(addresses[i].value == '".$c['company_id']."'){";
                $company_details=mysql_query("SELECT * FROM table WHERE company_id='".$c['company_id']."'");
                while($details=mysql_fetch_array($company_details))
                {
                    echo "fields[i].innerHTML ='content goes here'";
                }
                echo "}";
            }
            ?>
        }
    }
}

Open in new window

0
Andyc75Software ArchitectCommented:
Ok, if your not opposed to using jquery, this solution will work for you in all browsers.

jquery is great, learn to love it :)  There is a great tutorial on w3schools
http://www.w3schools.com/jquery/default.asp

I just put a class on your to_field's called "to_field".  The jquery selector in this example says Select all Div's with a class = "to_field". and it replaces the innerHtml of the div with the text in the text box.

should be pretty easy to integrate into your code:  This is the key line: $('div.to_field').html(myNewText);

also your code was missing the closing </select> on your drop downs... don't forget those :)


<html>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
	   $(document).ready(function(){
			$('#load_text_button').click(function(){
			        var myNewText = $('#load_text').val();
					$('div.to_field').html(myNewText);
			});
	   });
  </script>
<head>

</head>
<body>
<fieldset name="name[]" id="name">
<select name="select_name[]" id="select_name">
<option>...</option>
</select>
<div id="to_field" class="to_field" name="to_field[]"></div>
</fieldset>
<div></div>
<fieldset name="name[]" id="name">
<select name="select_name[]" id="select_name">
<option>...</option>
</select>
<div id="to_field" class="to_field" name="to_field[]"></div>
</fieldset>

<form>
<input type="text" id='load_text' value="Some Text to Load"></input>
<input id="load_text_button" type="button" value="load text"></input>
</form

</body>
</html>

Open in new window

0
peterjanosiAuthor Commented:
Sorry for the late answer, I wasn't online in the last days.

I played with your code and it really seems okay. My - hopefully - last question is about the arrays. As I wrote I populate the fieldsets dynamically and into the div field I put different contents in every fieldset. In your code it puts the text into every to_field. But how can I force it to put into the desired div?

:)

Thank you for your time.
0
Andyc75Software ArchitectCommented:
Ok Give this a try.

This uses the jquery selector eq(), which you use to specify the index of the item you want to change.

Just change the index in the drop down to choose which one you want to  change.



<html>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
	   $(document).ready(function(){
			$('#load_text_button').click(function(){
					var toIndex = $('#load_text_index').val();
			        var myNewText = $('#load_text').val();
					$('div.to_field::eq(' + (toIndex - 1) + ')').html(myNewText);
			});
	   });
  </script>
<head>

</head>
<body>
<fieldset name="name[]" id="name">
<select name="select_name[]" id="select_name">
<option>...</option>
</select>
<div id="to_field" class="to_field" name="to_field[]"></div>
</fieldset>
<div></div>
<fieldset name="name[]" id="name">
<select name="select_name[]" id="select_name">
<option>...</option>
</select>
<div id="to_field" class="to_field" name="to_field[]"></div>
</fieldset>
<fieldset name="name[]" id="name">
<select name="select_name[]" id="select_name">
<option>...</option>
</select>
<div id="to_field" class="to_field" name="to_field[]"></div>
</fieldset>

<form>
Choose Index;
<select id='load_text_index'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input type="text" id='load_text' value="Some Text to Load"></input>
<input id="load_text_button" type="button" value="load text"></input>
</form

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
peterjanosiAuthor Commented:
Andyc75, thank you very very much for your help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.