www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: elements problem maybe

Hybrid View

  1. #1
    Join Date
    Oct 2009
    Posts
    26

    elements problem maybe

    Hi,
    I have the following form
    The first table they have to pick one team. Their reserve team.
    The second ckeckbox range they can pick 3 teams.

    What I would like is an error check so if they select the same
    team in the checkbox table again, an alert box says ('Your have picked this team as a reserve team')

    Maybe along the lines of adding [<INPUT type=checkbox value="Belper Town" name="south1" onclick "validatecheckbox();">Belper Town<BR>]

    onclick "validatecheckbox()"; but I can't sort out the elements needed.

    Any ideas please or am I on the wrong track?

    Here's a shortened version of my full form.

    <form name="form"
    <div id="divrs">
    <select name="ReserveSouth">
    <option value="Belper Town">Belper Town</option>
    <option value="Brigg Town">Brigg Town</option>
    <option value="Cammell Laird">Cammell Laird</option>
    <option value="Carlton Town">Carlton Town</option>
    <option value="Chasetown">Chasetown</option>
    <option value="Glapwell">Glapwell</option>
    <option value="Goole AFC">Goole AFC</option>
    <option value="Grantham Town">Grantham Town</option>
    <option value="Kidsgrove Athletic">Kidsgrove Athletic</option>
    <option value="Leek Town">Leek Town</option>
    <option value="Lincoln United">Lincoln United</option>
    <option value="Loughborough Dynamo">Loughborough Dynamo</option>
    <option value="Market Drayton Town">Market Drayton Town</option>
    <option value="Mickleover Sports">Mickleover Sports</option>
    <option value="Mickleover Sports">Quorn</option>
    <option value="Rushall Olympic">Rushall Olympic</option>
    <option value="Sheffield FC">Sheffield FC</option>
    <option value="Shepshed Dynamo">Shepshed Dynamo</option>
    <option value="Spalding United">Spalding United</option>
    <option value="Stamford">Stamford</option>
    <option value="Willenhall Town">Willenhall Town</option>
    <option value="Witton Albion">Witton Albion</option>
    </select>
    </div>

    <div id="div1">
    <INPUT type=checkbox value="Belper Town" name="south1">Belper Town<BR>
    <INPUT type=checkbox value="Brigg Town" name="south2">Brigg Town<BR>
    <INPUT type=checkbox value="Cammell Laird" name="south3">Cammell Laird<BR>
    <INPUT type=checkbox value="Carlton Town" name="south4">Carlton Town<BR>
    <INPUT type=checkbox value="Ch-tba" name="south5">Ch-tba<BR>
    <INPUT type=checkbox value="Glapwell" name="south6">Glapwell<BR>
    <INPUT type=checkbox value="Goole AFC" name="south7">Goole AFC<BR>
    <INPUT type=checkbox value="Grantham Town" name="south8">Grantham Town<BR>
    <INPUT type=checkbox value="Kidsgrove Athletic" name="south9">Kidsgrove Athletic<BR>
    <INPUT type=checkbox value="Leek Town" name="south10">Leek Town<BR>
    <INPUT type=checkbox value="Lincoln United" name="south11">Lincoln United<BR>
    <INPUT type=checkbox value="Loughborough Dynamo" name="south12">Loughborough Dynamo<BR>
    <INPUT type=checkbox value="Market Drayton Town" name="south13">Market Drayton Town<BR>
    <INPUT type=checkbox value="Mit-tba" name="south14">Mit-tba<BR>
    <INPUT type=checkbox value="Quorn" name="south15">Quorn<BR>
    <INPUT type=checkbox value="Rushall Olympic" name="south16">Rushall Olympic<BR>
    <INPUT type=checkbox value="Sheffield FC" name="south17">Sheffield FC<BR>
    <INPUT type=checkbox value="Shepshed Dynamo" name="south18">Shepshed Dynamo<BR>
    <INPUT type=checkbox value="Spalding United" name="south19">Spalding United<BR>
    <INPUT type=checkbox value="Stamford" name="south20">Stamford<BR>
    <INPUT type=checkbox value="Willenhall Town" name="south21">Willenhall Town<BR>
    <INPUT type=checkbox value="Witton Albion" name="south22">Witton Albion<BR>
    </div>
    </form>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Maybe use this as a template.

    It

    1) restricts the maximum team selections from the checkboxes to 3

    2) checks if the reserve team selection = any of the checkbox teams

    3) if the user changes the reserve team after selecting up to 3 checkbox teams, it checks if the new reserve team is a selected checkbox team


    The order of the teams in both lists can be in any order, but make sure the corresponding values for each team in each list are the same.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
    <!--

    //helper function to get elements by class name
    function getElementsByClassName(oElmstrTagNamestrClassName)
    {
        var 
    arrElements = (strTagName == "*" && oElm.all)? oElm.all oElm.getElementsByTagName(strTagName);
        var 
    arrReturnElements = new Array();
        
    strClassName strClassName.replace(/\-/g"\\-");
        var 
    oRegExp = new RegExp("(^|\\s)" strClassName "(\\s|$)");
        var 
    oElement;
        for(var 
    i=0i<arrElements.lengthi++)
        {
            
    oElement arrElements[i];
            if(
    oRegExp.test(oElement.className))
            {
                
    arrReturnElements.push(oElement);
            }
        }
        return (
    arrReturnElements)
    }

    //helper function
    function numSelectionsIsOk() {
    var 
    count 0;
    var 
    elems getElementsByClassName(document"input""teams")
    for(var 
    i in elems) {
       if(
    elems[i].checkedcount count 1;
    }
    if(
    count <= maxSelections) {
       return 
    true;
    } else {
       return 
    false;
    }
    }
    //---------------------------------------------------------------------------------
     
    var maxSelections 3;

    //function to check validity of checkbox selection
    function valdateTeam(thisTeam,elemId) {
        
    //check if a reserve team has been selected
        
    if(document.getElementById("selResTeam").selectedIndex == 0) {
            
    document.getElementById(elemId).checked false;
            
    alert("Select a Reserve team first");
        }
        
        
    //check number of team selections
        
    if(numSelectionsIsOk()) {
            var 
    resTeam document.getElementById("selResTeam").options[document.getElementById("selResTeam").selectedIndex].value;
            if(
    thisTeam == resTeam) {
                
    document.getElementById(elemId).checked false;
                
    alert("You have selected this team - "+thisTeam+" - as your Reserve Team.");
            }
        } else {
            
    document.getElementById(elemId).checked false;
            
    alert("You can select a maximum of "+maxSelections+" teams.");
        }
    }
     
    //function to check validity of select list selection
    function checkResTeam(selElem) {
        var 
    selTeam selElem.options[selElem.selectedIndex].value;
        
    //get the checkbox teams
        
    chkBoxTeams getElementsByClassName(document"input""teams");
        
    //check if selTeam is a checked checkbox team
        
    for(var i in chkBoxTeams) {
            if(
    chkBoxTeams[i].checked && chkBoxTeams[i].value == selTeam) {
                
    selElem.selectedIndex 0
                
    alert("This Reserve Team - "+selTeam+" - is one of your "+maxSelections+" teams below");
            }
        }   
    }
     
    //-->
    </script>
    </head>
    <body>
    </body>
    <form id="myForm" action="#" method="post">
    <div id="divrs"> 
    <select name="ReserveSouth" id="selResTeam" onchange="checkResTeam(this);"> 
    <option selected="selected" value="">Select a Reserve Team</option>
    <option value="Belper Town">Belper Town</option> 
    <option value="Brigg Town">Brigg Town</option> 
    <option value="Cammell Laird">Cammell Laird</option> 
    <option value="Carlton Town">Carlton Town</option> 
    <option value="Chasetown">Chasetown</option> 
    <option value="Glapwell">Glapwell</option> 
    <option value="Goole AFC">Goole AFC</option> 
    <option value="Grantham Town">Grantham Town</option> 
    <option value="Kidsgrove Athletic">Kidsgrove Athletic</option> 
    <option value="Leek Town">Leek Town</option> 
    <option value="Lincoln United">Lincoln United</option> 
    <option value="Loughborough Dynamo">Loughborough Dynamo</option> 
    <option value="Market Drayton Town">Market Drayton Town</option> 
    <option value="Mickleover Sports">Mickleover Sports</option> 
    <option value="Mickleover Sports">Quorn</option> 
    <option value="Rushall Olympic">Rushall Olympic</option> 
    <option value="Sheffield FC">Sheffield FC</option> 
    <option value="Shepshed Dynamo">Shepshed Dynamo</option> 
    <option value="Spalding United">Spalding United</option> 
    <option value="Stamford">Stamford</option> 
    <option value="Willenhall Town">Willenhall Town</option> 
    <option value="Witton Albion">Witton Albion</option> 
    </select> 
    </div>
    <div id="div1"> 
    <INPUT class="teams" name="chkTeam[]" id="team1" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Belper Town" name="south1">Belper Town<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team2" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Brigg Town" name="south2">Brigg Town<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team3" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Cammell Laird" name="south3">Cammell Laird<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team4" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Carlton Town" name="south4">Carlton Town<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team5" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Ch-tba" name="south5">Ch-tba<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team6" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Glapwell" name="south6">Glapwell<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team7" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Goole AFC" name="south7">Goole AFC<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team8" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Grantham Town" name="south8">Grantham Town<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team9" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Kidsgrove Athletic" name="south9">Kidsgrove Athletic<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team10" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Leek Town" name="south10">Leek Town<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team11" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Lincoln United" name="south11">Lincoln United<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team12" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Loughborough Dynamo" name="south12">Loughborough Dynamo<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team13" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Market Drayton Town" name="south13">Market Drayton Town<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team14" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Mit-tba" name="south14">Mit-tba<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team15" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Quorn" name="south15">Quorn<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team16" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Rushall Olympic" name="south16">Rushall Olympic<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team17" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Sheffield FC" name="south17">Sheffield FC<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team18" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Shepshed Dynamo" name="south18">Shepshed Dynamo<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team19" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Spalding United" name="south19">Spalding United<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team20" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Stamford" name="south20">Stamford<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team21" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Willenhall Town" name="south21">Willenhall Town<BR> 
    <INPUT class="teams" name="chkTeam[]" id="team22" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Witton Albion" name="south22">Witton Albion<BR> 
    </div> 
    </form>
    </html> 
    Last edited by tirna; 05-16-2010 at 07:33 PM.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb Another option ...

    An alternate solution ...
    Code:
    <html>
    <head>
    <title>Team Picks</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=229730
    
    var Items = ["Belper Town","Brigg Town","Cammell Laird","Carlton Town","Chasetown",
    			"Glapwell","Goole AFC","Grantham Town","Kidsgrove Athletic","Leek Town",
    			"Lincoln United","Loughborough Dynamo","Market Drayton Town","Mickleover Sports",
    			"Mickleover Sports","Rushall Olympic","Sheffield FC","Shepshed Dynamo",
    			"Spalding United","Stamford","Willenhall Town","Witton Albion"	// No comma after last entry
    ];
    function Populate(sel,GrpItems){
      var tmp = [];
      var sel = document.getElementById(sel);
      sel.options.length=0;
      sel.options[0]=new Option('[SELECT]','',true,true);
      for (var x=0; x<GrpItems.length; x++) {
        sel.options[sel.options.length]=new Option(GrpItems[x],GrpItems[x],true,true);
      }
      sel.selectedIndex=0;
    }
    function ShowRest(indx) {
      var str = '';
      for (var i=0; i<Items.length; i++) {
    	if (i != (indx-1)) {
          str += '<INPUT type="checkbox" value="'+Items[i]+'" name="south1">'+Items[i]+'<BR>';
        }
      }	
      document.getElementById('div1').innerHTML = str;
    }
    
    onload = function() {
      Populate('ReserveSouth',Items);
    }
    
    </script>
    </head>
    <body>
    <form name="form" onsubmit="return false">
    <div id="divrs">
      Select Reserve Team: 
      <select name="ReserveSouth" id="ReserveSouth" onchange="ShowRest(this.selectedIndex)"></select>
    </div>
    
    Choose 3 more teams: 
    <div id="div1">
    </div>
    </form>
    </body>
    </html>

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by JMRKER View Post
    An alternate solution ...
    Just some observations:

    1) I can select more than 3 teams from the checkboxes. My interpretation of the OP's post was that the maximum number of team selections should be 3.

    2) If the user changes their reserve team selection after selecting their up to 3 teams, their up to 3 selections are lost and they have to reselect them.

    In order to maintain user friendliness, imo it would be more user friendly to leave the up to 3 teams selected and then simply check if the new selected reserve team is 1 of the up to 3 'checked' teams.

    Anyway, just some food for thought.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Arrow

    Quote Originally Posted by tirna View Post
    Just some observations:

    1) I can select more than 3 teams from the checkboxes. My interpretation of the OP's post was that the maximum number of team selections should be 3.

    2) If the user changes their reserve team selection after selecting their up to 3 teams, their up to 3 selections are lost and they have to reselect them.

    In order to maintain user friendliness, imo it would be more user friendly to leave the up to 3 teams selected and then simply check if the new selected reserve team is 1 of the up to 3 'checked' teams.

    Anyway, just some food for thought.
    All good points that could be coded around if need be.
    I was just trying to keep as close to OP's code as possible.
    No sense for me to alter more unless OP cannot do it themselves.

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    no problem

    The OP could "bolt on" the additional functions, with a couple of minor tweaks, from my script if they choose to run with yours.

  7. #7
    Join Date
    Oct 2009
    Posts
    26
    Two excellent variations a solution. Will use one of them, depending which fits my original form the better, as they both have different merits. Hope someone else can use a similar solution too. Well done to you both.

  8. #8
    Join Date
    Oct 2009
    Posts
    26
    Now then a snag with TIRNA way which I've tried first.
    Form entry is fine but my form processor returns the following with no info for the selected teams in the south league as it did before.

    I need this data i.e
    south3: Cammell Laird
    south5: Chasetown
    south22: Witton Albion


    but get only this...

    the (chkTeam: Array) bit I can get around.

    ReserveSouth: Belper Town
    ReservePremier: Ashton United
    ReserveNorth: AFC Fylde
    chkTeam: Array

  9. #9
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by peterfc2 View Post
    Now then a snag with TIRNA way which I've tried first.
    Form entry is fine but my form processor returns the following with no info for the selected teams in the south league as it did before.
    You didn't post any details at all in your original post regarding how the form data was going to be processed.

    The code I posted simply meets the specifications in your original post.

    If you need help with processing the form, maybe post your form processing code and what your required outputs are after processing.

    btw - I don't normally click posted links in forums like this for obvious security reasons.

  10. #10
    Join Date
    Mar 2010
    Posts
    2,803

    Lightbulb just a thought

    I suspect the name attribute in your <input> is incorrect.

    In the code I posted earlier I made an assumption and used this.

    Code:
     
    <INPUT class="teams" name="chkTeam[]" id="team1" onclick="valdateTeam(this.value,this.id);" type=checkbox value="Belper Town"  />Belper Town<br />
    You need to substitute 'chkTeam' with whatever name your form data processing script expects and you must have [] at the end of your name as I have above since you are passing an array of checkboxes and not just a single checkbox to your processing script.

    If you need further info on how html forms and <input> work, maybe have a look at the w3schools tute at:

    http://www.w3schools.com/html/html_forms.asp

    Unless you post complete form and form processing code then I cannot help much more.
    Last edited by tirna; 05-17-2010 at 09:03 PM.

  11. #11
    Join Date
    Oct 2009
    Posts
    26
    jmrker also hits a snag on processing too.

    ReserveSouth: Belper Town
    ReservePremier: Ashton United
    ReserveNorth: AFC Fylde
    south1: Carlton Town

    forms work ok but data sent back to me from the form is incomplete.

    is this the line thats wrong please
    str += '<INPUT type="checkbox" value="'+Items[i]+'" name="south1">'+Items[i]+'<BR>';
    Last edited by peterfc2; 05-17-2010 at 12:21 PM.

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Question More information about the problem please ...

    Quote Originally Posted by peterfc2 View Post
    jmrker also hits a snag on processing too.

    ReserveSouth: Belper Town
    ReservePremier: Ashton United
    ReserveNorth: AFC Fylde
    south1: Carlton Town

    forms work ok but data sent back to me from the form is incomplete.
    I don't understand the problem.
    Will need to see the code you are using as the code I posted did not contain any actions/methods for the <form>
    Possibly supply a link?

  13. #13
    Join Date
    Oct 2009
    Posts
    26

    try this


  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Question

    Quote Originally Posted by peterfc2 View Post
    jmrker also hits a snag on processing too.

    ReserveSouth: Belper Town
    ReservePremier: Ashton United
    ReserveNorth: AFC Fylde
    south1: Carlton Town

    forms work ok but data sent back to me from the form is incomplete.

    is this the line thats wrong please
    str += '<INPUT type="checkbox" value="'+Items[i]+'" name="south1">'+Items[i]+'<BR>';
    I'm still confused.

    What is being sent and what is incomplete?
    What do you think is wrong with the <input...> line?

    Your link to your page has 3 columns of selections, but only the first uses part of the code I provided.
    Is the problem in that section or one of the other two?
    Are you trying to get the same actions to occur for all 3 columns?

    Can you give a little more description as to what should happen
    when you select a particular combination of options vs. what does happen?

  15. #15
    Join Date
    Oct 2009
    Posts
    26
    function ShowRest(indx) {
    var str = '';
    for (var i=0; i<Items.length; i++) {
    if (i != (indx-1)) {
    str += '<INPUT type="checkbox" value="'+Items[i]+'" name="south1">'+Items[i]+'<BR>';
    }
    }
    document.getElementById('div1').innerHTML = str;
    }



    name="south1" does this code change it to name="south2", name="south3" etc.?

Thread Information

Users Browsing this Thread

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

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