How to pupulate a text box from selection of a select?

Hi,
I have a select made in this way:

<select class="cf_inputbox" id="select_5" size="1" title="Effettua una scelta!"  name="tipo_nolavorazioni" onChange="updatethis(this.form);">
    <option value="">Clicca per scegliere</option>
    <option value="12">Banner pvc 700gr € 12,00/mq</option> 
    <option value="15">Banner pvc 700gr alta qualità € 15,00/mq</option>
    <option value="21">Banner backlit eurosol 550gr spalmato € 21,00/mq</option>
   <option value="10" >Rete mesh antivento 400gr classe B1 endutex € 10,00/mq</option>
    </select>

Now I would a text box populated automatically, based on the selection of the select before.
I would populate the text box with "Banner pvc.." and not with the value "12".

I have found this solution but I can't adapt it to chronoforms. Ho can I do this?

<SCRIPT type="text/javascript">
 function aggiornaHidden(sel){
  var f = document.frm;
  f.sel_value.value = sel.options[sel.selectedIndex].value;
  f.sel_text.value = sel.options[sel.selectedIndex].text;
 }
</SCRIPT>

<FORM name="frm">

<SELECT name="sel1" onchange="aggiornaHidden(this)">
 <OPTION value="" selected> Scegli
 <OPTION value="A"> Opzione 1
 <OPTION value="B"> Opzione 2
 <OPTION value="C"> Opzione 3
</SELECT>

Regards

monak1983

Someone can help me?
Any ideas?

Regards
monak83

Bob can you have any ideas?

regards

monak1983

Hi Monak83,

I changed the id in your select and added a text input to the HTML

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <select class="cf_inputbox" id="tipo_nolavorazioni" size="1" title="Effettua una scelta!"  name="tipo_nolavorazioni" >
      <option value="">Clicca per scegliere</option>
      <option value="12">Banner pvc 700gr € 12,00/mq</option>
      <option value="15">Banner pvc 700gr alta qualità € 15,00/mq</option>
      <option value="21">Banner backlit eurosol 550gr spalmato € 21,00/mq</option>
      <option value="10" >Rete mesh antivento 400gr classe B1 endutex € 10,00/mq</option>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="tipo_select" name="tipo_select" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

Then this JavaScript appears to work OK

window.addEvent('domready', function() {
  $('tipo_nolavorazioni').addEvent('change', function() {
    this.getChildren().each(function(o) {
      if ( o.selected == true ) {
         $('tipo_select').value = o.getText();
      }
    });
  });
});

Hi Bob,
the last code you have posted works very well! Thanks so much!
You can see that on this form: http://www.sgagrafica.com/index.php?option=com_content&view=article&id=76:banner-pvc&catid=42&Itemid=119

Here you can see that depending on FINFORZO PERIMETRALE (Si or No) I have two different select for TIPO.
Now if you select RINFORZO PERIMETRALE Si and you select a TIPO...then you select RINFORZO PERIMETRALE No and select a TIPO in the text box your code populate all two selected item.

Now I have a new question: is possible to populate only the a text box depending from RINFORZO PERIMETRALE Si or No?

I ask this because these text box populated from select will be sent at a cart system so if I have all two text box populated I can't recognize what kind of TIPO the user has selected.

Sorry for my bad english, I hope do you understand me.

Thanks so much

monak83

Hi monak83,

I'm not certain that I understand what you need . . .

Yes, I'm sure you can have just one text box populated. But I can't tell which boxes.

Bob

If I select RINFORZO PERIMETRALE to NO I see a kin of select TIPO.
After if I change idea and I want RINFORZO PERIMETRALE I set this to SI and I see another king of select TIPO.
With your script for all two select I populated the two text box: one for the selection done with RINFORZO PERIMETRALE checked to SI and other for RINFORZO PERIMETRALE checked to NO.
Now I would populate only one text box based on the last selection of RINFORZO PERIMETRALE and its TIPO and not leave in "memory" the selection done before.
I ask this because with this script I sent at my system all two text box populated (because the user have selected RINFORZO PERIMETRALE to SI and have choosen a TIPO and then have changed idea and have selected RINFORZO PERIMETRALE to NO and have choosen another TIPO) but I want to send only one (the last selected) so I can see what TIPO have selected my user.
I hope that this time I'm been more clear.
Regards
monak83

Hi monak83,

Ah, now I see . . .but it's not my code that is doing that (my code just displays the text). It is this code from somewhere else

    window.addEvent('domready', function(){
        var select_5 = $('select_5');
        select_5.addEvent('click', function(){
            var selected = select_5.selectedIndex;
            var option = select_5.options[selected];
            option = $(option);
            var desc = option.getProperty('title');
            if ($('detail')) {
                $('detail').remove();
            }
            var detail = new Element('div', {
                id: 'detail',
                styles: {
                    display: 'block',
                    border: '1px solid silver',
                    width: 450
                }
            });
            if (desc) {
                detail.innerHTML = desc;
                detail.injectAfter(select_5);
            }
        });
    });

    window.addEvent('domready', function(){
        var select_6 = $('select_6');
        select_6.addEvent('click', function(){
            var selected = select_6.selectedIndex;
            var option = select_6.options[selected];
            option = $(option);
            var desc = option.getProperty('title');
            if ($('detail')) {
                $('detail').remove();
            }
            var detail = new Element('div', {
                id: 'detail',
                styles: {
                    display: 'block',
                    border: '1px solid silver',
                    width: 450
                }
            });
            if (desc) {
                detail.innerHTML = desc;
                detail.injectAfter(select_6);
            }
        });
    });

    window.addEvent('domready', function(){
        $('select_5').addEvent('change', function(){
            this.getChildren().each(function(o){
                if (o.selected == true) {
                    $('desc_select1').value = o.getText();
                }
            });
        });
    });

    window.addEvent('domready', function(){
        $('select_6').addEvent('change', function(){
            this.getChildren().each(function(o){
                if (o.selected == true) {
                    $('desc_select2').value = o.getText();
                }
            });
        });
    });

I think that you need to (a) give the two selects different 'id's to identify them clearly. The name can remain the same. The (b) add to this code so that the one that is hidden also has it's value reset to ''.

Bob

Hi Bob the two select have different ids; in fact you can see select_5 and select_6.
How can I set the value "" (empty) for the hidden select?
regards
monak83

Hi monak83,

Apologies, you are right.

It will be something like this. In this code

if (rinforzo=="no") {
  document.getElementById("variabile1").style.display = 'block';
  document.getElementById("variabile2").style.display = 'none';
  form.elements['tipo'].value = ''; // <-- add this line
  var tipo1 = form.elements['tipo_nolavorazioni'].value;
  ...
} else {
  document.getElementById("variabile2").style.display = 'block';
  document.getElementById("variabile1").style.display = 'none';
  form.elements['tipo_nolavorazioni'].value = ''; // <-- add this line
  var tipo2 = form.elements['tipo'].value;
  . . . 
}

Bob

Hi bob your solution seems not works, all two text box are sent.
Could be an idea to put desc_select1 to NULL (or something similar) when RINFORZO PERIMETRALE is setup to SI and put desc_select2 to NULL when RINFORZO PERIMETRALE is setup to NO?
Is possible?
Regards and thanks so much for your GOLDEN time!!!
Thanks
monak83

Hi monak83 ,

Have you solved this?

Bob