function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
yvk431yvk431 

How to define a purchase product list

Hi Friends ,

 

I am displaying list of products in which the user can edit the quantity of each product , and i need to calc the total price dynamically.

 

Currently I am able to display the products using PageBlockTable and have used text boxes to enter the quantity number,for the onblur  event of which i am calling a script function.

 

 

My problem is that, all the text boxes share the same id, I got stuck on this . 

 

Please help me out and let me know  how to proceed on this  :

 

 

 

 

 

Message Edited by yvk431 on 01-08-2010 05:28 AM
Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

This is because you are using regular HTML input text elements.  Use VF InputText components and the id will be unique for each one.

 

All Answers

bob_buzzardbob_buzzard

All the text boxes won't really share the same id by the time the page is rendered - this is disallowed by the browser as every HTML element needs a unique id. 

 

The id that you supply will appear in the element id though. This will allow you to iterate all elements of a particular type in the page and, where the element id contains the id that you supplied, add the contents to the sum. 

 

 

yvk431yvk431

I am afraid it was not happening as you said Bob,

 

Can you please verify VFP code and the view source

 

 

<apex:page controller="Base_AC_WizardController" action="{!SelectedProList}" id="wizard2"> <apex:form id="wiz2form"> <apex:pageBlock dir="wiz2PB"> <apex:pageBlockSection id="wiz2PBS" title="Your selected products"> <apex:pageBlockTable value="{!proList}" var="rpro"> <apex:column headerValue="Product Code" value="{!rpro.ID}"/> <apex:column headerValue="Product Name" value="{!rpro.Product_Name__c}"/> <apex:column headerValue="Quantity"> <input type="text" value="" id="quantity" onBlur="calcAmnt()"/> </apex:column> <apex:column headerValue="Price"> <input type="text" value = "{!rpro.Product_Price__c}" id="Amount" readOnly="readonly" /> </apex:column> </apex:pageBlockTable> </apex:pageBlockSection> <apex:outputText value = "Total"/>

<input type="text" value = "" id="totAmount" readOnly="readonly" />

<apex:pageBlockButtons location="bottom"> <apex:commandButton value="Confirm" /> </apex:pageBlockButtons> </apex:pageBlock> </apex:form> <script> function calcAmnt() { var qnt,amt,tamt; qnt = document.getElementById('quantity').value; amt = document.getElementById('amount').value; if(eval(qnt) && eval(amt)) document.getElementById('totamount').value = qnt * amt ; document.getElementById('amount').value = amt; return true; } </script> </apex:page>

 

<table class="list " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1" border="0" cellpadding="0" cellspacing="0"><colgroup span="4"></colgroup><thead class="dr-table-thead"><tr class="headerRow "><th class="headerRow " scope="col" colspan="1" id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:j_id2header"><div id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:j_id2header:sortDiv">Product Code</div></th><th class="headerRow " scope="col" colspan="1" id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:j_id3header"><div id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:j_id3header:sortDiv">Product Name</div></th><th class="headerRow " scope="col" colspan="1" id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:j_id4header"><div id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:j_id4header:sortDiv">Quantity</div></th><th class="headerRow " scope="col" colspan="1" id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:j_id6header"><div id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:j_id6header:sortDiv">Price</div></th></tr></thead><tbody id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:tb"><tr class="dataRow even first " onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onBlur="if (window.hiOff){hiOff(this);}" onFocus="if (window.hiOn){hiOn(this);}"><td class="dataCell " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:0:j_id2" colspan="1"><span id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:0:j_id11">a05A0000000WP97</span></td><td class="dataCell " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:0:j_id3" colspan="1"><span id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:0:j_id12">Sony Camera</span></td><td class="dataCell " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:0:j_id4" colspan="1"> <input id="quantity" onBlur="calcAmnt()" type="text" /></td><td class="dataCell " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:0:j_id6" colspan="1"> <input id="Amount" readOnly="readonly" type="text" value="123" /></td></tr><tr class=" dataRow odd last " onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onBlur="if (window.hiOff){hiOff(this);}" onFocus="if (window.hiOn){hiOn(this);}"><td class="dataCell " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:1:j_id2" colspan="1"><span id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:1:j_id13">a05A0000000WP9H</span></td><td class="dataCell " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:1:j_id3" colspan="1"><span id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:1:j_id14">Nikkon Camera</span></td><td class="dataCell " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:1:j_id4" colspan="1"> <input id="quantity" onBlur="calcAmnt()" type="text" /></td><td class="dataCell " id="wizard2:wiz2form:j_id0:wiz2PBS:j_id1:1:j_id6" colspan="1"> <input id="Amount" readOnly="readonly" type="text" value="123" /></td></tr></tbody></table

 

You can see the tag  <input id="quantity" and  <input id="Amount" are repeated .

 

Please let me know, how to access these in javascript or any other way to work around

 

 

 

 

 

bob_buzzardbob_buzzard

This is because you are using regular HTML input text elements.  Use VF InputText components and the id will be unique for each one.

 

This was selected as the best answer
BDouglasBDouglas

Did you get the total amount calculation to work?  Did you find a different solution?  Can you share the code?

 

Thanks!

yvk431yvk431

Hi,

 

Sorry Douglas, it was given to me as a part of my training, I switched to our company's work in between.

So it stopped right there .

 

I'd like to help you but I am a kind of busy to continue that now.

Anyways here's my incomplete code  . I am able to show the products and their total price by default ,

need to calc the total if the user changes the number of quantity.

 

 I am redirecting to the Wizard page 2, from the following Wizard page 1 where the user selects various products

 

 

<!--Page-->

<apex:page id="wizard1" controller="Base_AC_WizardController">
<apex:form id="wform1" >
<apex:pageBlock id="WPB">
<apex:outputPanel >
<apex:pageBlockSection id="Wizard1PBS" title="Choose your products">

<apex:inputHidden value="{!selectedProductList}" id="hdntext"/>
<input type="hidden" id="hdngetsel"/>
<c:MultiSelectPickList ></c:MultiSelectPickList>


</apex:pageBlockSection>

</apex:outputPanel>


<apex:pageBlockSection title="Customer Details" columns="2">
<apex:pageBlockSectionItem >
<apex:outputPanel >
<apex:pageBlockSection id="snamepbs" >
<apex:outputText >First Name</apex:outputText>
<apex:outputText value="{!fnameerrormsg}" id="firstnamecheck" style="color:red" id="fnerrmsg" >
<apex:inputText value="{!fname}" id="AccountName">
<apex:actionSupport event="onblur" action="{!fetchFName}" rerender="snamepbs,fnerrmsg" status="snStatus"/>
</apex:inputText>
</apex:outputText>
<apex:actionStatus id="snStatus" startText="Verifying Supplier Name ....." stopText="" >
</apex:actionStatus>
</apex:pageblockSection>
</apex:outputPanel>

</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >
<apex:outputPanel >
<apex:pageBlockSection id="emailpbs" >
<apex:outputText >Email</apex:outputText>
<apex:outputText value="{!emlerrormsg}" id="firstnamecheck" style="color:red" id="emlerrmsg" >
<apex:inputText value="{!email}" id="customeremail">
<apex:actionSupport event="onblur" action="{!fetchEmail}" rerender="emailpbs,emlerrmsg" status="snStatus"/>
</apex:inputText>
</apex:outputText>
<apex:actionStatus id="snStatus" startText="Verifying Email....." stopText="" >
</apex:actionStatus>
</apex:pageblockSection>
</apex:outputPanel>

</apex:pageBlockSectionItem>



</apex:pageBlockSection>
<apex:pageBlockButtons location="bottom">
<apex:actionFunction name="redirectw2" action="{!Wizard2}" />

<apex:commandButton value="Next" onclick="check()" oncomplete="redirectw2()"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>

<script>
function check()
{
var selected = document.getElementById('productsSelectedList');
for (var i = 0; i < selected.options.length; i++)
{
if(i == 0)
document.getElementById('hdngetsel').value = selected.options[i].value;
else
document.getElementById('hdngetsel').value = document.getElementById('hdngetsel').value + '#' + selected.options[i].value;


}

//alert(document.getElementById('hdngetsel').value );
document.getElementById('wizard1:wform1:WPB:Wizard1PBS:hdntext').value = document.getElementById('hdngetsel').value ;
//alert(document.getElementById('wizard1:wform1:WPB:Wizard1PBS:hdntext').value);
return true;
}
</script>
</apex:page>

 

 

 

<!--Page 2-->

<apex:page controller="Base_AC_WizardController" action="{!SelectedProList}" id="wizard2">
<apex:form id="wiz2form">
<apex:pageBlock id="wiz2PB">
<apex:pageBlockSection id="wiz2PBS" title="Your selected products">

<apex:pageBlockTable value="{!proList}" var="rpro" id="wiz2tab">

<apex:column headerValue="Product Code" value="{!rpro.ID}"/>
<apex:column headerValue="Product Name" value="{!rpro.Product_Name__c}"/>

<apex:column headerValue="Quantity Available" id="wiz2QAvl" >
<apex:inputText value="{!rpro.Available_Quantity__c}" id="quantity" disabled="true"/>
</apex:column>
<apex:column headerValue="No of Quantity" id="wiz2QSel" >
<apex:inputText value="{!rpro.Product_Qnts_Sel__c}" id="quantitysel" onBlur="calcAmnt(this.id)"/>
</apex:column>
<apex:column headerValue="Unit Price">
<apex:inputText value="{!rpro.Product_Price__c}" id="wiz2Amount" disabled="true"/>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlockSection>
<apex:outputText value="Total Price"></apex:outputText><input type="text" value="{!totalprice}" id="tprice"/>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="Confirm" />

</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
<script>
function calcAmnt()
{
var qnt,amt;
qnt = document.getElementById('quantity').value;
amt = document.getElementById('amount').value;
if(eval(qnt) && eval(amt))
amt = qnt * amt ;
document.getElementById('amount').value = amt;
return true;

}
</script>
</apex:page>

 

 

 

 

 

 

//Class

public class Base_AC_WizardController
{
public string selectedProductList{get; set;}
public string fname{get; set;}
public string lname{get; set;}
public string address{get; set;}
public string email{get; set;}
public string fnameerrormsg{get; set;}
public string emlerrormsg{get; set;}
public string totalprice{get; set;}
public List<Product__c> proList{get; set;}

public PageReference fetchFName()
{
if(fname.trim() == '')
fnameerrormsg = 'First Name cannot be blank';
else
fnameerrormsg = '';

return null;

}

public PageReference fetchEmail()
{
if(email.trim() == '')
emlerrormsg = 'Email cannot be blank';
else
emlerrormsg = '';

return null;

}


public PageReference Wizard2()
{
if(selectedProductList != '')
return Page.Base_VFP_ProductsWizard2;
else
return null;

}

public PageReference SelectedProList()
{
if(selectedProductList != '')
{
Decimal totAmt = 0;
ID[] proid = selectedProductList.split('#');
proList = [select ID,Product_Name__c,Product_Price__c,Available_Quantity__c,Product_Qnts_Sel__c from Product__c where ID in :proid];
for(Product__c pro : proList)
totAmt = totAmt + pro.Product_Price__c ;
totalprice = String.valueOf(totAmt) ;
}
return null;
}
}

 

 

 

 

 

Message Edited by yvk431 on 01-26-2010 08:33 PM
Message Edited by yvk431 on 01-26-2010 08:42 PM
Message Edited by yvk431 on 01-26-2010 08:43 PM