Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 2745

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Nov 17th, 2008

Return value based upon visibility of form field?

Expand Post »

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:

Quote ...

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:

Quote ...

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

trinityavatar

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2008

Permalink

Nov 17th, 2008

Re: Return value based upon visibility of form field?

This is probably my key question here:

Quote ...

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?

trinityavatar

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2008

Permalink

Nov 18th, 2008

Re: Return value based upon visibility of form field?

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

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>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Nov 18th, 2008

Re: Return value based upon visibility of form field?

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!

trinityavatar

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2008

Permalink

Nov 19th, 2008

Re: Return value based upon visibility of form field?

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

Quote ...

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

trinityavatar

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2008

Permalink

Nov 19th, 2008

Re: Return value based upon visibility of form field?

Hey! I figured it out!

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

Quote ...

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

trinityavatar

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2008

Permalink

Nov 19th, 2008

Re: Return value based upon visibility of form field?

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

Quote ...

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:

Quote ...

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!

trinityavatar

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2008

Permalink

Nov 19th, 2008

Re: Return value based upon visibility of form field?

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

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

Reputation Points: 25

Solved Threads: 7

Junior Poster

Offline

166 posts
since Apr 2004

Permalink

Nov 19th, 2008

Re: Return value based upon visibility of form field?

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

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>

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Nov 20th, 2008

Re: Return value based upon visibility of form field?

See next post... sorry!

Last edited by trinityavatar; Nov 20th, 2008 at 12:07 pm. Reason: Submitted in error

trinityavatar

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Nov 2008

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: .js references from content to master don't work

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript for changing image every 2 seconds

DaniWeb Message

Cancel Changes

User Name
Password