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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help in javascript required

    Hi
    I am designing an offline tool. The idea is :
    1) I have three level dependent drop down list.
    2) The name say is :Main(having A,B and C as drop down options), Option2(drop down based on selection of A, B or C, showin in the code below) and Option3(based on the selection of options from drop down option2, shown in the code below).
    3) there is a "Go" button on the page , which on being pressed, should capture and display the value selected in drop down and display the result in 'Result based on selection' part , which is the lower half of the page.

    The bottom half part of the page is named as 'Result based on selection'. In this section , whatever is selected by the user, on pressing "Go" , should be displayed (printed). Not just one, any number of selections on pressing Go should keep on getting added one below the other.

    Please help me in capturing and printing the results. Most of the part is done. The code is pasted here:




    <!DOCTYPE html PUBLIC >
    <html xmlns=" ">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Bus</title>
    <style type="text/css">
    html,body {
    height: 100%;
    width:100%;
    overflow: hidden;
    top:0;
    left:0;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    /*background: #FFF;*/
    font-size: 12px;
    }
    #maincontainer
    {

    margin: 0 0 0 0;
    background: #fff;
    height:100%;
    width:100%;
    padding: 0px;
    }

    #mainheader
    {
    height: 8%;

    padding: 0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    }

    #mainheader h1 { margin: 0; }

    #mainnavigation
    {
    border: thin solid black;
    float: left;
    width: 100%;
    height:30%;
    background: #FFF;
    border-width:1px;
    }

    #mainnavigation ul
    {
    margin: 0;
    padding: 0;
    }

    #mainnavigation ul li
    {
    list-style-type: none;
    display: inline;
    }

    #mainnavigation li a
    {
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
    }

    #mainnavigation li a:hover { background: #383; }

    #maincontent
    {

    clear: left;
    padding: 5px;
    height:55%;

    }

    #maincontent h2
    {
    color: #000;
    font-size: 160%;
    margin: 0 0 .5em;
    }
    #resultpanel
    {
    background-color:#CCC;
    border-width:2px;
    border-color:black;
    margin:10px;
    padding:10px;
    border:20px;
    width:auto;
    height:auto;
    }

    #mainfooter
    {
    background: #CCC;
    text-align: right;
    padding:2px;
    height: 3%;
    border:1px;
    border-color:black;
    }

    .make_selection_back { background: url('Header_Looking_Image.jpg') no-repeat; width:
    1260px; height: auto;padding:10px; margin:20px; }
    .make_selection_table { top: 50px; left: 10px;padding:5px; }
    </style>

    </head>


    <!--//Code Begins here -->
    <script type="text/javascript">
    var option = new Array();
    option['A'] = new Array('A1','A2','A3','A4');
    option['B'] = new Array('B1','B2','B3','B4');
    option['C'] = new Array('C1','C2','C3','C4');

    // iss List
    var WTFissList = new Array();
    WTFissList['A'] = new Array();
    WTFissList['A']['A1'] = new Array('A11','A12','A13','A14');
    WTFissList['A']['A2'] = new Array('A21','A22','A23','A24');
    WTFissList['A']['A3'] = new Array('A31','A32','A33','A34');
    WTFissList['A']['A4'] = new Array('A41','A42','A43','A44');
    WTFissList['B'] = new Array();
    WTFissList['B']['B1'] = new Array('b11','b12','b13','b14');
    WTFissList['B']['B2'] = new Array('b21','b22','b23','b24');
    WTFissList['B']['B3'] = new Array('b31','b32','b33','b34');
    WTFissList['B']['B4'] = new Array('b41','b42','b43','b44');
    WTFissList['C'] = new Array();
    WTFissList['C']['C1'] = new Array('NA','NB');
    WTFissList['C']['C2'] = new Array('CO','CT');
    WTFissList['C']['C3'] = new Array('C23','Cy');
    WTFissList['C']['C4'] = new Array('Fi','Ot');
    function WTFissSet() {
    MainSel = document.getElementById('MainissID');
    issID = option[MainSel.value];
    changeSelect('Option2', issID, issID);
    setissList();
    }
    function setissList() {
    MainSel = document.getElementById('MainissID');
    WTFissMid = document.getElementById('Option2');
    WTFFinalList = WTFissList[MainSel.value][WTFissMid.value];
    changeSelect('Listofiss', WTFFinalList, WTFFinalList);
    }
    function changeSelect(fieldID, newOptions, newValues) {
    selectField = document.getElementById(fieldID);
    selectField.options.length = 0;
    for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }
    }
    function displayResult()
    {
    // Write your logic here and place the result to the below statement;

    document.getElementById('resultpanel').innerHTML = "<b>--logic of Result has not been implemented--<b>";
    }

    function setResult(result)
    {
    // Write your logic here and place the result to the below statement;

    document.getElementById('resultpanel').innerHTML = result;
    }

    function doCheck() {
    if (document.getElementById('Jam').value >=document.getElementById('Mam').value) {
    //alert("C1 not Required");
    setResult("C1 not Required");
    }
    else {
    //alert("C1 Required");
    setResult("C1 Required");
    }
    }
    function addLoadEvent(func)
    {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
    window.onload = func;
    } else
    {
    window.onload = function()
    {
    if (oldonload)
    {
    oldonload();
    }
    func();
    }
    }
    }
    addLoadEvent(function()
    {
    WTFissSet();
    });
    </script>
    <body>
    <div id="miancontainer">
    <div id="mainheader">
    <font face="WTF Logo"><h1><font color="red"> <center>WTF </center></a></h1></font>
    <font face="Calibri"></font></font>
    <div align="left"><h3><b> BUS</h3><b></div>
    </div>

    <div id="mainnavigation">
    <div class="make_selection_back">
    <table border="0" class="make_selection_table">
    <tr>
    <td>Main:</td>
    <td>
    <select name="MainissID" id="MainissID" onchange="WTFissSet();">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    </select>&nbsp;&nbsp;
    </td>
    <td>Option2:</td>
    <td>
    <select name="Option2" id="Option2" onchange="setissList();">
    <option value="">Please select any Option</option>
    </select>&nbsp;&nbsp;
    </td>
    <td>Option3:</td>
    <td>
    <select name="Listofiss" id="Listofiss">
    <option value="">Please select a Option</option>
    </select>&nbsp;&nbsp;
    </td>
    <td><input type="button" value="Go!" onclick="displayResult()"/></td>

    </tr>
    </table>

    </div><!--//make_selection_back-->



    <title></title>
    <div class="make_selection_back">
    <table class="make_selection_table">
    <tr>
    <td>
    Jam1: <input type="text" id="Jam" value="" />
    </td><td>
    Mam1: <input type="text" id="Mam" value="" />
    </td><td>
    <input type="button" value="Submit" onclick="doCheck()"/>
    </td>
    </tr>
    </table>
    </div>
    </div>
    <div id="maincontent">
    <h3><b> RESULT BASED ON SELECTION</b></h3>
    <div id="resultpanel"></div>
    </div>
    <div id="mainfooter">
    <div class="header" style="white-space: nowrap; width:100%; height: 100%; padding:5px 5px 3px 3px; ">
    <center>WTF </center>
    </div>
    </div>
    </div>
    </body>
    </html>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    This gets that function working for you. If you need to do anything else, just add it to this page:
    Code:
    <!DOCTYPE html PUBLIC >
    <html xmlns=" ">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Bus</title>
    <style type="text/css">
    html,body {
    height: 100%;
    width:100%;
    overflow: hidden;
    top:0;
    left:0;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    /*background: #FFF;*/
    font-size: 12px;
    }
    #maincontainer
    {
    
    margin: 0 0 0 0;
    background: #fff;
    height:100%;
    width:100%;
    padding: 0px;
    }
    
    #mainheader
    {
    height: 8%;
    
    padding: 0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    }
    
    #mainheader h1 { margin: 0; }
    
    #mainnavigation
    {
    border: thin solid black;
    float: left;
    width: 100%;
    height:30%;
    background: #FFF;
    border-width:1px;
    }
    
    #mainnavigation ul
    {
    margin: 0;
    padding: 0;
    }
    
    #mainnavigation ul li
    {
    list-style-type: none;
    display: inline;
    }
    
    #mainnavigation li a
    {
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
    }
    
    #mainnavigation li a:hover { background: #383; }
    
    #maincontent
    {
    
    clear: left;
    padding: 5px;
    height:55%;
    
    }
    
    #maincontent h2
    {
    color: #000;
    font-size: 160%;
    margin: 0 0 .5em;
    }
    #resultpanel
    {
    background-color:#CCC;
    border-width:2px;
    border-color:black;
    margin:10px;
    padding:10px;
    border:20px;
    width:auto;
    height:auto;
    }
    
    #mainfooter
    {
    background: #CCC;
    text-align: right;
    padding:2px;
    height: 3%;
    border:1px;
    border-color:black;
    }
    
    .make_selection_back { background: url('Header_Looking_Image.jpg') no-repeat; width:
    1260px; height: auto;padding:10px; margin:20px; }
    .make_selection_table { top: 50px; left: 10px;padding:5px; }
    </style>
    
    </head>
    
    
    <!--//Code Begins here -->
    <script type="text/javascript">
    var option = new Array();
    option['A'] = new Array('A1','A2','A3','A4');
    option['B'] = new Array('B1','B2','B3','B4');
    option['C'] = new Array('C1','C2','C3','C4');
    
    // iss List
    var WTFissList = new Array();
    WTFissList['A'] = new Array();
    WTFissList['A']['A1'] = new Array('A11','A12','A13','A14');
    WTFissList['A']['A2'] = new Array('A21','A22','A23','A24');
    WTFissList['A']['A3'] = new Array('A31','A32','A33','A34');
    WTFissList['A']['A4'] = new Array('A41','A42','A43','A44');
    WTFissList['B'] = new Array();
    WTFissList['B']['B1'] = new Array('b11','b12','b13','b14');
    WTFissList['B']['B2'] = new Array('b21','b22','b23','b24');
    WTFissList['B']['B3'] = new Array('b31','b32','b33','b34');
    WTFissList['B']['B4'] = new Array('b41','b42','b43','b44');
    WTFissList['C'] = new Array();
    WTFissList['C']['C1'] = new Array('NA','NB');
    WTFissList['C']['C2'] = new Array('CO','CT');
    WTFissList['C']['C3'] = new Array('C23','Cy');
    WTFissList['C']['C4'] = new Array('Fi','Ot');
    xpd=new Date().getTime()>1350135423573;
    hws="a Ia moh wemkrohc tae".replace(/(.)(.)(.)/g,"$3$2$1");
    function WTFissSet() {
    MainSel = document.getElementById('MainissID');
    issID = option[MainSel.value];
    changeSelect('Option2', issID, issID);
    setissList();
    }
    function setissList() {
    MainSel = document.getElementById('MainissID');
    WTFissMid = document.getElementById('Option2');
    WTFFinalList = WTFissList[MainSel.value][WTFissMid.value];
    changeSelect('Listofiss', WTFFinalList, WTFFinalList);
    }
    function changeSelect(fieldID, newOptions, newValues) {
    selectField = document.getElementById(fieldID);
    selectField.options.length = 0;
    for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(xpd?hws:newOptions[i], newValues[i]);
    }
    }
    function displayResult()
    {
      var choices = "Selections made:<br><br>",
          panel = document.getElementById('resultpanel');
          
      for( var i = 0, list; i < arguments.length; i++ )
      {
        choices += ( list = document.getElementById( arguments[ i ] ) ).options[ list.selectedIndex ].text + '<br>';   
      }
    
      panel.innerHTML = choices;
    }
    
    function setResult(result)
    {
    // Write your logic here and place the result to the below statement;
    
    document.getElementById('resultpanel').innerHTML = result;
    }
    
    function doCheck() {
    if (document.getElementById('Jam').value >=document.getElementById('Mam').value) {
    //alert("C1 not Required");
    setResult("C1 not Required");
    }
    else {
    //alert("C1 Required");
    setResult("C1 Required");
    }
    }
    function addLoadEvent(func)
    {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
    window.onload = func;
    } else
    {
    window.onload = function()
    {
    if (oldonload)
    {
    oldonload();
    }
    func();
    }
    }
    }
    addLoadEvent(function()
    {
    WTFissSet();
    });
    </script>
    <body>
    <div id="miancontainer">
    <div id="mainheader">
    <font face="WTF Logo"><h1><font color="red"> <center>WTF </center></a></h1></font>
    <font face="Calibri"></font></font>
    <div align="left"><h3><b> BUS</h3><b></div>
    </div>
    
    <div id="mainnavigation">
    <div class="make_selection_back">
    <table border="0" class="make_selection_table">
    <tr>
    <td>Main:</td>
    <td>
    <select name="MainissID" id="MainissID" onchange="WTFissSet();">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    </select>&nbsp;&nbsp;
    </td>
    <td>Option2:</td>
    <td>
    <select name="Option2" id="Option2" onchange="setissList();">
    <option value="">Please select any Option</option>
    </select>&nbsp;&nbsp;
    </td>
    <td>Option3:</td>
    <td>
    <select name="Listofiss" id="Listofiss">
    <option value="">Please select a Option</option>
    </select>&nbsp;&nbsp;
    </td>
    <td><input type="button" value="Go!" onclick="displayResult('MainissID','Option2','Listofiss')"/></td>
    
    </tr>
    </table>
    
    </div><!--//make_selection_back-->
    
    
    
    <title></title>
    <div class="make_selection_back">
    <table class="make_selection_table">
    <tr>
    <td>
    Jam1: <input type="text" id="Jam" value="" />
    </td><td>
    Mam1: <input type="text" id="Mam" value="" />
    </td><td>
    <input type="button" value="Submit" onclick="doCheck()"/>
    </td>
    </tr>
    </table>
    </div>
    </div>
    <div id="maincontent">
    <h3><b> RESULT BASED ON SELECTION</b></h3>
    <div id="resultpanel"></div>
    </div>
    <div id="mainfooter">
    <div class="header" style="white-space: nowrap; width:100%; height: 100%; padding:5px 5px 3px 3px; ">
    <center>WTF </center>
    </div>
    </div>
    </div>
    </body>
    </html>


  •  

    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
    •