CODEWITHSUNDEEP
javascriptphphtml
CBC_NS
CBC_NS

Reputation: 1957

Utilizing multiple variables in select option

Community, I currently have a select drop down whose values and titles are being populated via a mysql query. Currently, all it's passing is (source_id). However, I want it to pass a second variable as well, (source_flag). I need both for the following reasons. If the source_flag is set to 'YES', my JS will make a div visible. I need the (source_id) to insert a value back into my database. Below is my current drop down and JS function. Add in a little bit of HTML.

HTML

<fieldset style="display: inline;" id="source">
<legend class="legend1"><h2>&nbsp; Ticket Source &nbsp;</h2></legend>
<div style="padding-top: 5px;" id="source">
     <div class="input-field">
     <?php include $ins_tic.'selectSource'.$ext; ?>
     </div>
     <div id="received"  style="display: none;">
     <input type="text" id="dateTimeField" name="received_on" style="width: 160px;" placeholder="Time Received"/>
     <script>AnyTime.picker('dateTimeField');</script>
     </div>
</div>
</fieldset>

The $ins_tic.'selectSource'.$ext file

<?php
//This populates the drop down
echo '
<select id="ticket_source" name="ticket_source" tabindex="16" onchange="showEmail(this.value)">
<option value="">Select Source</option>';
//I want to add source_flag to the query, and add that value to the select option
$get_sources = mysql_query("SELECT source_id, source_name FROM ticket_source ORDER BY source_name ASC");
 while (($source_list = mysql_fetch_assoc($get_sources)))
 {
      echo '
      <option value="'.$source_list['source_id'].'">'.$source_list['source_name'].'</option>';
 };
 echo '
 <option value="0">Other</option>
 </select>';
 ?>

Finally, my current javascript. Note, the javascript is currently going off of the source_id value. I dislike doing it that way because additional sources may and probably will be added in the future.

function showEmail(id)
{
    var div = document.getElementById("received");
    if(id == 2 || id == 3 || id == 5)
    {
        div.style.display = 'block';
    }
    else
    {
        div.style.display = 'none';
    }
}

Upvotes: 0

Views: 320

Answers (2)

Bjorn
Bjorn

Reputation: 71960

How about:

<select id="ticket_source" name="ticket_source" tabindex="16" onchange="showEmail(this)">

followed by

  <option value="'.$source_list['source_id'].'" data-flag="'.$source_list['source_flag'].'>'.$source_list['source_name'].'</option>';

And then

function showEmail(element)
{
    var id = element.value;
    var flag = element.options[element.selectedIndex].getAttribute('data-flag');
    // Do something with flag...
    var div = document.getElementById("received");
    if(id == 2 || id == 3 || id == 5)
    {
        div.style.display = 'block';
    }
    else
    {
        div.style.display = 'none';
    }
}

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You will need to add a delimiter, put both values in the <option> and parse it back out on the server.

 <option value="'.$source_list['source_id']._.$source_list['source_flag']'">

Upvotes: 0

Related Questions