Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Code:
    <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>
    Regards, R.J.

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

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    Quote Originally Posted by chump2877 View Post
    Code:
    <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>

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Code:
    <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>
    Regards, R.J.

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

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Worked perfectly! Thank you!

    Quote Originally Posted by chump2877 View Post
    Code:
    <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>

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Location
    USA Northeast
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help Request - > Edit Script To Send Data To Database Fields

    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

  • #7
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    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:

    PHP Code:
    <?

    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>
    Regards, R.J.

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

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #8
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fetch data from database onselect of dropdown

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •