Forums

Hi,

I have made form with some javascript show/hide divs. I'm using this script:

//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = ""; //display div
}

//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
	//Loop through the seclect menu values and hide all
	var selectMenu = document.getElementById("selectMenu");
	for (var i=0; i<=selectMenu.options.length -1; i++)
	{
		hideDiv(selectMenu.options[i].value);
	}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
	hideAllDivs(); // Hide all
	showDiv(showID); // Show the one we asked for

}

and I have a form (part of it where script aplies)..

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Število oseb:</label>
<select id="selectMenu" name="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="9A"> 1 oseba </option>
<option value="10A"> 2 osebi </option>
<option value="11A"> 3 osebe </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;">1. Ime in priimek:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="text_3" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div id="9A" style="display:none"></div>

<div id="10A" style="display:none">

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">2. Ime in priimek:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_9" name="text_9" type="text" />
  </div>
  <div class="cfclear"> </div>
  </div>
</div>

<div id="11A" style="display:none">

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">2. Ime in priimek:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_18" name="text_18" type="text" />  
  </div>
  <div class="cfclear"> </div>
  </div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">3. Ime in priimek:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_9" name="text_9" type="text" />
  </div>
  <div class="cfclear"> </div>
  </div>
</div>

So this script is working OK. I have a problem with email templates. When I use to print out selected option ("selectMenu") it prints out values (value="9A", value="10A", value="11A"). I wonder if I could add some "name" tags to option.

Like this:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Število oseb:</label>
<select id="selectMenu" name="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="9A" name="random text"> 1 oseba </option>
<option value="10A" name="random text"> 2 osebi </option>
<option value="11A" name"random text">3 osebe </option>
</select> 
  </div>
  <div class="cfclear"> </div>
</div>

and to get printed in email name tag and not value.

Is this possible? Or can someone change javascript to make it working with random id's. Now it's made with continous 1xx,2xx,3xx,4xx....

Thanks in advance!

Hi rossi46,

You can't use name attributes in option tags (at least I don't think you can).

Simply look up the values in the email template or the onSubmit before box and use them instead of the ids.

As a general comment, it's much easier to handle option arrays with simple keys and complex values. So here you'd crerate teh options with

<?php
$option_array = array("9A" => "1 oseba", "10A" => "2 osebi", "11A" => "3 osebe");
$option_value = JRequest::getString('option_value', '', 'post');
foreach ( $option_array as $k => $v ) {
 if ( $k == $option_value ) { 
    $selected = "selected='selected'";
  } else {
    $selected = "";
  }
  echo "<option value='$k' $selected>$v</option>";
}
?>

and get the values back in the OnSubmit Before Box

<?php
$option_array = array("9A" => "1 oseba", "10A" => "2 osebi", "11A" => "3 osebe");
$option_value = JRequest::getString('option_value', '', 'post');
JRequest::setVar('option', $option_array[$option_value]);
?>

You can then use {option} in the email template I think.

Bob

Note: you will probably want to use other variable names instead of 'option. . ..