cforms II User Forum

Registration is currently disabled.
Guest

FAQs

Login form protected by Login LockDown.


Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
Using Javascript with cforms
August 12, 2008
11:13 am
Rob
Guest

Please replace the ??? with your data!


Hi Oliver

Lovin the plugin!

Quick question. I have some javascript that I want to use to change a hidden field 'desc' when check box=true

I cant work out where I actually put my code to affect the 'desc' field if checkbox=true

Do I save JS as a file and call it? Can I paste it into the field set somewhere?

Any help appreciated

Rob

August 12, 2008
12:06 pm
Rob
Guest

…so I've evolved, very slowly…

I now have a js in the templates library which I can call on (dont know how to from cforms)

So the question is, how do I call the JS from cforms to assess if the check box is checked and therefore change the other desc field to 'giftaid'?

I read in another post "create a JS function and attach it to the change event for a given input field"

How do I attach to a change event for a given input field?

All help appreciated, its for charity!

August 12, 2008
7:29 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

All your personal custom Javascript code should go into a separate file, e.g. my_javascript.js

  • cforms main config page: turn on 'Use custom input
    field NAMES & ID's
    '
  • cforms main config page: add a [id:clickmebox] to the checkbox label, e.g.:
    Please collect the Gift Aid[id:clickmebox]
  • cforms styling page: activate both 'List element IDs & Label IDs'
  • cforms styling page: in the CSS set the resepctive list element to not show, e.g. : li#li--9 { display:none; }
  • copy my_javascript.js into your WP theme folder
  • and link to it from within your WP header.php file (usually), e.g.:

    <script type="text/javascript" src="http://www.fishnclicks.co.uk/wp-content/themes/freshnews/my_javascript.js"></script>
  • my_javascript.js can contain:
    $(document).ready(
    $("#clickmebox").click(function () { $('#li--9').toggle(); });
    );
  • finally, turn on cforms datepicker feature *ONLY* if you either require it for date-picker fields or do not have jQuery already loaded (which you do have, so you can turn off the date-picker feature)
  • give it a shot

Disclaimer: This is all of top off my head and I may have missed a step, let me know if you hit a wall.

The code in my_javascript.js is very basic, but should do the job.

August 13, 2008
2:55 pm
Rob
Guest

Oliver, thnx for your continued help. I am stuggling.

  • I have a form with a checkbox field [id:giftaid] and when it is checked I want to change the hidden field [id:desc] to a value of "giftaid"
  • I have created a js called giftaid.js and its loading in the header.
  • giftaid.js looks like this:

function afterChecked()
{
    if (document.getElementById('#giftaid').checked == true)
    {
        document.getElementById('#desc').value='giftaid'
    }
    else
    {
        document.getElementById('#desc').value='0'
    }
}

I dont know if this code will find the correct IDs or not.

I dont know if I need to call that script somehow or whether when the checkbox is checked the script will automatically change desc to value "giftaid"

Quazi technical people writing code, never a good idea, or at least that what the developers tell me. :)

I was also wondering why we were hiding fieldset 9 in your instructions, isn't that my checkbox field, or was I meant to create a new field and hide it to do something with the clickmebox?

All help appreciated, apologies for my lack of technical understanding. The problem with running a charity ion the cheap!

Rob

August 13, 2008
9:50 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline
  • when using getElementById there is no # sign allowed
  • afterChecked needs to be called by my script above, that's why I provided it. add the below after your corrected script (remove # signs):

    $(document).ready(
    $("#giftaid").click(function () {  afterChecked();  });
    );
  • you also need to load giftaid.js *after* wp_head(); in your header.php otherwise it'll be loaded before jQuery
  • the hidding example was just an example to demonstrate, on the fly field hiding/showing. li--9 was the amount field, no? now it's li--8…
September 1, 2008
3:11 pm
Rob
Guest

Hi Oliver, just getting back to this now after a holiday. Thx for continued help, I'll try this out and let you know how I get on. Appreciate your time.

Rob

September 1, 2008
7:07 pm
Rob
Guest

so the script now reads

function afterChecked()
{
    if (document.getElementById('giftaid').checked == true)
    {
        document.getElementById('desc').value='giftaid'
    }
    else
    {
        document.getElementById('desc').value='0'
    }
}
$(document).ready(
$("#giftaid").click(function () {  afterChecked();  });
);

Firebug tells me I am missing a bracket.

September 1, 2008
10:44 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

My bad, can you try:

$(document).ready( function () {

  $("#giftaid").click( function () { afterChecked(); } );

});

September 2, 2008
11:07 am
Rob
Guest

Hi Oliver, thanks for this, new code worked and error is gone.

Now I just need to work out what I have to put in cforms to make sure that when the check box is checked it changes desc to giftaid.

Right now with the code running, it doesnt output desc as giftaid when checked. Is there something more that I need to do?

Thx for your continued help

Rob

September 2, 2008
6:25 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Yes, the new code toggles the value fine, I checked with firebug. I can't test the form due to captcha field not displaying any text/numbers.

Are you seeing this, too?

Can you make sure to either temporarily remove the captcha field, or ensure that the font files are working fine (they sometimes seem to get corrupted and need to be uploaded manually via ftp).

PS: If you can, I would not use 'name' as the ID for the first field, since this can cause issues if the page is reloaded in non-ajax mode.

September 2, 2008
8:03 pm
Rob
Guest

Evening Oliver, yup I see it in firebug (didnt think to check using that) and I have posted the form to myself in email and see the description has changed.

I dont see captcha in my browser at all, must be a plugin activation issue! I dont know where its gone. I;m using a mac but dont see why that woud make a difference.

I'll have to work on that this evening.

Thank you for your help, brilliant.

Rob

September 2, 2008
8:20 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

when you're logged in, you don't see the captcha (the form "knows you") unless you override the default setting under global-settings.

So you're saying that the form email still doesn't show the jQuery-modified new value in the hidden field?

September 2, 2008
11:05 pm
Rob
Guest

captcha issue a non issue as you describe as I am logged in.

So what I get now is as follows.

When I load the page by navigating to it, the check box is checked and the 'desc' field is empty. if I change the check box it doesnt change in firebug. If I refresh that page and then hit the check box, it changes the desc value to giftaid as expected.

Is there a problem with where the script is loading? The page needs to be refreshed before the script changes the desc field.

Rob

Live site now moved to http://tropical.nsdesign4.net/ awaiting domain name reg.

September 3, 2008
7:12 am
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Even though firebug only shows it in the code view (left side) it still shows the change even on first page load in the DOM view (right side).

September 3, 2008
1:28 pm
Rob
Guest

I think it failed because the default for the check box was 'checked' yet the thing it was affecting 'desc' needed the default to reflect the 'checked' status.

If you start with checked, the the desc field needs to default to giftaid.

I think :)

Thanks

Rob

September 3, 2008
9:13 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

That might be right, so it works now?

September 4, 2008
10:30 pm
Rob
Guest

works fine now that both defaults match yup.

Rob

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
23 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

tracedef: 43

mores: 21

Gyrus: 20

frozenwaste: 18

asuffredini: 15

photoworks: 14

Member Stats:

Guest Posters: 3732

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5333

Posts: 18696

Newest Members: juredujmovic, dreamkeeper, rajattyagi, wrokaa, lukass

Moderators: Paul (421), cnymike (8), sonika (95)

Administrators: Oliver (6400), Nicky (3)