Page 1 of 3 123 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0

    Form does not validate in my selection box


    Code:
    <html>
    <head>
    <title>PDOC-Handoff</title>
    <script type='text/javascript'>
    var gwaping = [];
    var mathematics = ["basic_math","intermidiate_math","advance_math"];
     
     var b_math = ["addition","subtraction","division","multiplication"];
     <!--var i_math = ["fraction","pi","roman_numerals","integers"];
     <!--var i_math = ["algebra","calculus","hexa","analytical"];
     
     var compo = [];
     gwaping ["basic_math"] = b_math
     <!--gwaping ["intermidiate_math"] = i_math
     <!--gwaping ["advance_math"] = a_math
     
     
    
    gwaping["startList"] = ["1-Math","2-Science", "3-Politics", "4-Phisical Ed", "5-Homeroom"]
    gwaping["1-Math"] = mathematics
    gwaping["2-Science"] = mathematics
    gwaping["3-Politics"] = mathematics
    gwaping["4-Phisical Ed"] = mathematics
    gwaping["5-Homeroom"] = mathematics
    gwaping["addition"] = mathematics
    
    
    
    var nLists = 4; // number of select lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms['pogi']['List'+i].length = 1;
    document.forms['pogi']['List'+i].selectedIndex = 0;
    }
    var nCat = gwaping[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function getValue(L4, L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
    }
    
    function init() {
    fillSelect('startList',document.forms['pogi']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    </script>
    </head>
    </script>
    <body>
    <form name="pogi" action="">
    <table border="1">
      <tr>
        <td>
          <p>Select Subject</p>
        </td>
        <td><p>Select topic 1</p></td>
    	<td><p>Select topic 2</p></td>
    	<td><p>Select topic 3</p></td>
    	</tr>
    <tr>
    <td>
    
    
    
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Select item</option>
    </select>
    
    </td>
    
    
    
    <td>
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Select item</option>
    </select>
    
    </td>
    
    
    
    <td>
    
    <select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
    <option selected >Select item</option>
    </select>
    
    </td>
    
    <td>
    <select name='List4' size="2"  multiple="yes" onchange="getValue(this.form['List4'].value, this.form['List3'].value, 
    this.form['List2'].value, this.form['List1'].value)">
    <option selected >Select item(s)</option>
    </select>
    
    </td>
    </tr>
    </form>
    </body>
    </html>
    Last edited by Kravvitz; November 26th, 2012 at 02:52 PM. Reason: added [code] tags
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Hi,

    this isn't "The JavaScript/HTML debugging service". If you have a concrete question and show us what you've done and which errors you got, we'll help you. And use [ CODE ] tags, please.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0
    Hi,

    Sorry if this is posted in wrong location, I admit this is my 1st time to use a forum, can you help me guide on where should I place this and use the code tags
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Originally Posted by javbegginer
    Sorry if this is posted in wrong location,
    No, I meant that we're not a debugging machine where you put your faulty JavaScript in and get the correct version back.

    What's your concrete problem? What have you tried? What error message did you get?



    Originally Posted by javbegginer
    I admit this is my 1st time to use a forum, can you help me guide on where should I place this and use the code tags
    There's a "#" button above the text area when you write or edit a posting. Mark your code and then click the button to wrap it in [ CODE ] tags.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0
    Thanks, actually I only copied this code from some sites and did some research on understanding the java as well, going to my problem, the code really validates on what I choose on the selection boxes, the only only thing is the last selection box :

    Code:
    <select name='List4' size="2" multiple="yes" onchange="getValue(this.form['List4'].value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value)"> <option selected >Select item(s)</option> </select>
    when I choose multiple items it didn't validate all, only one.
    you can also try it
    <Math> - <basic_math> - <addition> +<2 items>
  10. #6
  11. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    This has nothing to do with validation (checking the correctness of user input). What you want is get all selected options of a selection box.

    The solution to this is to go through all options and collect the selected ones in an array:

    Code:
    function getAllSelections(box) {
    	var options = box.options;
    	var selectedOptions = [];
    	for (var i = 0; i < options.length; i++)
    		if (options[i].selected)
    			selectedOptions[i] = options[i].value;
    	return selectedOptions;
    }
    This function takes a "select" element and returns the values of all selected "option" elements as an array.

    Of course you'll also have to change your getValue() function to also work with arrays -- or you make a string out of the array before you pass it to getValue().
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0
    Hi Jacques
    Thank you for your help, I know this is the best solution for my concern but I've trying to insert this function on the code but unfortunately I cant make it work. can you help me out on these?
  14. #8
  15. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    You don't really have to change anything in your current code. Just replace
    Code:
    this.form['List4'].value
    with
    Code:
    getAllSelections(this.form['List4'])
    in onchange="getValue(...)"

    In your alert(), the array will appear as a comma separated list of its elements.

    Comments on this post

    • javbegginer agrees
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, javbegginer.

    By the way, using checking the appName is not very good practice. Object detection should be used instead. Also attachEvent does not have a 3rd argument like addEventListener does.
    Code:
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    would become
    Code:
    window.addEventListener ? addEventListener('load', init, false) : (window.attachEvent ? attachEvent('onload', init) : null);
    P.S. It would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.

    Comments on this post

    • javbegginer agrees
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, javbegginer.

    By the way, using checking the appName is not very good practice. Object detection should be used instead. Also attachEvent does not have a 3rd argument like addEventListener does.
    Code:
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    would become
    Code:
    window.addEventListener ? addEventListener('load', init, false) : (window.attachEvent ? attachEvent('onload', init) : null);
    P.S. It would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.
    Hi Kravvitz,
    Thank you for your advise, I'll do take a note of that. It feels good to know the proper usage of java on my progressive learning
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0
    Originally Posted by Jacques1
    You don't really have to change anything in your current code. Just replace
    Code:
    this.form['List4'].value
    with
    Code:
    getAllSelections(this.form['List4'])
    in onchange="getValue(...)"

    In your alert(), the array will appear as a comma separated list of its elements.
    Jacques1

    Thank you very much! It work well on your advice, I add the lines that you suggested on the code with this:
    Code:
     
    <html>
    <head>
    <title>PDOC-Handoff</title>
    <script type='text/javascript'>
    var gwaping = [];
    var mathematics = ["basic_math","intermidiate_math","advance_math"];
     
     var b_math = ["addition","subtraction","division","multiplication"];
     <!--var i_math = ["fraction","pi","roman_numerals","integers"];
     <!--var i_math = ["algebra","calculus","hexa","analytical"];
     
     var compo = [];
     gwaping ["basic_math"] = b_math
     <!--gwaping ["intermidiate_math"] = i_math
     <!--gwaping ["advance_math"] = a_math
     
     
    
    gwaping["startList"] = ["1-Math","2-Science", "3-Politics", "4-Phisical Ed", "5-Homeroom"]
    gwaping["1-Math"] = mathematics
    gwaping["2-Science"] = mathematics
    gwaping["3-Politics"] = mathematics
    gwaping["4-Phisical Ed"] = mathematics
    gwaping["5-Homeroom"] = mathematics
    gwaping["addition"] = ["1+1","2+2","3+3"]
    gwaping["subtraction"] = ["1-1","2-2","3-3"]
    gwaping["division"] = ["1/1","2/2","3/3"]
    gwaping["multiplication"] = ["1*1","2*2","3*3"]
    
    
    var nLists = 4; // number of select lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms['pogi']['List'+i].length = 1;
    document.forms['pogi']['List'+i].selectedIndex = 0;
    }
    var nCat = gwaping[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function getValue(L4, L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
    }
    //function getAllSelections(L4, L3, L2, L1) {
    	//var options = box.options;
    	//var selectedOptions = [];
    	//for (var i = 0; i < options.length; i++)
    		//if (options[i].selected)
    			//selectedOptions[i] = options[i].value;
    	//return selectedOptions;
    	//alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
    //}
    
    function init() {
    fillSelect('startList',document.forms['pogi']['List1'])
    }
    
    function getAllSelections(L4) {
    	var options = L4.options;
    	var selectedOptions = [];
    	for (var i = 0; i < options.length; i++)
    		if (options[i].selected)
    			selectedOptions[i] = options[i].value;
    	return selectedOptions;
    }
    
    window.addEventListener ? addEventListener('load', init, false) : (window.attachEvent ? attachEvent('onload', init) : null);
    </script>
    </head>
    </script>
    <body>
    <form name="pogi" action="">
    <table border="1">
      <tr>
        <td>
          <p>Select Subject</p>
        </td>
        <td><p>Select topic 1</p></td>
    	<td><p>Select topic 2</p></td>
    	<td><p>Select topic 3</p></td>
    	</tr>
    <tr>
    <td>
    
    
    
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Select item</option>
    </select>
    
    </td>
    
    
    
    <td>
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Select item</option>
    </select>
    
    </td>
    
    
    
    <td>
    
    <select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
    <option selected >Select item</option>
    </select>
    
    </td>
    
    <td>
    <select name='List4' size="2" multiple="yes" onchange="getValue(getAllSelections(this.form['List4']), this.form['List3'].value, 
    this.form['List2'].value, this.form['List1'].value)">
    <!--<option selected >Select item(s)</option>-->
    </select>
    
    </td>
    </tr>
    </form>	
    </body>
    </html>
    One more thing (sorry to bug you again) the getvalue on my alert respond with a comma ď,Ē even I select one item:
    Code:
    Your selection was:-
                1-Math
                Basic_math
                Addition
                ,1+1
    Which part should I edit to make the alert respond like this:
    Code:
    Your selection was:-
    1-Math Basic_math Addition 1+1
    Iíve tried to replace the some line but it didnít work using the array thing, the one I saw online using this:
    Code:
    alert("Your selection was:- \n" + L1.option + "\n" + L2.option + "\n" + L3.option + "\n" + L4.option);
    }
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Originally Posted by javbegginer
    It feels good to know the proper usage of java on my progressive learning
    Java and JavaScript are two rather different languages. The latter was named after the former but they don't have very much in common.

    Comments on this post

    • javbegginer agrees : yeah, Ill do remember that - thanks!
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Originally Posted by javbegginer
    Which part should I edit to make the alert respond like this:
    Code:
    Your selection was:-
    1-Math Basic_math Addition 1+1
    In the getAllSelections() function, replace
    Code:
    selectedOptions[i] = options[i].value;
    with
    Code:
    selectedOptions.push(options[i].value);
    Otherwise the indices of the selectedOptions array won't be correct, causing the additional commas.

    Comments on this post

    • javbegginer agrees : Thanks, it works sweetly!
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0
    Originally Posted by Jacques1
    In the getAllSelections() function, replace
    Code:
    selectedOptions[i] = options[i].value;
    with
    Code:
    selectedOptions.push(options[i].value);
    Otherwise the indices of the selectedOptions array won't be correct, causing the additional commas.
    Sweetness, thank you for your solutions! I also did tried to make the response result with spaces using this in the code:
    Code:
    function getValue(L4, L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + " " + " " + L2 + " " + L3 + " " + L4);
    }
    got the result that I wanted for

    Code:
    Your selection was:-
    1-Math Basic_math Addition 1+1
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0
    Hi,

    Its me again, well I made a change on the code w/ almost the same idea above. I got the same problem again that when I select Math and do a multiple selection on the second selectionbox the alert only reports 1 item.

    sample:
    slection is: Math + subtraction, addidtion, multiplication
    alert should be: Math Request for subtraction, addition, multiplication

    this is the actual code:
    Code:
    <html>
    <head>
    <title>OHAB School</title>
    <script type='text/javascript'>
    
    function toggle(tbl_show,total_tbl)
         {
             for (i=1;i<total_tbl+1;i++)
             {
            eval("document.getElementById(\"thetbl"+i+"\").style.display='none'");
            }
             if (tbl_show!="") {     
                 obj=document.getElementById("thetbl"+tbl_show);
                 obj.style.display='';
                 }
         }
    
    function updatehosts(selectedchostgroup){
    hostslist.options.length=0
    if (selectedhostsgroup>0){
    for (i=0; i<hosts[selectedhostsgroup].length; i++)
    hostslist.options[hostslist.options.length]=new Option(hosts[selectedhostgroup][i].split("|")[0], hosts[selectedhostgroup][i].split("|")[1])
    }
    }
    <!-- Math Button -->
    function enable_bld_button(){    
       document.pogi.bld_button.disabled=false 
    }
    
    function MathAlert() {
    alert("Math request for "+ 
               document.getElementById("build_lst").value);
          }
    
    window.addEventListener ? addEventListener('load', init, false) : (window.attachEvent ? attachEvent('onload', init) : null);
    </script>
    </head>
    <body >
    <form name="pogi">
    <table border="1">
      <tr>
        <td width="50%">
          <p>Select task</p>
        </td>
        <td>
         <select name="select_task" onchange="toggle(this.value,2)"> 
      <option value="">---SELECT ONE---</option>
      <option value="1">1 - Math</option>
      <option value="2">2 - Math with Science</option>
      <option value="3">3 - Homeroom</option>
      <option value="4">4 - P.E.</option>
      <option value="5">5 - Religion</option>
      <option value="6">6 - Others</option>
      </select>
        </td>
    </tr>
    
    <table border="1" id="thetbl1" style="display:none">
    <tr>
       <td width="50%" align='center'><p>Select a component</p></td>
      <td ><select size="3" name="build_list" multiple="yes" id="build_lst" onchange="enable_bld_button()"> 
      <option>Select Item</option>
      <option>Addition</option>
      <option>Subtraction</option>
      <option>Multiplication</option>
      <option>Division</option> 
      </select></td>
       </td>   
    </tr>
       <tr>
       <td align='center'><p>Exceute</p></td>
       <td align='center'><input type='button' name="bld_button" disabled value='COMMIT' onclick="MathAlert()")></td>
       </tr>
    </table>
    
    </br>
    <table border="1" id="thetbl2" style="display:none">
    </tr>
    <tr>
       <td><p>Select a Topoc1</p></td>
       <td><p>Select a Topic2</p></td>
       <td><p>Select a Topic3</p></td>   
    </tr>
    <tr>
      <td ><select name="selectionField" multiple="yes" > 
      <option>Physics</option>
      <option>Chemistry</option>
      <option>Anatomy</option>
      
      </select></td>
       <td>
      <select size="3" name="subs" onChange="updatehosts(this.selectedIndex)" style="width: 150px"> 
      <option value="">-Select a Subject-</option>
      <option value="chem01">Chemicals</option>
      <option value="subs01">Substance</option>
      <option value="lab01">Lab</option>
       </select> 
      </td>
      <td ><select select name="hosts" size="3" style="width: 150px"> 
      </select>
      </td>
      </tr>
    </table>
       </table>     
    <table border="1" id="thetbl2" style="display:none">
       <tr >
       <td width="50%"><p>Select a carrier</p></td>
       <td><p>Select a component(s)</p></td>
    </tr>
    </table>
    <form>
    </body>
    </html>
    I've done tweaking on the script with something like this:
    Code:
    function getAllSelections("thetbl1") {
    	var options = thetbl1".options;
    	var selectedOptions = [];
    	for (var i = 0; i < options.length; i++)
    		if (options[i].selected)
    			selectedOptions.push(options[i].value);
    	return selectedOptions;
    }
    but non of them works
Page 1 of 3 123 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo