Member Avatar for trinityavatar

Hello,

I am entirely new to Javascript (try yesterday!), and I need to create a price sheet form in Acrobat for a client. While the answer to this question may already be here on this site, I am sufficiently clueless about how to search for it and appreciate tremendously your patience and good will!

Here's what I'm attempting to do:

• The Price List is comprised of a variety of items Items A, B, C & D (for example)
• An overall quantity is entered at the top NumPosters
• An ItemARate, ItemBRate, ItemCRate, ItemDRate has been established
• When items A & B are checked, they should be multiplied by the NumPosters, and each ItemPrice should be added to the total.
I have this so far in the ItemAPrice field calculation:

var price = this.getField("ItemARate") // Each item has its own rate
var qty = this.getField("NumPosters") // Each item is multiplied by the number of posters

event.value = price.value * qty.value

• Currently I have a CheckBox setup with the following:

var ItemAPrice = this.getField("ItemAPrice")

if (event.target.value == "Yes") { // When CheckBox is selected
ItemAPrice.hidden = false // Item A Price is shown
}
else {
ItemAPrice.hidden = true // otherwise Item A price is hidden

}

• I have created another field called ItemATotal into which I would like to return the value of ItemAPrice when the ItemACheckbox is checked. (Or is that a silly way to do this?) Ultimately, I suppose I would prefer to have the ItemACheckbox return a value into the ItemATotal when checked?

Prior to my adding of the ItemATotal field, I added up all of the ItemPrices and naturally got a total for all items rather than only those items that had been checked.

Any thoughts on this (I suspect) rather simple bit of coding would be greatly appreciated!!

Also, any really good Beginning JavaScript books you folks would recommend?? Clearly I need one!

Thanks!
TrinityAvatar

  • 3 Contributors
  • 10 Replies
  • 131 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by trinityavatar

Recommended Answers

All 10 Replies

Member Avatar for trinityavatar

This is probably my key question here:

I suppose I would prefer to have the ItemACheckbox return a value into the ItemATotal [field] when checked?

Does anybody know how I might go about doing this?

Member Avatar for essential

A quick throw over this 1. Hope it will help you all the way...

<html>
<head>
<title><!--Sample--></title>
<style type="text/css">
<!--

body {
    font-family: Arial, Verdana;
    font-size: 10pt;
    color: #696969;
    text-align: left;
}
form span {
    display: block;
    margin: 25px 0 10px 5px;
    font: 700 18px Verdana, Helvetica, Arial, sans-serif;
} 
form label {
    font: bold 12px Arial;
    color: #006;
    margin: 5px;
}

-->
</style>
<script type="text/javascript">
<!--
var onlyDigits = /^\d{0,3}$/;

function price( e )
{
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;
var showPrice = document.getElementsByTagName('label'); 
tag = document.frm1;
if ( t.name && t.name == 'valueOfA' ) { 
if (tag.valueOfA.checked) {  
showPrice[0].innerText = '$' + tag.valueOfA.value;
}
else if (!tag.valueOfA.checked) {
showPrice[0].innerText = 'Item A'; 
  }
}
if (t.name && t.name == 'valueOfB') {
if (tag.valueOfB.checked) {
showPrice[1].innerText = '$' + tag.valueOfB.value; }
else if (!tag.valueOfB.checked) {
showPrice[1].innerText = 'Item B'; 
    }
  }
}

function addEvents() {
inp = document.getElementsByTagName('input');
for ( var x = 0; x <= 1; x++ ) {
if (document.addEventListener)
inp[x].addEventListener('click',price,false);
else if (document.attachEvent)
inp[x].attachEvent('onclick',price); 
else document.onclick = price;
 }
}
function validate(thisValue)
{
if ( !onlyDigits.test(thisValue) ) { alert('Only digits from 0-9 and not more than two digits are allowed on this field!');  return false; }
else { 
var valA =  parseFloat(document.frm1.valueOfA.value) * (document.frm1.a.value*1);
var valB = parseFloat(document.frm1.valueOfB.value) * (document.frm1.b.value*1);
document.frm1.at.value = valA;
document.frm1.bt.value = valB;
document.frm1.total.value = '$' + (valA + valB); 
 }
}
if (window.addEventListener)
window.addEventListener('load',addEvents,false);
else if (window.attachEvent)
window.attachEvent('onload',addEvents);
else if (document.getElementById)

window.onload = addEvents;
//-->
</script>
</head>
<body>
<form name="frm1" action="javascript:void(0);" onSubmit="return false;">
<span>Product Line</span>
<label>Item A</label> <input type="checkbox" value="1.50" name="valueOfA" /> <label>Item B</label> <input type="checkbox" value="2.00" name="valueOfB" />
<span>Volume Request</span>
<label>A</label>
<input type="text" value="" name="a" size="3" onkeyup="validate(this.value);if (!frm1.valueOfA.checked){alert('You must check (item A) before you can access this field');this.blur();};" /> <label>B</label> <input type="text" value="" name="b" size="3" onkeyup="validate(this.value);if (!frm1.valueOfB.checked){alert('You must check (item B) before you can access this field');this.blur();};" /> <span>Amount Per Item</span>
<label>A</label>
<input type="text" value="" name="at" size="6" /> <label>B</label> <input type="text" value="" name="bt" size="6" />
<span>Overall Amount</span>
<label>A + B</label> <input type="text" name="total" value="$0.00" size="6" />
</form>
</body>
</html>
Member Avatar for trinityavatar

Thanks so much for your reply! I will try it out later today and get back to you to let you know how it works!

Thanks again!

Member Avatar for trinityavatar

Good Morning,

Thanks again for your coding yesterday... however, I suspect, due to my limited experience with this stuff, that I failed to describe my need adequately.

Essentially, I need a toggle switch:
If "Yes" fill in field value
If "No" return blank field

What I'm getting right now is:
If "Yes" show field value
If "No" hide field value

However, I need to add up all the field values and because the field value is not cleared, it continues to reflect in the total, hidden or not.

This is what I've got in the Yes Checkbox in the Acrobat Form. (I decided that with a Yes Checkbox, and a No Checkbox, I might be able to pull this off):

var CollectionTotal = this.getField("CollectionTotal")
function product(a,b)
{
return a*b;
}
if (event.target.value == "Yes")
{
CollectionTotal.hidden = false
&& document.write(product("CollectRate*NumPosters"))
}
else {
CollectionTotal.hidden = true
}

However, I am unable to figure out how to set the "No" checkbox to:
1) Hide box AND
2) clear field value...

Alternately, if the single check box could both:
If "Yes" calculate field value and show
If "No" clear field value and hide

That'd be great!

Thanks again, in advance!!

Best,
TrinityAvatar

Member Avatar for trinityavatar

Hey! I figured it out!

Here's what I came up with for the "No" Checkbox on the Acrobat Form:

var CollectionTotal = this.getField("CollectionTotal")
function resetField(name,value)
{
CollectionTotal.value = value;}

if (event.target.value == "No")
{
CollectionTotal.hidden = true
&& resetField('CollectionTotal','0.0')
}
else {
CollectionTotal.hidden = false
}

Thanks for your time and effort!!

Best,
TrinityAvatar

Member Avatar for trinityavatar

I was hasty!

I was able to reset the value of the No Checkbox to 0.0, but now the Yes checkbox results is 0.0 as well... :-(

I can only over ride the reset value if I put in an absolute value.

Here's the "Yes" CheckBox...

var CollectionTotal = this.getField("CollectionTotal")
function resetField(name,value)
{
CollectionTotal.value = value;}

if (event.target.value == "Yes")
{
CollectionTotal.hidden = true
&& resetField('CollectionTotal','2800')
}
else {
CollectionTotal.hidden = false
}

Is there anyway to make this value a calculation such as:

var CollectionTotal = this.getField("CollectionTotal")
function resetField(name,value)
{
CollectionTotal.value = value;}

if (event.target.value == "Yes")
{
CollectionTotal.hidden = true
&& resetField('CollectionTotal','CollectionRate*NumPosters')
}
else {
CollectionTotal.hidden = false
}

for example?

Thank you for your patience!

Member Avatar for Drew

I think what you are looking for is "checked".

document.FromName.checkBoxName.checked

That will return "true" or "false" if the checkbox is enabled or not.

Member Avatar for essential

Here you go! This wil clear things out for you. Good day...

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function query(e) {
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;
var ref = document.frm1.elements;
ids = ( document.all ) ? document.all.total : document.getElementById('total');  
if ( t.checked ) { if ( t.name == 'yes' ) {
if ( parseInt(ref['qty'].value) < 1 ) { ids.innerText = '';  alert('Field requires a valid value'); t.checked = false; }  else {
ids.innerHTML = (t.value * 1) * parseFloat(ref['qty'].value); } 
} 
} 
else if ( !t.checked && t.name == 'yes' ) { ref['qty'].value = '0'; ids.innerText = ''; }
if ( t.checked ) {
if ( t.name == 'no' ) { ref['yes'].checked = false; ref['yes'].disabled = true;    ref['qty'].type = 'hidden'; ref['qty'].value = '0'; ids.innerText = '';  }       
 }
else if ( !t.checked && t.name == 'no' ) { ref['yes'].disabled = false; ref['qty'].type = 'text'; ref['qty'].value = '0'; }  
}
document.onclick = query;
//-->
</script>
</head>
<body>
<p>Show Value</p>
<form name="frm1" action="#" onSubmit="return false;">
<label><input type="checkbox" name="yes" value="100" />&nbsp;Yes</label> <label><input type="checkbox" name="no" value="0" />&nbsp;No</label><br /><br />
<label>Field Value:</label> <input type="text" value="0" name="qty" size="4" />
</form>
<br /><br />
<div id="total"></div>
</body>
</html>
Member Avatar for trinityavatar

Thank you Essential and Drew for your suggestions.
I have a couple more questions for both of you.

Drew,
Thanks again!
I understand that your coding below would return a value of T/F on the checkbox:

document.FromName.checkBoxName.checked

What I'd like to figure out still is the following:
1) checkbox returns value of T/F
2) checkbox triggers an event as follows
• if True: return product (a*b) into TotalField
• if False: delete contents of TotalField
I've been able to reset contents of TotalField to 0.00 but when I attempt to return the product (a*b) to TotalField, it remains 0.00.

This code currently activates the "No" Checkbox and sets the TotalField to 0.00

var CollectionTotal = this.getField("CollectionTotal")
function resetField(name,value)
{
CollectionTotal.value = value;}

if (event.target.value == "No")
{
CollectionTotal.hidden = true
&& resetField('CollectionTotal','0.00')
}
else {
CollectionTotal.hidden = false
}

This code fails to return the product (a*b) into the TotalField when the "Yes" checkbox is True:

var CollectionTotal = this.getField("CollectionTotal")
function product(a,b)
{
return a*b;
}
if (event.target.value == "Yes")
{
CollectionTotal.hidden = false
&& document.write(product("CollectRate*NumPosters"))
}
else {
CollectionTotal.hidden = true
}

Essential,
Thanks so much for your generous consideration! However, at this point, the code you've included, appears to have the same issue I've been facing, namely the value generated by the calculation continues to appear in the total field whether or not the Field Value is hidden. Because I need to add up the selected totals of my client, this behavior results in an incorrect total.

Any further thoughts??

Thanks much for all your time!!

Best,
TrinityAvatar

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.