Two same PHP scripts do not work on the same page.

The trouble is in the topic,and I'll show how it is:

<?php

$script = "window.addEvent('domready', function() {

        $('select_0').addEvent('change', function(event) {

      if ( $('select_0')[2].selected === true ) {

         $('text_box_1').setStyle('display', 'block')
$('text_box_2').setStyle('display', 'block');

      }

   });

   $('select_0').addEvent('change', function(event) {

      if ( $('select_0')[2].selected !== true ) {

         $('text_box_1').setStyle('display', 'none')
		 $('text_box_2').setStyle('display', 'block');

      }

   });

});

";

$doc=& JFactory::getDocument();
$doc->addScriptDeclaration( $script );
?>


<div class="form_item cf_dropdown" id="source_1_container_div" style="" ><label for="source_1"><b>Some Text here</b></label>

    <label class="cf_label"></label>

    <select class="cf_inputbox" id="select_0" size="1" {cf_multiple} name="select_0">

    <option value=""><color:'red'>Some Text here</color></option>

      <option value="Some Text here"><b>Some Text here</b></option>

<option value="Some Text here"><b>Some Text here</b></option>

 

    </select>

    

  </div>

  <div class="clear"> </div>

</div>

<div class="form_item" id='text_box_1' style='display:none;' >

  <div class="form_element cf_textbox">

    <label class="cf_label"><b>Some Text here</b></label>

    	<input class="cf_inputbox" maxlength="1500" size="30" id="text_1" name="text_1" type="text" />
<br>


<div class="form_item" id='text_box_22' style='display:none;' >

  <div class="form_element cf_textbox">

    <label class="cf_label"><b>Some Text here</b></label>

    	<input class="cf_inputbox" maxlength="1500" size="30" id="text_1" name="text_1" type="text" />

  

  </div>

  <div class="clear"> </div>

</div>
</div>


<div class="clear"></div><div 

 

id="error-message-input_text_17"></div></div>



<div class="ccms_form_element cfdiv_textarea" id="input_textarea_221_container_div" style=""><label>Some Text here</label><textarea cols="45" rows="12" class="" title="" name="input_textarea_22"></textarea>

<div class="small-message">  * Some Text here.</div><div class="clear"></div><div id="error-message-input_textarea_22"></div></div>








<h2>Some Text here</h2>
<div class="ccms_form_element cfdiv_text" id="input_text_301_container_div" style=""><label>Some Text here</label><input maxlength="1500" size="30" class="" title="" type="text" value="" name="input_text_30" />
<div class="clear"></div><div id="error-message-input_text_30"></div></div>

  
<?php

$script = "window.addEvent('domready', function() {

        $('select_0').addEvent('change', function(event) {

      if ( $('select_0')[2].selected === true ) {

         $('text_box_11').setStyle('display', 'block')
$('text_box_11').setStyle('display', 'block');

      }

   });

   $('select_0').addEvent('change', function(event) {

      if ( $('select_0')[2].selected !== true ) {

         $('text_box_11').setStyle('display', 'none')
		 $('text_box_22').setStyle('display', 'block');

      }

   });

});

";

$doc=& JFactory::getDocument();
$doc->addScriptDeclaration( $script );
?>


<div class="form_item_1 cf_dropdown" id="source_2_container_div" style="" ><label for="source_2"><b>Some Text here</b></label>

    <label class="cf_label"></label>

    <select class="cf_inputbox" id="select_0" size="1" {cf_multiple} name="select_0">

    <option value=""><color:'red'>Some Text here</color></option>

      <option value="Some Text here"><b>Some Text here</b></option>

<option value="Some Text here"><b>Some Text here</b></option>

 

    </select>

    

  </div>

  <div class="clear"> </div>

</div>

<div class="form_item_1" id='text_box_11' style='display:none;' >

  <div class="form_item_1 cf_textbox">

    <label class="cf_label"><b>Some Text here</b></label>

    	<input class="cf_inputbox" maxlength="1500" size="30" id="text_1" name="text_1" type="text" />
<br>


<div class="form_item_1" id='text_box_22' style='display:none;' >

  <div class="form_item_1 cf_textbox">

    <label class="cf_label"><b>Some Text here</b></label>

    	<input class="cf_inputbox" maxlength="1500" size="30" id="text_1" name="text_1" type="text" />

  

  </div>

  <div class="clear"> </div>

</div>
</div>


<div class="clear"></div><div 
id="error-message-input_text_17"></div></div>

So, when I see the form, first of dropbox shows 3 texbox (text_box_1, text_box_2) and "text_box_11"...But it's not the action that I wait from him!
I need that different "dropboxes" works asynchronously.

Please, help me, becuase I do not see where is error hiding.

Hi Younger,

Please explain exactly what the problem is?? At the moment I'm having to guess :-(

Bob

PS I suspect you mean that two JavaScript scripts won't work together?

oh, I'm sorry!

I'll upload screenshots, please look on them.

So, It's doesn't matter, which kind of answer I chosen in second dropdown-first dropdown is control situation:
If it will be 'yes', then both dropdown shows hidden textboxes.
I trying to make them asynchronously.

Hi Younger,

That will happen if both sets of inputs have the same ids. If you give them different ids and change the scripts to use those ids it should work the way you want it to.

Bob

Thank for reply, Bob!
I'll try this way.