User selects from dropdown box, then store separate value in a hidden textbox

I have a form where users will be making a selection in a drop down box. I need, essentially, to store two values: the first value is the actual value assigned with each drop down item (their label, basically), and the second value being a completely separate value that will change based on what they chose from the drop down box to begin with.

Example: Drop down box contains selections A, B, C, D. User selects A, I need to keep the original dropdown box's A value in tact for the dropdown box's value, and then store a 1 in a hidden textbox. User selects B, a 2 is stored, etc.

Both of these values will be e-mailed, hence the reason I chose a hidden textbox to store the second value. Additionally, I don't want the user to see the second value on the form itself. If there's a better way to accomplish this, please let me know.

<select id="dropdown" onchange="storeVal(this,'hiddenVal');">
<option value="default">--Select a Letter--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

<input type="hidden" id="hiddenVal" />


<script type="text/javascript">

function storeVal(selectObj,id)
{
var hiddenObj = document.getElementById(id);
var optionArr = selectObj.getElementsByTagName("option");

if (selectObj.value == "default") return false;

for (i=1; i<=optionArr.length; i++)
{
if (selectObj.value == optionArr[i].value)
{
hiddenObj.value = i;
return alert('The hidden value is "'+i+'"');
}
}
}

</script>

Hi there,

Thanks for your response! Where can I specify the hidden value associated with each option value? Sometimes the hidden value will be numerical, sometimes it will be a letter/word.

Thank you!

<select id="dropdown" onchange="storeVal(this,'hiddenVal');">
<option value="default">--Select a Letter--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

<input type="hidden" id="hiddenVal" />


<script type="text/javascript">

function storeVal(selectObj,id)
{
var hiddenObj = document.getElementById(id);
var optionArr = selectObj.getElementsByTagName("option");

if (selectObj.value == "default") return false;

for (i=1; i<=optionArr.length; i++)
{
if (selectObj.value == optionArr[i].value)
{
hiddenObj.value = i;
return alert('The hidden value is "'+i+'"');
}
}
}

</script>

<select id="dropdown" onchange="storeVal(this,'hiddenVal');">
<option value="default">--Select a Letter--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

<input type="hidden" id="hiddenVal" />


<script type="text/javascript">

// Edit this array to assign values for hidden form input
var valPairs = {"A":"1","B":"two","C":"3","D":"four"};

function storeVal(selectObj,id)
{
var hiddenObj = document.getElementById(id);
var optionArr = selectObj.getElementsByTagName("option");

if (selectObj.value == "default") return false;

for (i=1; i<=optionArr.length; i++)
{
if (selectObj.value == optionArr[i].value)
{
hiddenObj.value = valPairs[selectObj.value];
return alert('The hidden value is "'+hiddenObj.value+'"');
}
}
}

</script>

Worked perfectly! Thank you! :)

<select id="dropdown" onchange="storeVal(this,'hiddenVal');">
<option value="default">--Select a Letter--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

<input type="hidden" id="hiddenVal" />


<script type="text/javascript">

// Edit this array to assign values for hidden form input
var valPairs = {"A":"1","B":"two","C":"3","D":"four"};

function storeVal(selectObj,id)
{
var hiddenObj = document.getElementById(id);
var optionArr = selectObj.getElementsByTagName("option");

if (selectObj.value == "default") return false;

for (i=1; i<=optionArr.length; i++)
{
if (selectObj.value == optionArr[i].value)
{
hiddenObj.value = valPairs[selectObj.value];
return alert('The hidden value is "'+hiddenObj.value+'"');
}
}
}

</script>

Hello thiazi and forum members,

I want you to know that I have been searching

for this solution for days now ... and I'm so

happy that I finally found your thread!!

This script appears to be what I need, ...

however, ... I am not an experienced code

writer and I am requesting someone's help

with editing this script so that the data can

be entered into two different SQL database

fields. The first field name is:

'destination_departure_date' , ...and the

second field name is: 'day_number' (this will

be the hidden value) .

I want to place this script in a form (if I

can do that!), ... the user makes the

selection from the drop-down box (the first

value gets entered into the

'destination_departure_date' field, ...the

second hidden value gets entered into the

'day_number' field), ...and when the user

pushes the enter button on my form, ...the

data is sent (entered) into the SQL database.

Can anyone show me how to modify the

following script so that the data is sent to

the SQL database fields?
---------------------------------------------

---------------------------------------------

---
<select id="dropdown"

onchange="storeVal(this,'hiddenVal');">
<option value="default">--Select a

Letter--</option>
<option value="01 JAN">01 JAN</option>
<option value="02 JAN">02 JAN</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

<input type="hidden" id="hiddenVal" />


<script type="text/javascript">

// Edit this array to assign values for

hidden form input
var valPairs = {"01 JAN":"1","02

JAN":"2","C":"3","D":"four"};

function storeVal(selectObj,id)
{
var hiddenObj =

document.getElementById(id);
var optionArr =

selectObj.getElementsByTagName("option");

if (selectObj.value == "default") return

false;

for (i=1; i<=optionArr.length; i++)
{
if (selectObj.value ==

optionArr[i].value)
{
hiddenObj.value =

valPairs[selectObj.value];
return alert('The hidden value is

"'+hiddenObj.value+'"');
}
}
}

</script>
---------------------------------------------

--------------------------------------
Your feedback and/or coding help will be

greatly appreciated.

Steve

This would be better accomplished with no client scripting at all (JavaScript).

If you are using PHP and MySQL, you might try something like the following:

<?

if ($_POST['addDatetoDB'])
{
// include MySQL connection script file here
// i.e.,
// include 'db_connect.php';

$date = $_POST['dropdown'];
$dateArr = explode(" ",$date);

$query = "INSERT INTO date_table (destination_departure_date,day_number) VALUES ('" .$date. "','" .$dateArr[0]. "')";
$result = mysql_query($query);
if (mysql_errno())
{
die("<br>" . mysql_errno() . ": " . mysql_error() . "<br>");
}
if (mysql_affected_rows() != 1)
{
die("<br>Failed to add user information.");
}
}

?>

<form method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
<select name="dropdown">
<option value="default">--Select a Date--</option>
<option value="01 JAN">01 JAN</option>
<option value="02 JAN">02 JAN</option>
<option value="03 JAN">03 JAN</option>
<option value="04 JAN">04 JAN</option>
</select>
<input type="submit" name="addDatetoDB" value="Add to Database" />
</form>

hello guys i have the same problem with php when a user selects a destination and then submits it the webpage doesnt store the users selected destination and the user has to select it again... I dont know how to fix this if anyone knows please help me thank you appriciate it

i have one dropdown in which data dynamically fetched from data base using php.i want to fetch the corresponding data of that particular that i've selected from dropdown menu.