DaniWeb IT Discussion Community - Return value based upon visibility of form field?

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Return value based upon visibility of form field? (http://www.daniweb.com/forums/thread157903.html)

Return value based upon visibility of form field?

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

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?

Re: Return value based upon visibility of form field?

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>

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!

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

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

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:

for example?

Thank you for your patience!

Re: Return value based upon visibility of form field?

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.

Re: Return value based upon visibility of form field?

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>

Re: Return value based upon visibility of form field?

See next post... sorry!