AJAX

Return value based upon visibility of form field?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2008

Posts: 8

Reputation: trinityavatar is an unknown quantity at this point

Solved Threads: 0

trinityavatar trinityavatar is offline

Offline

Newbie Poster

Return value based upon visibility of form field?

Nov 17th, 2008

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

•

Join Date: Nov 2008

Posts: 8

Reputation: trinityavatar is an unknown quantity at this point

Solved Threads: 0

trinityavatar trinityavatar is offline

Offline

Newbie Poster

Re: Return value based upon visibility of form field?

Nov 17th, 2008

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?

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Return value based upon visibility of form field?

Nov 18th, 2008

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<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>
<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<b></b>: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>

•

Join Date: Nov 2008

Posts: 8

Reputation: trinityavatar is an unknown quantity at this point

Solved Threads: 0

trinityavatar trinityavatar is offline

Offline

Newbie Poster

Re: Return value based upon visibility of form field?

Nov 18th, 2008

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!

•

Join Date: Nov 2008

Posts: 8

Reputation: trinityavatar is an unknown quantity at this point

Solved Threads: 0

trinityavatar trinityavatar is offline

Offline

Newbie Poster

Re: Return value based upon visibility of form field?

Nov 19th, 2008

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

Last edited by trinityavatar; Nov 19th, 2008 at 12:39 pm. Reason: Added alternate solution

•

Join Date: Nov 2008

Posts: 8

Reputation: trinityavatar is an unknown quantity at this point

Solved Threads: 0

trinityavatar trinityavatar is offline

Offline

Newbie Poster

Re: Return value based upon visibility of form field?

Nov 19th, 2008

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

•

Join Date: Nov 2008

Posts: 8

Reputation: trinityavatar is an unknown quantity at this point

Solved Threads: 0

trinityavatar trinityavatar is offline

Offline

Newbie Poster

Re: Return value based upon visibility of form field?

Nov 19th, 2008

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!

•

Join Date: Apr 2004

Posts: 167

Reputation: Drew is an unknown quantity at this point

Solved Threads: 7

Drew

Offline

Junior Poster

Re: Return value based upon visibility of form field?

Nov 19th, 2008

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
document.FromName.checkBoxName.checked
document.FromName.checkBoxName.checked

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

Drew Gauderman
ASP / MSSQL Coder
http://www.iportalx.net - My ASP Portal

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Return value based upon visibility of form field?

Nov 19th, 2008

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<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>
<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>