How/what script can I execute (on Page/Form Load) in order to show/hide a container?

[excelmaster]

Hi,

 

In reference to my first attached image, I have a form which displays two SELECT/drop-down fields (labeled "Store Name" and "Item Description".....and both of which pull-in values from two separate lookup/master tables, in addition to providing an additional option each for "NEW STORE" and "NEW ITEM").

 

Now, when first-run, and/or if "NEW STORE" and "NEW ITEM" are not selected from the drop-down's then the two fields in green ("New Store Name" and "New Item Name" are hidden, by means of the following code:

 

 

<div class="new-store-container" id="new-store-container" name="new-store-container" style="display:none;">
    <div class="control-group">
        <div class="other-store" id="new_store_name">
            <?php echo standardInputField('New Store Name', 'new_store_name', '', $errors); ?>
        </div>
    </div>
</div>

 

Conversely, if "NEW STORE" and/or "NEW ITEM" are selected from the two drop-down's then one (or both) of the "New Name" fields are unhidden by means of the following two pieces of code, one PHP and the second JS:

 

 

 

<select class="store-name" name="store_id" id="store_id" onclick="toggle_visibility('store_id','new-store-container')">
    <?php echo $store_options; ?>
                            
    <?php
        if($values['store_id'] == "OTH")
            {
                echo "<option value='OTH' selected> <<<--- NEW STORE --->>> </option>";
            }
        else
            {
                echo '<OPTION VALUE="OTH"> <<<--- NEW STORE --->>> </OPTION>';
            }
    ?>
</select>

 

 

function toggle_visibility(fieldName, containerName)
{
    var e = document.getElementById(fieldName);
    var g = document.getElementById(containerName);
            
    if (e.value == 'OTH')
        {
            if(g.style.display == 'none')
                g.style.display = 'block';
            else
                g.style.display = 'none';
        }
}

 

All  of that is working just fine. The problem I'm having is that when I click the "Create" button, after having left any one of the form fields blank, the two "New Name" fields are hidden again, which I don't want to happen i.e. I want them to remain visible (since the values of "store_id" and/or "item_id" are "OTH"), so that the user can enter values into one or both of them, without havng to click on the drop-down a second time in order to execute the "on-click" code.

 

The second attached image shows how the fields are hidden, after clicking "Create".

 

How can I achieve that? It would be greate if someone could cobble-up the required code and provide it to me, since I'm relatively new to this.

 

Thanks much.

 

 

 

 

 

[fastsol]

Why not just apply the sames logic to the container as you have to retain the selected option.

if($values['store_id'] == "OTH")

Just put that (and the proper other info/syntax)  in the div tag to change it's display property.

[excelmaster]

@fastsol,

 

Thanks for your reply.

 

One question though....since I'm not sure I fully understand you...are you suggesting that I do the following?

 

 

<?php
      if($values['store_id'] == "OTH")
            {
                  echo '<div class="new-store-container" id="new-store-container" name="new-store-container" style="display:block;">';
            }
      else
            {
                  echo '<div class="new-store-container" id="new-store-container" name="new-store-container" style="display:none;">';
            }
?>    
    <div class="control-group">
        <div class="other-store" id="new_store_name">
            <?php echo standardInputField('New Store Name', 'new_store_name', '', $errors); ?>
        </div>
    </div>
</div>

[fastsol]

yeah pretty much.

[excelmaster]

Oh Ok...thanks!

 

Very simple...but a brilliant suggestion indeed.

 

I'm trying it out...however I'm getting an errror that says: Notice: Undefined index: values in /var/www/create.php on line 233.

 

I guess I'm gonna have to dig deeper and see how I can suss that one out.

[CroNiX]

I never understand why people write basically the same thing over and over just changing one little thing. Also, why complicate things and use php to output html? Just use html and output the php as needed. It's a lot easier to read, you don't have to do crazy things with extra quotes and editors will be able to properly parse/pretty print/type hint it.

<?php
      if($values['store_id'] == "OTH")
            {
                  echo '<div class="new-store-container" id="new-store-container" name="new-store-container" style="display:block;">';
            }
      else
            {
                  echo '<div class="new-store-container" id="new-store-container" name="new-store-container" style="display:none;">';
            }
?>

could be written as

<?php $style = ($values['store_id'] == "OTH") ? 'block' : 'none'; ?>
<div class="new-store-container" id="new-store-container" name="new-store-container" style="display:<?php echo $style; ?>;">

[excelmaster]

@CroNiX,

 

Wow!!! I'm impressed!!! That's pretty amazing code you've provided me with. It looks like poetry in motion...and certainly waaay better than how mine looks. I do reaize that I could have either done away witht he curly brackets and/or used the ternary operator (to compact that piece of code)...but inspite of that, I do agree that it makes more sense to do it your way.

 

That being said...I've gotten used to using PHP to output HTML, and I find that easier to both, read as well as write. Bad habit, I know...but I'm gonna have to change it.