Select dropdown to change value in another dropdown/text field

[rincewind456]

Just replace the javascript codeDisplay() function with this one

function codeDisplay(){
    if(para=='p'){
        para.removeChild(txt);
    }
    var code = 'Country Code is: ';
    code = code + document.getElementById("country").value;
    var para = document.createElement("p");
    var phoneDiv = document.getElementById("phoneDisplay");
    removeChildNodes(phoneDiv);
    phoneDiv.appendChild(para);
    var txt = document.createTextNode(code);
    para.appendChild(txt);
    para.appendChild(document.createElement('br'));
    para.appendChild(document.createElement('br'));
    var faxDiv = document.getElementById("faxDisplay");
    removeChildNodes(faxDiv);
    faxDiv.appendChild(para);
    var txt = document.createTextNode(code);
    para.appendChild(txt);

}

[NetRoam]

Well - it actually just puts in a few breaks between the two values and doesn't really take into consideration how I set up my <table>

But if that's the only solution there is, I guess I just have to find another way to set up the Phone and Fax text fields and such, so the form will both look good and have the right functionality that it requires.

Thanks anyway - both of you - it has helped a lot!

[rincewind456]

Without checking too deeply, but the way I set it up in the first place was so that you had a div that could be placed anywhere you wanted in the page, I haven't got time today to check if the latest version does the same but in theory it should.

So you could place phone div in one table cell and fax div in another, as I said I'm no Javascript expert, but I'm fairly sure that if you want to play around with the script you could have the value appear in a td cell as long as it is named correctly.

[johanafm]

The problem is that the same p element is inserted in two different places

// first time
phoneDiv.appendChild(para);

// para = document.createElement('p') here should solve this

var txt = document.createTextNode(code);
para.appendChild(txt);
para.appendChild(document.createElement('br'));
para.appendChild(document.createElement('br'));
var faxDiv = document.getElementById("faxDisplay");
removeChildNodes(faxDiv);

// second time, using the same element.
faxDiv.appendChild(para);

As for where in your page the info appears is entirely up to you. If you get a td node and use appendChild on it, that td node will get the content. And wether you wrap the fax or phone info in a p element or not doesn't matter. You could just

var d = document;
var td = d.getElementById('some_td');	// or some other way of finding a td...

td.appendChild(d.createTextNode(code));

[rincewind456]

The problem is that the same p element is inserted in two different places

Why is that a problem when he wants the same data to appear in two places?

[NetRoam]

I must say that I really appreciate the effort the both of you put into this. I really do.

Yesterday afternoon I got to talking with my best friend who happens to be a really good programmer, and I slipped the issue to him hoping he might know how to solve the problem. He gave me this short javascript code:

<script type="text/javascript"> 
function codeDisplay(which) {
    document.getElementById('phoneDisplay').innerHTML = document.getElementById('faxDisplay').innerHTML = which.value;
}
</script>

In the select I then made an - onchange="codeDisplay(this)"

phoneDisplay and faxDisplay was then just inserted in the <td> like this:

<td id="phoneDisplay">
<td id="faxDisplay">

That works perfect and just how I want it to work. I just thought you'd all like to know that.

Thank you again for your efforts! I really appreciate it.

[johanafm]

rincewind456;10930267 wrote:

Why is that a problem when he wants the same data to appear in two places?

I thought he wanted phone in one place and fax in the other. But it's still a problem since a node will only exist in one place. Before appending the paragraph a second time yYou'd need

var para2 = para.cloneNode(true);
faxDiv.appendChild(para2);

As for innerHTML, I generally stay as far away from it as possible. It doesn't work for a lot of things.

[rincewind456]

johanafm;10930308 wrote:

I thought he wanted phone in one place and fax in the other. But it's still a problem since a node will only exist in one place. Before appending the paragraph a second time yYou'd need

var para2 = para.cloneNode(true);
faxDiv.appendChild(para2);

Sorry but that's incorrect as the code I gave did write to two different places, it may not be the right way, and if that's what you had said I wouldn't dispute it, but it does work.

As for innerHTML, I generally stay as far away from it as possible. It doesn't work for a lot of things

I agree with you here as by using innerhtml, which is not supported by all browsers, you risk cutting off a good proportion of the browsers out there. I think the OP should think twice about doing that.

[johanafm]

What I mean is that

div.appendChild(p);		// put p inside div
otherDiv.appendChild(p)		// remove p from div. put p inside otherDiv

I don't know how IE versions behave, but I do know this is the effect in FF 3.5 and Safari 4.

While this puts stuff in both divs

div.appendChild(p);		// put p inside div
p = p.cloneNode(true);
otherDiv.appendChild(p)		// put a clone of p inside otherDiv

[rincewind456]

Well all I can test in is Opera, Galeon and FF on Linux and it works as described in all three.

[johanafm]

Hmm, gonna have to check that in FF and IE under windows as well.

[rincewind456]

Ok I fired up the VM and in winblows it works on: Opera 10 IE 6 (yes don't laugh but it's the only one I have I haven't used IE since 5), FF3.5 and Chrome 3.

So of the 7 browsers I've checked it on they all work.

[johanafm]

Are we really executing the same code?

I've tried it in FF3.5 and Safari 4 on OSX and FF3.5 and IE8 on XP. Same results in all browsers.

function doit() {
	var d = document;
	var top = d.getElementById('top');
	var bot = d.getElementById('bot');

var p = d.createElement('p');
p.appendChild(d.createTextNode('hmm?'));

top.appendChild(p);
//	var p = p.cloneNode(true);		// comment/uncomment this line to see the diff
	bot.appendChild(p);
}
</script>
</head>
<body onload="doit();">

<div id="top">
Top<br/>
</div>
<hr/>
<div id="bot">
Bottom<br/>
</div>

Result

Top
-------------------------
Bottom
hmm?

Uncommenting the line with cloneNode gives

Top
hmm?
-------------------------
Bottom
hmm?

[rincewind456]

Are we really executing the same code?

Simple answer is NO!

Where did that code come from it's nothing like the code I submitted. Which was:

<script type="text/javascript">
// Funtion to create text display area
function codeDisplay(){
    if(para=='p'){
        para.removeChild(txt);
    }
    var code = 'Country Code is: ';
    code = code + document.getElementById("country").value;
    var para = document.createElement("p");
    var phoneDiv = document.getElementById("phoneDisplay");
    removeChildNodes(phoneDiv);
    phoneDiv.appendChild(para);
    var txt = document.createTextNode(code);
    para.appendChild(txt);
    var faxDiv = document.getElementById("faxDisplay");
    removeChildNodes(faxDiv);
    faxDiv.appendChild(para);
    var txt = document.createTextNode(code);
    para.appendChild(txt);

}
// Function to remove text area, needed or codeDisplay() will just append more areas until page is refreshed
function removeChildNodes(ctrl)
{
  while (ctrl.childNodes[0])
  {
    ctrl.removeChild(ctrl.childNodes[0]);
  }
}
</script>

<?php
define(LINE, "\n");
/* Create array for countries and codes*/
$country = array('Select'=>'','Denmark' => 45, 'Sweden' =>46, 'Norway' =>47, 'Germany'=> 49,'USA' =>1);

/*Create dynamic dropdown select box*/
$dd = '<select id="country" name="country" onchange="codeDisplay()">'.LINE;
foreach ($country as $key => $value) {

$dd .= '<option value="'.$value.'">'.$key.'</option>'.LINE;

}

$dd .= '</select>';

/* Print out dropdown box and surrounding form elements*/
print '<form id="codeChange">';
echo $dd;

print '</form>';
?>

<!-- div for displaying code-->
<div id="phoneDisplay"></div>

<div id="faxDisplay"></div>

Which as I said works in7 browsers, Opera requires the full html compliant page wrapped around it, but with the others it didn't appear to be necessary

[johanafm]

I wrote it as simple example to show my point. Using your code gives the exact same result as mine, using FF3.5.

You end up with only one paragraph in your document, but it contains two textNodes with the same text. Change the last lines to

	<div id="phoneDisplay" style="border: 1pt solid black;"></div>
	<div>This is between the two divs used</div>
	<div id="faxDisplay" style="border: 1pt solid black;"></div>

And you will see that there really is only one paragraph, and it's found in the place it was last inserted.