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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Andyc75Connect With a Mentor Commented:
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
 
Andyc75Commented:
Try using get getElementsByID instead of getElementsByName.
0
 
Andyc75Commented:
There is a known bug with getElementsByName() in IE.

Sorry and that would be getElementById()
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
Andyc75Commented:
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
 
Andyc75Commented:
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
 
peterjanosiAuthor Commented:
Andyc75, thank you very very much for your help!
0
All Courses

From novice to tech pro — start learning today.