I have a case in the GUI where I have two sets of potential input fields that are shown/hidden according to the setting of another field.   The JavaScript to handle the show/hide is working fine but there are two little things that are causing me a problem:

• Altering the Text field does not activate the Apply button.
• The styling of the Text field does not seem to be the same as the other text fields on the same form where I am not using the show/hide technique.  In my case it has a white background whereas the others have a grey background.

I have attached two screenshots that show what I am seeing.   They show that the 'Custom' fields have a white background, whereas the 'temperature fields have a grey background.

 

I would be very grateful if someone could point out what I need to do to correct this?  I suspect the answer is simple once you know what it is

 

The fragment from my .page file that is exhibiting these symptoms is as follows:

Increment resume time:
: <span id="customResume">
  <input type"text" 
         size='1' class='narrow'
         name="parityTuningResumeCustom"
         value="<?=$parityTuningCfg['parityTuningResumeCustom']?>"
         onchange="updatedCustom(this.form)">
  &nbsp; entry in <a href="https://en.wikipedia.org/wiki/Cron#Overview" target="_blank">crontab</a> format
</span>
<span id="dailyResume">
  <select name="parityTuningResumeHour" 
          size='1' class='narrow'
          onChange="checkTimeRange(this.form)">
     <?for ($d=0; $d<=23; $d++):?>
         <?=mk_option($parityTuningCfg['parityTuningResumeHour'], strval($d), sprintf("%02d", $d)) . "\n"?>
     <?endfor;?>
  </select>
  <select name="parityTuningResumeMinute" 
          size='1' class='narrow'>
    <?for ($d=0; $d<=55; $d+=5):?>
      <?=mk_option($parityTuningCfg['parityTuningResumeMinute'], strval($d), sprintf("%02d", $d)) . "\n"?>
    <?endfor;?>
  </select>
  &nbsp;&nbsp;HH:MM
</span>

Maybe I should be using some other technique other than the <span> tags around the two options?

 

2 hours ago, itimpi said:

<input type"text"

Perhaps a typo (missing equal sign), but it needs to be

<input type="text"

 

36 minutes ago, bonienl said:

Perhaps a typo (missing equal sign), but it needs to be

<input type="text"

 

Thanks - that was it - adding the '=' gave me the expected behaviour.   I was right in that the answer would be easy when spotted  

 

I think that I was being misled by the fact that otherwise the input box was behaving exactly as I expected in that I could enter values and they got saved if I pressed 'Apply'.   In theory the default type for <input> is meant to be text, but I have just checked and if you completely omit the 'type' attribute you also get the behaviour I described so it needs to be explicitly stated to keep the GUI code happy.

 

It is a good job that I never had to earn my living by being a proof-reader

 

Edited April 24, 20197 yr by itimpi