Tagged: javascript customize autosum
- This topic has 17 replies, 4 voices, and was last updated 7 years, 10 months ago by
cosmocanuck.
-
AuthorPosts
-
-
October 27, 2013 at 2:34 pm #1198
cosmocanuckMemberHi folks! I’m loving Piklist – it’s making it a breeze to customize my client’s site.
I am however getting really ambitious now, and wondering if I can create an “autosum” field consisting of the total of four other (numeric) fields. I’d like this to also be automatically entered in as its own meta field along with all the other user-input ones, when they save the post.
I think this would be within my skill level with basic HTML, but since I don’t have access to the Piklist fields’ code, I don’t think I can do it without some help.
Is it possible to add some “onFocus”, “onBlur” etc. functions to a Piklist field? I think that’s the only part I can’t do right now.
Incidentally, I want to use the technique here:
http://www.javascriptsource.com/forms/auto-sum-form-boxes.html
Thanks for any help you can provide!
Adam
-
October 28, 2013 at 9:27 am #1206
SteveKeymaster@cosmocanuck– You can add any attributes you want to a field, including onFocus or onBlur, just by including it in the Attributes array.
For example, let’s say you want to clear a field onFocus. Using the
text_class_smallfield from Piklist Demos:piklist('field', array( 'type' => 'text' ,'field' => 'text_class_small' ,'label' => 'Small' ,'description' => 'class="small-text"' ,'value' => 'Lorem' ,'attributes' => array( 'class' => 'small-text' ,'onfocus' => "if(this.value == 'Lorem') { this.value = ''; }" ) ,'on_post_status' => array( 'value' => 'lock' ) ));Also, this might help you. Some field plugins that other users have created >
I also updated our docs to help answer your question.
Let us know how it turns out.
-
October 28, 2013 at 12:14 pm #1209
cosmocanuckMemberThat’s super awesome, thank you! I’ll check out the plugins too.
-
October 28, 2013 at 7:20 pm #1210
MarcusMemberHaha, I didn’t even realize that either.
Awesome.
-
March 3, 2014 at 3:47 pm #1488
cosmocanuckMemberHi guys! I had this working beautifully – I invoked a function for a bunch of numerical Piklist fields, all coded similar to this:
piklist('field', array( 'type' => 'text', 'field' => 'surface_lifts', 'label' => __('Surface Lifts'), 'position' => 'wrap', 'attributes' => array( 'class' => 'text', 'columns' => 2, 'onFocus' => 'startCalc();', 'onBlur' => 'stopCalc();' ) ));…and for the autosum field, I did this:
piklist('field', array( 'type' => 'text', 'field' => 'total_lifts', 'label' => __('Total Lifts'), 'position' => 'wrap', 'attributes' => array( 'class' => 'text', 'columns' => 2, 'readonly' => "readonly" ) ));and it used this JavaScript:
function calc(){ lifts1 = document.post["post_meta[trams]"].value; lifts2 = document.post["post_meta[gondolas]"].value; lifts3 = document.post["post_meta[hs_sixpack]"].value; lifts4 = document.post["post_meta[hs_quad]"].value; lifts5 = document.post["post_meta[hs_triple]"].value; lifts6 = document.post["post_meta[quad_chairs]"].value; lifts7 = document.post["post_meta[triple_chairs]"].value; lifts8 = document.post["post_meta[double_chairs]"].value; lifts9 = document.post["post_meta[surface_lifts]"].value; document.post["post_meta[total_lifts]"].value = (lifts1*1) + (lifts2*1) + (lifts3*1) + (lifts4*1) + (lifts5*1) + (lifts6*1) + (lifts7*1) + (lifts8*1) + (lifts9*1); } function startCalc(){ interval = setInterval("calc()",1); } function stopCalc(){ clearInterval(interval); }But after the move to the final server – plus a Piklist update – it doesn’t work. I get this error:
TypeError: ‘undefined’ is not an object (evaluating ‘document.post[“post_meta[trams]”].value’)
…implying it’s failing when trying to get the first value.
I apologize that my Javascript is pretty rudimentary, but I wanted to check with you guys in case it might be something to do with Piklist, or perhaps how I’m supposed to reference the metafield variables has changed…
Thanks!
adam -
March 5, 2014 at 11:36 pm #1497
SteveKeymasterWhich version of Piklist was it working on before the upgrade?
-
March 6, 2014 at 2:58 am #1501
cosmocanuckMemberIt was 0.9.1. Not 100% sure that this feature was indeed working with that version as it didn’t come up as an issue till recently, but it seems to be the case. Currently on 0.9.3 on the new (final) server.
-
March 6, 2014 at 7:23 pm #1515
MarcusMemberJust thought this script might be a little more beneficial as you have access to jquery in wordpress at any time:
(Keep your onfocus events, only remove your onblurs)jQuery(document).ready(function($){ calcMe = function () { var total=0; $('#[^="_post_meta_calcme_"]').each(function (e) { var cur = $(this); total += ($.trim(cur.val())=='')?0:parseInt(cur.val()); }); $('#[^="_post_meta_finalcalc_"]').val(total); } });Then to make this a universal autosum function, just name your fields that you want autosummed, calcme_fieldnamehere (as the each statement, only checks fields that start with calcme) And name your field for the total ‘finalcalc_fieldnamehere’
This way, you can reuse this concept anywhere, and this should work out of the box.I haven’t tested this code, but from what I can see it should work. LOL
Marcus
-
March 6, 2014 at 8:12 pm #1516
cosmocanuckMemberThanks a million Marcus! I followed your instructions to the letter, AFAIK – and have confirmed that your script is loading – but I’m not seeing any auto-summing.
Here’s what I’ve done for the autosum fields in the metabox file:
piklist('field', array( 'type' => 'text', 'field' => 'calcme_trams', 'label' => __('Trams'), 'position' => 'wrap', 'attributes' => array( 'class' => 'text', 'columns' => 2, 'onFocus' => 'calcMe();' ) ));…and here’s what i did for the grand-total field:
piklist('field', array( 'type' => 'text', 'field' => 'finalcalc_total_lifts', 'label' => __('Total Lifts'), 'position' => 'wrap', 'attributes' => array( 'class' => 'text', 'columns' => 2, 'readonly' => "readonly" ) ));But nothing happens.
Any idea what might be amiss?
Thanks again,
Adam -
March 6, 2014 at 9:54 pm #1518
MarcusMemberSorry about that, I was trying to be too generic trying to catch all id’s. You just want to catch the input ids.
It should read:
jQuery(document).ready(function($){ calcMe = function () { var total=0; $('input[id^="_post_meta_calcme_"]').each(function (e) { var cur = $(this); total += ($.trim(cur.val())=='')?0:parseInt(cur.val()); }); $('input[id^="_post_meta_finalcalc_"]').val(total); } });Marcus
-
March 6, 2014 at 10:07 pm #1519
MarcusMemberI also forgot, jquery allows meta characters, so you could also use:
jQuery(document).ready(function($){ calcMe = function () { var total=0; $('#_post_meta_calcme_*').each(function (e) { var cur = $(this); total += ($.trim(cur.val())=='')?0:parseInt(cur.val()); }); $('#_post_meta_finalcalc_*').val(total); } });If you wanted to catch selects, and textareas too. (although why would you) 🙂
Marcus
-
March 6, 2014 at 11:06 pm #1524
cosmocanuckMemberMarcus, you are truly a god of Javascript!
Well, at least, you’re way more expert than me. 8^)
I’m inspired to renew my Java self-education efforts! It’s hard when it’s only occasionally that this stuff comes up… so I never have the opportunity to really dig into it. (And long gone are my single/childfree days when I could stay up half the night absorbing some new coding knowledge just for the fun of it!)
Anyway, bottom line, it works great and THANK YOU for the revised code!
All the best!
Adam -
March 6, 2014 at 11:12 pm #1525
MarcusMemberYou are far too kind and you get a massive reprieve for being a javascript god yourself, because your a dad. <grin>
Hope you get to spend some time with jquery, you’ll love the api.
Trust me, when I say, that Kevin is the guru of JS, I’m more like an old fart who likes to know a few things.
Marcus
-
March 7, 2014 at 11:57 am #1531
bicho44MemberToo much flowers 😀
Nice code anyways, thanks
-
March 25, 2014 at 7:22 pm #1613
cosmocanuckMemberHi again Marcus!
Hey, I realized that there was an unintended consequence in my using that fine JS code of yours. Since I had to rename the relevant metafields for the calc to work, all the data my client already entered in for those – in 130+ posts – is no longer being used or displayed. Well, the front end was OK, but only because it was grabbing the old fields.
Instead of making my client re-enter all those numbers, I’m wondering if the script could simply do a hard-coded calc of the needed fields, as they already are named, instead of the (admittedly efficient and nifty) approach of custom-naming the fields and using the “each” function.
Not pretty I know, but this field configuration is not going to change, and if it does, I’m happy to hard-code a fix.
Let me know… thanks!
Adam -
March 28, 2014 at 1:18 am #1617
cosmocanuckMemberIf you have time…
I’m trying to reference the specific fieldnames, to avoid the .each method and allow the use of the existing data… but am unclear (being a JS fairly-newbie) on how I reference the Piklist fields. I see you’re using
‘input[id^=”_post_meta_calcme_”]’
But the old code that once worked, used constructions like:
lifts1 = document.post[“post_meta[trams]”].value;
How would I refer to the fields correctly to simply total up the value of the specific fields I’d like to summarize?
Thanks…
-
March 28, 2014 at 9:38 am #1618
MarcusMemberAdam, you can still use the code I provided, but just change one small line:
$('#_post_meta_calcme_*').eachSo the format for hardcoded fields, is similar. #_post_meta_ tells the each statement that you want, the ids ‘#’ that start with ‘_post_meta_’ (as this is what piklist prenames the ids) then just add in your field name. ‘calcme_*’ (which means fields that start with calcme_)
So for your hardcoded ones, just separate the different fields, with a comma ‘,’ such as:
$('#_post_meta_trams,#_post_meta_gondolas,#_post_meta_hs_sixpack').eachThen the final total line from:
$('#_post_meta_finalcalc_*').val(total);to
$('#_post_meta_total_lifts').val(total);Marcus
-
March 28, 2014 at 11:29 am #1619
cosmocanuckMemberAwesome. Thanks Marcus!
-
-
AuthorPosts
- You must be logged in to reply to this topic.