COWOA question: Dim Form Elements if Checkbox = True

1 Oct 2012, 8:35 AM

#1

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

COWOA question: Dim Form Elements if Checkbox = True

I have the COWOA mod installed and it has the ability to copy address from billing fields if the checkbox is checked. It does it's function correctly but visually the user might assume this hasn't happened.

How can I dim the shipping address when the user checks the box?
I assume I would use Javascript but I don't know how to code in Javascript :(

This is the kind of effect I'm looking for:

To see the exact form im referring to, please add this product to cart and just hit checkout...
http://www.pazzle.co.uk/index.php?main_page=product_info&cPath=6_1&products_id=3

1 Oct 2012, 12:50 PM

#2

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

Going to bed now, will hope for replies in the morning :)

2 Oct 2012, 10:00 AM

#3

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

Are there any Javascript programmers that could lend some advice?

4 Oct 2012, 3:49 AM

#4

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

Someone I know has kindly written up a script that does exactly what I need, even using my page source so it should work out the box.

He sent me this link to show me it's working, and said to copy the JS from this. http://jsfiddle.net/CPjpt/2/

I put the code into a file, and saved as jscript_formdim.js. I then put this file in /public_html/includes/modules/pages/no_account as no_account is the name of the page I need this script to work on.

If you go to my checkout page, you can see that the the script has been loaded, however the form does not dim when checked.
I did notice in my dev tools console this error: **Uncaught SyntaxError: Unexpected token ? **

Can someone please tell me what the means, do I need to place the code in a specific location or on a specific page?

4 Oct 2012, 4:17 AM

#5

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: COWOA question: Dim Form Elements if Checkbox = True

I notice on the jsfiddle page that it says (on the left) that jQuery 1.8.2 is active. Do you have jQuery on your site? If not (and if the code actually uses jQuery), you need to load or reference it before the script runs.

4 Oct 2012, 4:37 AM

#6

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

Thank you for replying, I have downloaded the jquery library, I renamed jquery-1.8.2.min.js. to jscript_jquery-1.8.2.min.js.
I put this file in the /public_html/includes/modules/pages/no_account directory along with the jscript_formdim.js.

I thought for sure that would do it, unfortunately no change :(

4 Oct 2012, 5:25 AM

#7

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: COWOA question: Dim Form Elements if Checkbox = True

Scripts are called in alphabetical order, and jscript_formdim comes before jscript_jquery. Change the jquery name to jscript_1_jquery-1.8.2.min.js and see what happens.

4 Oct 2012, 5:37 AM

#8

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

Okay I changed it, and source code says that the library is being loaded first. However, still not working and that error is still there.

LOL im such a newbie, so sorry dude.

4 Oct 2012, 7:55 AM

#9

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

He has informed me the following:

the code needs to be either in $(document).ready() or after the HTML for your forms on the page

What does he mean $(document).ready() ?
I can't find the file that contains the form either, even developer toolkit doesn't find terms for the form.

4 Oct 2012, 9:35 AM

#10

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

I read up about $(document).ready() and my understanding is that if forces the script to load before anything else on the page. So here's what I have...

<script type="text/javascript">
    $(document).ready(function () {
if($("#shippingAddress-checkbox").attr("checked") == "checked")
{
    $("#shippingField input:not(#shippingAddress-checkbox), #shippingField select:not(#shippingAddress-checkbox)").attr("disabled", "disabled");
}
else
{
    $("#shippingField input:not(#shippingAddress-checkbox), #shippingField select:not(#shippingAddress-checkbox)").removeAttr("disabled");               
}

$("#shippingAddress-checkbox").click(function(){
   if($(this).attr("checked") == "checked")
   {
       $("#shippingField input:not(#shippingAddress-checkbox), #shippingField select:not(#shippingAddress-checkbox)").attr("disabled", "disabled");
   }
   else
   {
       $("#shippingField input:not(#shippingAddress-checkbox), #shippingField select:not(#shippingAddress-checkbox)").removeAttr("disabled");               
   }
});?
</script>

I put it on tpl_modules_no_account.php. Nothing, nothing nothing. I have spent an entire day pasting this code in every possible variation in every possible file in every possible position.

Can someone save the remainder of hair I have left?

5 Oct 2012, 1:44 AM

#11

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

He updated his code to include the document ready function. I was told to put this in my <head> tag, so I opened up html_header.php, and put it just after the <head>.

Still didn't work. I am pretty sure the issue lies somewhere other than the code itself.

PLEASE, PLEASE, PLEAAAASEE can someone assist!!

<script type="text/javascript">
$(document).ready(function(){
//Initalize
    if($("#shippingAddress-checkbox").attr("checked") == "checked")
    {
        $("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").attr("disabled", "disabled");
    }
    else
    {
        $("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").removeAttr("disabled");               
    }

    //Setup action
    $("#shippingAddress-checkbox").click(function(){
       if($(this).attr("checked") == "checked")
       {
           $("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").attr("disabled", "disabled");
       }
       else
       {
           $("#shippingField input:not(#shippingAddress-checkbox), #shippingField select").removeAttr("disabled");               
       }
    });
});
</script>

5 Oct 2012, 1:51 AM

#12

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

This is a screenshot of my live dev tools, might help someone diagnose the problem..
http://i47.tinypic.com/357j9sk.png

5 Oct 2012, 2:28 AM

#13

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: COWOA question: Dim Form Elements if Checkbox = True

So it appears that something is inserting a ? after that line when it runs?? I don't know exactly what "token" signifies in javascript. Is the ? the problem, or a marker to show that a problem exists there? ```
}
});?
});
</script>

5 Oct 2012, 4:38 AM

#14

inxie

Zen Follower

Join Date:: Jul 2011
Posts:: 177
Plugin Contributions:: 0

Re: COWOA question: Dim Form Elements if Checkbox = True

gjh42:

So it appears that something is inserting a ? after that line when it runs?? I don't know exactly what "token" signifies in javascript. Is the ? the problem, or a marker to show that a problem exists there? ```
}
});?
});
</script>


I removed the ? and another error occured, this time telling me that something is not defined. I googled the error and apparently this happens if a library has not been loaded. I placed this just before my formdim code...


**and it worked!!!**
I can sleep easy tonight :)

THANK YOU SIR