cformsII Support Forum
Current User: Guest *Frequently Asked Questions*
Search 
Search Forums:


 




Using Javascript with cforms

Add a New Topic Reply to Post
Post

Rob - Guest

11:13 am - August 12, 2008

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

Rob - Guest

12:06 pm - August 12, 2008

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

Oliver - Admin

7:29 pm - August 12, 2008

posts 3656

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.

Rob - Guest

2:55 pm - August 13, 2008

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

Oliver - Admin

9:50 pm - August 13, 2008

posts 3656

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

Rob - Guest

3:11 pm - September 1, 2008

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

Rob - Guest

7:07 pm - September 1, 2008

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.

Oliver - Admin

10:44 pm - September 1, 2008

posts 3656

My bad, can you try:

$(document).ready( function () {

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

});

Rob - Guest

11:07 am - September 2, 2008

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

Oliver - Admin

6:25 pm - September 2, 2008

posts 3656

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.

Rob - Guest

8:03 pm - September 2, 2008

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

Oliver - Admin

8:20 pm - September 2, 2008

posts 3656

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?

Rob - Guest

11:05 pm - September 2, 2008

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.

Oliver - Admin

7:12 am - September 3, 2008

posts 3656

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

Rob - Guest

1:28 pm - September 3, 2008

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

Oliver - Admin

9:13 pm - September 3, 2008

posts 3656

That might be right, so it works now?

Rob - Guest

10:30 pm - September 4, 2008

works fine now that both defaults match yup.


Rob

Add a New Topic Reply to Post


Reply to Topic: Using Javascript with cforms
PLEASE READ THE FAQs FIRST! THANK YOU.

NOTE: New Posts are subject to administrator approval before being displayed

Guest Name (Required):

Guest EMail (Required):

Guest URL (required)

Math Required!
What is the sum of: 9 + 2        (Required)

Topic Reply:


 
© Simple:Press Forum - Version 3.1.3 (Build 356)