dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: How to display values from two select forms

  1. #1
    Join Date
    Apr 2012
    Location
    London
    Posts
    12

    How to display values from two select forms

    Hi Guys,

    I have been trying to figure out how to display values from these two select forms, all to no avail. I'm just a novice in coding anyways. Your help is highly appreciated..

    Below is what I have done to get it working but no luck...

    <script type="text/javascript">
    function firstResult()
    {
    var x=document.getElementById("first").selectedIndex;
    //alert(document.getElementsByTagName("option")[x].value);
    var objHidden = document.getElementById("frstHidden");
    objHidden.value = document.getElementsByTagName("option")[x].textContent;
    }
    function secondResult()
    {
    var y=document.getElementById("second").selectedIndex;
    //alert(document.getElementsByTagName("option")[y].value);
    var obj2Hidden = document.getElementById("scndHidden");
    obj2Hidden.value = document.getElementsByTagName("option")[y].textContent;
    }

    </script>

    <!-- form 1 -->
    <form>



    <select name="amount" style="width:250px;font:9px;margin-top:4px" id="first" onchange="firstResult()">
    <option>--Select Course--</option>
    <option value="a">A</option>
    <option value="b">B</option>

    </select>
    <input type="text" name="" id="frstHidden" value=""/>
    </form>
    <!-- end of form 1-->

    <!-- form 1 -->
    <form>



    <select name="amount" style="width:250px;font:9px;margin-top:4px" id="second" onchange="secondResult()">
    <option>--Select Course--</option>
    <option value="c">C</option>
    <option value="d">D</option>

    </select>
    <input type="text" name="" id="scndHidden" value=""/>
    </form>
    <!-- end of form 2->

  2. #2
    Join Date
    Apr 2012
    Location
    London
    Posts
    12
    I need your help please...professional coders.. the forms work well on seperate pages but would'nt work on same page. What am I doing wrong?

    I need the select objects to be passed to the input boxes respectively...

  3. #3
    Join Date
    Nov 2011
    Posts
    64
    It seem to me that the second form is not working correctly. The first one is all right.

  4. #4
    Join Date
    Apr 2012
    Location
    London
    Posts
    12
    yes stev, the second form would work on a seperate page but wouldn't work on same page with the first one....

  5. #5
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Both selects have the same name. Try changing one.

  6. #6
    Join Date
    Apr 2012
    Location
    London
    Posts
    12
    I have done that already..changed the select names to amount1 and amount2..and no help at all

  7. #7
    Join Date
    Mar 2012
    Posts
    63
    Hi,

    Add Name to 2nd form and change 2nd function with form name

    <script type="text/javascript">
    function firstResult()
    {
    var x=document.getElementById("first").selectedIndex;
    //alert(document.getElementsByTagName("option")[x].value);
    var objHidden = document.getElementById("frstHidden");
    objHidden.value = document.getElementsByTagName("option")[x].textContent;
    }
    function secondResult()
    {
    var y=document.getElementById("second").selectedIndex;
    //alert(document.secFrm.getElementsByTagName("option")[y].value);
    var obj2Hidden = document.getElementById("scndHidden");
    obj2Hidden.value = document.secFrm.getElementsByTagName("option")[y].textContent;
    }

    </script>

    <!-- form 1 -->
    <form>



    <select name="amount" style="width:250px;font:9px;margin-top:4px" id="first" onChange="firstResult()">
    <option>--Select Course--</option>
    <option value="a">A</option>
    <option value="b">B</option>

    </select>
    <input type="text" name="" id="frstHidden" value=""/>
    </form>
    <!-- end of form 1-->

    <!-- form 1 -->
    <form name="secFrm">



    <select name="amount" style="width:250px;font:9px;margin-top:4px" id="second" onChange="secondResult()">
    <option>--Select Course--</option>
    <option value="c">C</option>
    <option value="d">D</option>

    </select>
    <input type="text" name="" id="scndHidden" value=""/>
    </form>
    <!-- end of form 2->>

  8. #8
    Join Date
    Apr 2012
    Location
    London
    Posts
    12
    Wow great. Thanks a lot for this solution. However, since I was not getting any replies, I managed to sort it out using Jquery:

    <script>
    $("#first").change(function () {
    var str = "";
    $("#first option:selected").each(function () {
    str += $(this).text() + " ";
    });
    $("#frstHidden").val(str);
    })
    .change();

    $("#second").change(function () {
    var str = "";
    $("#second option:selected").each(function () {
    str += $(this).text() + " ";
    });
    $("#scndHidden").val(str);
    })
    .change();
    </script>

    Thanks again for taking the time to fix the bug.

  9. #9
    Join Date
    Mar 2012
    Posts
    63
    Hi benconnekt

    thanks ..its good to use jquery

    Thanks
    masterwin

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles