How insert into database both value and content? - php

Question

How insert both value and content into database separate separate column. Its a dropdown menu. Like
<select name="name" id="name">
<option value="000">Please select</option>
<option value="calendar.gif">Animal Welfare</option>
<option value="calendar1.gif">Art and Cultural</option>
<option value="calendar2.gif">Career Related</option>
</select>
For the instance "Animal welfare", want to insert "calendar.gif" to one column and "Animal welfare" to another column.

Answer 1

Store the option => value combinations in an array. You can then use this array for both inserting and displaying, eg
$options = array (
'calendar.gif' => 'Animal Welfare',
'calendar1.gif' => 'Art and Cultural',
'calendar2.gif' => 'Career Related'
);
if (isset($_POST['name']) && array_key_exists($_POST['name'], $options)) {
// valid option submitted
$key = $_POST['name'];
$value = $options[$key];
// now you can insert $key and $value
}
// to display
?>
<select name="name" id="name">
<option value="">Please select</option>
<?php foreach ($options as $key => $value) : ?>
<option value="<?php echo htmlspecialchars($key) ?>">
<?php echo htmlspecialchars($value) ?>
</option>
<?php endforeach ?>
</select>

Answer 2

Only the string in the value attribute is sent to the server.
If you wanted the text node as well, you'd need to use JavaScript (possibly XHR).
An example using JavaScript might be...
var selectedOptionTextNode = document.createElement('input');
selectedOptionTextNode.type = 'hidden';
selectedOptionTextNode.name = 'selected-text-node';
document.body.appendChild(selectedOptionTextNode);
document.getElementsByTagName('select')[0].addEventListener('change', function() {
selectedOptionTextNode.value = this.options[this.selectedIndex].innerHTML;
}, false);
jsFiddle.
Now the text node will also be submitted to the server.
However, by far the best way to do this is per Phil's answer, i.e. associate the keys with values on your server.