Select dropdown to change value in another dropdown/text field

NetRoam · Oct 7, 2009

Alright - I decided to drop the select dropdown and go with the solution rincewind made. I also went with your suggestions to avoid the button. Everything seems to work fine.

There is one more thing though that I need!

I need the <div class="codeDisplay();"></div> to be shown 2 times on the page.

Next to the phone number
Next to the fax number

I'm no javascript wizard, so I don't know what needs to be added for this to work. Can you help with that?

rincewind456 · Oct 7, 2009

Just add another div

<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 name="codeChange">';
echo $dd;

print '</form>';
?>

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

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

NetRoam · Oct 8, 2009

Hello rincewind

That seems to do the trick. One problem though ... the script creates 2 displays, but they end up right beside eachother like this:

Country Code is: +45Country Code is: +45

I would have loved it if I could have possible to have the 2 different displays like this:

+45 phone number text field

+45 fax number text field

which will be inside a <table>

johanafm · Oct 8, 2009

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

NetRoam · Oct 8, 2009

Oh - I would just have thought that since there were two different <div>'s that I could just put the <div class="phoneDisplay"></div> one place and the <div class="faxDisplay"></div> another place ... but it seems that both values end up in the <div class="faxDisplay"></div> ... and no value in the phoneDisplay at all.

Here's the HTML/PHP that I have:

<tr>
  <td style="padding-top: 4px;" class="sm_txt">&nbsp;<b>Country</b>:</td>
  <td style="padding-top: 4px;" class="sm_txt"><select class="form" name="supplierCountry" style="width: 300px;" onchange="codeDisplay()">
  <option value="">- Country -</option>
  <?
  $query = "select * from lande where prefix <> '' order by name_uk asc";
  $result = mysql_query($query) or die("".mysql_errno()." Error: ".mysql_error());

  if ($result && mysql_num_rows($result) > 0)
  {
    while($row = mysql_fetch_array($result))
    {
      $name_uk = $row['name_uk'];
      $prefix = $row['prefix'];
  ?>
  <option <? if($supplierCountry == $prefix) { echo "SELECTED "; } ?> value="<?= $prefix ?>"><?= $name_uk ?></option>
  <?
  }
}
?>
  </select> &nbsp;<span class="red">*</span></td>
</tr>
<tr>
  <td style="padding-top: 4px;" class="sm_txt">&nbsp;<b>Telephone No.</b>:</td>
  <td style="padding-top: 4px;" class="sm_txt">
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td valign="top" width="48" class="sm_txt"><div id="phoneDisplay"></div></td>
        <td valign="top" width="362" class="sm_txt"><input type="text" name="supplierPhone" value="<?= $supplierPhone ?>" style="width: 252px;" class="form"> &nbsp;<span class="red">*</span></td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td style="padding-top: 4px;" class="sm_txt">&nbsp;<b>Fax No.</b>:</td>
  <td style="padding-top: 4px;" class="sm_txt">
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td valign="top" width="48" class="sm_txt"><div id="faxDisplay"></div></td>
        <td valign="top" width="362"><input type="text" name="supplierFax" value="<?= $supplierFax ?>" style="width: 252px;" class="form"></td>
      </tr>
    </table>
  </td>
</tr>

rincewind456 · Oct 8, 2009

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 · Oct 8, 2009

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 · Oct 8, 2009

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 · Oct 8, 2009

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 · Oct 8, 2009

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 · Oct 9, 2009

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:

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 · Oct 9, 2009

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 · Oct 9, 2009

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 · Oct 9, 2009

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 · Oct 9, 2009

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

johanafm · Oct 9, 2009

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

rincewind456 · Oct 9, 2009

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 · Oct 10, 2009

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 · Oct 10, 2009

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 · Oct 12, 2009

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.

Select dropdown to change value in another dropdown/text field

NNetRoam

Rrincewind456

NNetRoam

Jjohanafm

NNetRoam

Rrincewind456

NNetRoam

Rrincewind456

Jjohanafm

Rrincewind456

NNetRoam

Jjohanafm

Rrincewind456

Jjohanafm

Rrincewind456

Jjohanafm

Rrincewind456

Jjohanafm

Rrincewind456

Jjohanafm