apply function to form elements

firepages

06-28-2012, 01:12 AM

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

<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

Old Pedant

06-28-2012, 01:59 AM

Not hard at all.

<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>

Old Pedant

06-28-2012, 02:00 AM

firepages

06-28-2012, 02:47 AM

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

(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!

Old Pedant

06-28-2012, 02:56 AM

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] ]