Monitor Reply

Support

PHP HowTo: return result of dropdown menu to change html class on text/image area?

Permalink Browser Info Environment May 09, 2013 at 8:04 PM

Hi there,

Just wondering if anyone could help me with this.
Im creating a block, using designer content and want to have a text area and a dropdown menu that changes the html class on the text area for instance choosing 'top, middle or bottom' on the dropdown menu would then change the html class on the text area.

Also, would this dropdown menu need to appear before the text area so the result was ready before the text area needs it...?

I can imagine there would be many many many other uses for this not just my changing html classes..

Thanks in advance and sorry if this is a n00b question!

Type:	Discussion
Status:	New

jordanlev replied on May 10, 2013 at 11:28 am Permalink Best Answer Reply

You will need to use some javascript in the block's edit.php file for this. Figure out what the various field id's are (for this example I will assume the dropdown's field id is "field_1_dropdown" and the textarea's id is "field_2_textarea"... but yours will most likely be different so examine the edit.php file to see what they are for you), then add some code like this to the bottom of the block's "edit.php" file:

function updateTextareaClass() {
  $('#field_2_textarea').removeClass('top middle bottom').addClass($(this).val());
}
//update the class when the form first loads:
updateTextareaClass();
//update the class whenever the dropdown changes:
$('#field_1_dropdown').on('change', function() {
  updateTextareaClass();
});

Note that I'm also assuming the value for the dropdown is the class name itself. If it's not, you'll need to figure out how to convert the dropdown value to the proper class name and pass that to the "addClass" function.

Good luck!

-Jordan

jpcharrier replied on May 12, 2013 at 11:34 pm Permalink Reply

Hey Jordan,

Firstly... Thank you for investing your time into this add-on, its a God-send!

Wow cool, I hadnt thought of having it update on the fly while in in edit.php.. I had a friend suggest using php switch (view.php pasted below) to update the 2 different classes on my text area.

Heres the code so you can see how we made it work..

<!-- dropdown menu for left/right placement -->
<?php  if ($field_3_select_value == 1): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline Left or Right" : CHOICE "head-left" -->
<?php  endif; ?>
<?php  if ($field_3_select_value == 2): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline Left or Right" : CHOICE "head-right" -->
<?php  endif; ?>
<!-- drop down menu for top / middle / bottom placement -->
<?php  if ($field_4_select_value == 1): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline placement" : CHOICE "top" -->
<?php  endif; ?>
<?php  if ($field_4_select_value == 2): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline placement" : CHOICE "middle" -->
<?php  endif; ?>
<?php  if ($field_4_select_value == 3): ?>

Viewing 15 lines of 43 lines. View entire code block.

<!-- dropdown menu for left/right placement -->
<?php  if ($field_3_select_value == 1): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline Left or Right" : CHOICE "head-left" -->
<?php  endif; ?>
 
<?php  if ($field_3_select_value == 2): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline Left or Right" : CHOICE "head-right" -->
<?php  endif; ?>
 
 
 
<!-- drop down menu for top / middle / bottom placement -->
<?php  if ($field_4_select_value == 1): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline placement" : CHOICE "top" -->
<?php  endif; ?>
 
<?php  if ($field_4_select_value == 2): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline placement" : CHOICE "middle" -->
<?php  endif; ?>
 
<?php  if ($field_4_select_value == 3): ?>
   <!-- ENTER MARKUP HERE FOR FIELD "Headline placement" : CHOICE "bottom" -->
<?php  endif; ?>
 
 
<!-- sets the returned value of the drop down menus above to a variable for inserting further down -->
<?php
    $class3 = '';
    switch ($field_3_select_value){
        case 1: $class3 = 'head-left'; break;
        case 2: $class3 = 'head-right'; break;
    }
 
    $class4 = '';
    switch ($field_4_select_value){
        case 1: $class4 = 'top'; break;
        case 2: $class4 = 'middle'; break;
        case 3: $class4 = 'bottom'; break;
    }
?>
 
 
 
<!-- uses returned value of dropdown menu above in classes for the headlines -->
<div class="span7 head <?php echo $class3; ?> <?php echo $class4; ?>">
 
<!-- optional headlines here. -->
<?php  if (!empty($field_6_textbox_text)): ?>
   <h2><?php  echo htmlentities($field_6_textbox_text, ENT_QUOTES, APP_CHARSET); ?></h2>
<?php  endif; ?>
 
<?php  if (!empty($field_7_textbox_text)): ?>
   <h2><?php  echo htmlentities($field_7_textbox_text, ENT_QUOTES, APP_CHARSET); ?></h2>
<?php  endif; ?>
 
<?php  if (!empty($field_8_textbox_text)): ?>
   <h2><?php  echo htmlentities($field_8_textbox_text, ENT_QUOTES, APP_CHARSET); ?></h2>
<?php  endif; ?>

Im sure there is a much more efficient way to write this file, but this has worked perfectly so far in giving the user the ability to switch between left/right and top/middle/bottom placements of the headlines.

Im going to try your suggestion above also, as Im sure both ways have their uses!

Thanks again Jordan!

Designer Content

Support

PHP HowTo: return result of dropdown menu to change html class on text/image area?

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post