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 5 of 5
  1. #1
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,040
    Thanks
    10
    Thanked 92 Times in 90 Posts

    apply function to form elements

    I don't even know how to ask/title the question

    I have a whole load of date and time form fields generated auto from php, php creates them and auto-selects them etc.
    they are all preceded by a checkbox so

    Code:
    <input type="checkbox" name="_e_monthly[1]' id="_e_monthly[1]" value="1"> 
    <select id="_e_monthly_md_1">...all the options</select> 
    <select id="_e_monthly_ts_1">...all the options</select>
    <select id="_e_monthly_tf_1">...all the options</select>
    ...
    <input type="checkbox" name="_e_monthly[2]' id="_e_monthly[2]" value="1"> 
    <select id="_e_monthly_md_2">...all the options</select> 
    <select id="_e_monthly_ts_2">...all the options</select>
    <select id="_e_monthly_tf_2">...all the options</select>
    now I can add onchange="blah()" to all of these checkboxes, (basically this wil disable the selects unless the checkbox is active)

    but the HTML output is already massive, there are 12 months with day of month and start and finish times AND another set with weekly start and finish times.

    so basically I want javascript that says .. look for all e_monthly[] checkboxes , get the [id] and apply onchange=blah(id) to all found, from that the rest I can manage ? any help appreciated
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Not hard at all.
    Code:
    <html>
    <body>
    <form id="theForm">
    <input type="checkbox" name="_e_monthly[1]" value="1"> 
    <select name="_e_monthly_md_1"><option>ONE</option><option>TWO</option></select> 
    <select name="_e_monthly_ts_1"><option>ONE</option><option>TWO</option></select>
    <select name="_e_monthly_tf_1"><option>ONE</option><option>TWO</option></select>
    <br/>
    <input type="checkbox" name="_e_monthly[2]" value="1"> 
    <select name="_e_monthly_md_2"><option>ONE</option><option>TWO</option></select> 
    <select name="_e_monthly_ts_2"><option>ONE</option><option>TWO</option></select>
    <select name="_e_monthly_tf_2"><option>ONE</option><option>TWO</option></select>
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    for ( var e = 0; e < form.elements.length; ++e )
    {
        var elem = form.elements[e];
        var enBase = elem.name.substring(0,11);
        if (    elem.tagName == "INPUT" 
             && elem.type == "checkbox" 
             && enBase == "_e_monthly[" )
        {
            elem.onclick = monthlyClick;
        }
        else if (    elem.tagName == "SELECT" 
                  && enBase == "_e_monthly_" )
        {
        
            elem.disabled = true;
        }
    }
    function monthlyClick( )
    {
        var form = this.form;
        var cbname = this.name;
        var cbnum = cbname.replace(/[^\d]/g,"");
        var disable = ! this.checked;
        form["_e_monthly_md_" + cbnum].disabled = disable;
        form["_e_monthly_ts_" + cbnum].disabled = disable;
        form["_e_monthly_tf_" + cbnum].disabled = disable;
    }
    </script>
    </body>
    </html>
    Last edited by Old Pedant; 06-28-2012 at 02:01 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    firepages (06-28-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    But do *NOT* use ID's. What for???

    Any element with only an ID will *NOT* be sent back to the next PHP page.

    Elements must have names or their values will never be sent on when the <form> is submitted.

    (And not only that, as you can probably see it makes the coding a bit simpler.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,040
    Thanks
    10
    Thanked 92 Times in 90 Posts
    Quote Originally Posted by Old Pedant View Post
    But do *NOT* use ID's. What for???

    Any element with only an ID will *NOT* be sent back to the next PHP page.

    Elements must have names or their values will never be sent on when the <form> is submitted.
    I kinda know about needing the name for the data to get sent

    I use both names and id's but for brevity I just posted what I thought were the relevant bits since I am used to using getElementById() to access page elements

    Quote Originally Posted by Old Pedant View Post
    (And not only that, as you can probably see it makes the coding a bit simpler.)
    fair enough I am used to using both id and name but if I don't have to and can cut down on the size of the generated HTML then thats more than fine with me, in fact thats the reason for the post in the first place.

    code looks cool I will plug it in and see how it goes, cheers!
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If you think about it, it's the diff between document.getElementById("xxx") and, assuming your first do var form = document.getElementById("theForm");, using form.xxx.

    Of course, if you are using PHP element names that need the square brackets, then you have to do form["xxx[]"], but even that's less code than document.getElementById.

    [Yes, yes...I now you can do $ = document.getElementById; and then do $("xxx"). Fine. You could as well do $ = document.forms[0] ]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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