| Author |
How to pass JSF inputText & outputText value into javascript code ?
|
ashok meconzee
Greenhorn
Joined: Mar 06, 2012
Posts: 3
|
|
Here i need to pass the JSF InputText and OutputText shopping cart value into JavaScript code. I tried in different ways to pass the values. But, no result I was pasted the code below.
I want to pass this values into javascript code value="#{item.productId} , value="#{item.description}, value="#{item.quantity}" , value="#{item.price_retail}.
please help me to overcome this issues.
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>Shopping Cart</title><link rel="stylesheet" type="text/css" href="<%= request.getContextPath() + "/Styles.css" %>
</head>
<body>
<%= session.getAttribute("item_price") %>
<%= session.getAttribute("part_number") %>
<f:view>
<h:form id="myForm" >
<table border="0" cellspacing="4" cellpadding="0"
width="<h:outputText value="#{initParam.pageWidth}"/>
<tr>
<td colspan="2">
<%-- The header --%>
<%@ include file="header.jsp"%>
</td>
</tr>
<tr>
<td valign="top">
<%-- The menu --%>
<%@ include file="menu.jsp"%>
</td>
<td valign="top">
<br/>
<h:dataTable var="item" value="#{shoppingCartBean.shoppingItems}"
rowClasses="InnerTable" width="100%"
headerClass="NormalLarge"
columnClasses="List-left, List-left, List-left, List-right, List-right, List-right">
<h:column>
<f:facet name="header">
<h:outputText value="Part Number" />
</f:facet>
<f:facet name="footer">
<h:outputText styleClass="NormalBoldBlue" value="Total: "/>
</f:facet>
<h:outputText value="#{item.productId}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Description" />
</f:facet>
<h:outputText value="#{item.description}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Weight" />
</f:facet>
<f:facet name="footer">
<h:outputText styleClass="NormalBoldBlue" value="#{shoppingCartBean.totalWeight}"/>
</f:facet>
<h:outputText value="#{item.weight}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Qty" />
</f:facet>
<h:inputText id="itemqun" value="#{item.quantity}" size="2" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Retail Price" />
</f:facet>
<h:outputText id="ret" value="#{item.price_retail}">
<f:convertNumber pattern="$###,###.##" type="currency"/>
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Your Price" />
</f:facet>
<f:facet name="footer">
<h:outputText styleClass="NormalBoldBlue" value="#{shoppingCartBean.total}"/>
</f:facet>
<h:outputText value="#{item.price}">
<f:convertNumber pattern="$###,###.##" type="currency"/>
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Delete?" />
</f:facet>
<h:selectBooleanCheckbox value="#{item.selected}">
</h:selectBooleanCheckbox>
</h:column>
</h:dataTable>
<br/>
<h:commandButton action="checkOut" value="Check Out">
<f:actionListener type="pizzaria.AppActionListener"/>
</h:commandButton>
<h:commandButton action="removeItems" value="Remove Checked Items">
<f:actionListener type="pizzaria.AppActionListener"/>
</h:commandButton>
<h:commandButton action="changeQuantity" value="Update Quantities">
<f:actionListener type="pizzaria.AppActionListener"/>
</h:commandButton>
<br><br>
</td>
</tr>
<tr>
<td colspan="2">
<%-- The footer --%>
<%@ include file="footer.jsp"%>
</td>
</tr>
</table>
<!--
<script language="JavaScript" type="text/javascript">
function validate
{
"Piece of code to Validate your form"
document.myForm1.action.value = "URL which you want to call"
document.myForm1.submit(); // It will submit he page
}
</script>
-->
<!-- <input type="text" name="myForm:item_qun" /> -->
<script language="JavaScript" type="text/javascript">
function submitForm() {
//var qun = document.getElementById(myForm.name+ ':itemqun' );
//var qun = document.getElementById("myForm:itemqun").value;
var test = <%= session.getAttribute("item_price") %>
var test2 = <%= session.getAttribute("part_number") %>
var qun = document.getElementById('myForm:itemqun');
//document.propFile.submit(); // It will submit he page
// var qun = document.getElementById('myForm:itemqun');
// var qun='4';
//var qun = form["myForm:item_qun"].value;
// var qun = document.getElementById("myForm.quantity");
alert('Static Cart Total :'+test);
//alert(test);
alert('Static Part Number :'+test2);
alert(qun);
//alert('Static Quantity :'+qun);
//document.myForm.action.value =qun;
document.myForm1.amount_1.value=test;
document.myForm1.item_name_1.value=test2;
document.myForm1.quantity_1.value=qun;
document.myForm1.submit();
}
</script>
</h:form>
</f:view>
<form method="post" name="myForm1" action="https://www.sandbox.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart"/>
<input type="hidden" name="upload" value="2"/>
<input type="hidden" name="business" value="zexample_94839_biz@gmail.com"/>
<input type="hidden" name="item_name_1" value="Part Number"/>
<input type="hidden" name="quantity_1" value="1">
<input type="hidden" name="amount_1"/>
<input type="hidden" name="return_url" value="http://www.example.com"/>
<input type="hidden" name="cancel_url" value="http://www.example.com"/>
<input type="image" src='https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif' border='0' align='top' alt='Check out with PayPal' onclick="submitForm()" />
</form>
</body>
</html>
|
 |
Seetharaman Venkatasamy
Ranch Hand
Joined: Jan 28, 2008
Posts: 5575
|
|
For JSF Text box:
For HTML Text box:
|
|
Seetharaman Venkatasamy
Ranch Hand
Joined: Jan 28, 2008
Posts: 5575
|
|
|
Welcome to JavaRanch ashok meconzee :)
|
|
Tim Holloway
Saloon Keeper
Joined: Jun 25, 2001
Posts: 14480
|
|
Ouch. There's a Code button on the message editor. You can use it to wrap formatted text like Java code and XML. It makes it much easier to read and doesn't chew up your indentation.
Don't use scriptlets in JSF. JSF views are not the same thing as JSPs. They are not compiled into Java code like JSPs are. For the same reason, don't use JSTL, either. It will only lead to trouble, and JSF does have equivalents for the JSTL functions so you don't need JSTL.
When working with JavaScript in JSF, jQuery can make your job easier. It simplifies access to the DOM. However, you do have to use the "jQuery()" form and not the "$" form, since "$" will be misinterpreted as EL.
|
Customer surveys are for companies who didn't pay proper attention to begin with.
|
|
ashok meconzee
Greenhorn
Joined: Mar 06, 2012
Posts: 3
|
|
Thanks for reply
I integrate code with .value with my jsf form and jsf id but it is not working. Please help me in correct way.
|
|
ashok meconzee
Greenhorn
Joined: Mar 06, 2012
Posts: 3
|
|
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() + "/Styles.css" %>">
</head>
<body>
<%= session.getAttribute("item_price") %>
<%= session.getAttribute("part_number") %>
<f:view>
<h:form id="myForm" >
<table border="0" cellspacing="4" cellpadding="0" width="<h utputText value='#{initParam.pageWidth}'/>">
<tr>
<td colspan="2">
<%-- The header --%>
<%@ include file="header.jsp"%>
</td>
</tr>
<tr>
<td valign="top">
<%-- The menu --%>
<%@ include file="menu.jsp"%>
</td>
<td valign="top">
<br/>
<h:dataTable var="item" value="#{shoppingCartBean.shoppingItems}"
rowClasses="InnerTable" width="100%"
headerClass="NormalLarge"
columnClasses="List-left, List-left, List-left, List-right, List-right, List-right">
<h:column>
<f:facet name="header">
<hutputText value="Part Number" />
</f:facet>
<f:facet name="footer">
<hutputText styleClass="NormalBoldBlue" value="Total: "/>
</f:facet>
<hutputText value="#{item.productId}"/>
</h:column>
<h:column>
<f:facet name="header">
<hutputText value="Description" />
</f:facet>
<hutputText value="#{item.description}"/>
</h:column>
<h:column>
<f:facet name="header">
<hutputText value="Weight" />
</f:facet>
<f:facet name="footer">
<hutputText styleClass="NormalBoldBlue" value="#{shoppingCartBean.totalWeight}"/>
</f:facet>
<hutputText value="#{item.weight}"/>
</h:column>
<h:column>
<f:facet name="header">
<hutputText value="Qty" />
</f:facet>
<h:inputText id="itemqun" value="#{item.quantity}" size="2" />
<!--
<p:inputText id="itemqun2" value="#{item.quantity}" size="2" required="true" />
-->
</h:column>
<h:column>
<f:facet name="header">
<hutputText value="Retail Price" />
</f:facet>
<hutputText id="ret" value="#{item.price_retail}">
<f:convertNumber pattern="$###,###.##" type="currency"/>
</hutputText>
</h:column>
<h:column>
<f:facet name="header">
<hutputText value="Your Price" />
</f:facet>
<f:facet name="footer">
<hutputText styleClass="NormalBoldBlue" value="#{shoppingCartBean.total}"/>
</f:facet>
<hutputText value="#{item.price}">
<f:convertNumber pattern="$###,###.##" type="currency"/>
</hutputText>
</h:column>
<h:column>
<f:facet name="header">
<hutputText value="Delete?" />
</f:facet>
<h:selectBooleanCheckbox value="#{item.selected}">
</h:selectBooleanCheckbox>
</h:column>
</h:dataTable>
<br/>
<h:commandButton action="checkOut" value="Check Out">
<f:actionListener type="pizzaria.AppActionListener"/>
</h:commandButton>
<h:commandButton action="removeItems" value="Remove Checked Items">
<f:actionListener type="pizzaria.AppActionListener"/>
</h:commandButton>
<h:commandButton action="changeQuantity" value="Update Quantities">
<f:actionListener type="pizzaria.AppActionListener"/>
</h:commandButton>
<br><br>
</td>
</tr>
<tr>
<td colspan="2">
<%-- The footer --%>
<%@ include file="footer.jsp"%>
</td>
</tr>
</table>
<!-- <input type="text" name="myForm:item_qun" /> -->
<script language="JavaScript" type="text/javascript">
function submitForm() {
var test = <%= session.getAttribute("item_price") %>
var test2 = <%= session.getAttribute("part_number") %>
// var qun = document.getElementById('myForm:itemqun');
// var qun = document.getElementById("myForm:itemqun");
var qun = document.getElementById("myForm:itemqun").value
// var qun=<hutputText value="#{myform.itemqun}" />;
// var qun= <hutputText value="#{item.productId}"/> ;
//var qun = document.getElementById(myForm.name+ ':itemqun' );
//var qun = document.getElementById("myForm:itemqun").value;
// var qun = document.getElementById('myForm:itemqun');
//document.propFile.submit(); // It will submit he page
//var qun='4';
//var qun = form["myForm:item_qun"].value;
// var qun = document.getElementById("myForm.quantity");
alert('Static Cart Total :'+test);
//alert(test);
alert('Static Part Number :'+test2);
alert(qun);
//alert('Static Quantity :'+qun);
//document.myForm.action.value =qun;
document.myForm1.amount_1.value=test;
document.myForm1.item_name_1.value=test2;
document.myForm1.quantity_1.value=qun;
document.myForm1.submit();
}
</script>
</h:form>
</f:view>
<form method="post" name="myForm1" action="https://www.sandbox.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart"/>
<input type="hidden" name="upload" value="2"/>
<input type="hidden" name="business" value="zeechi_1315294839_biz@gmail.com"/>
<input type="hidden" name="item_name_1" value="Part Number"/>
<input type="hidden" name="quantity_1" value="1">
<input type="hidden" name="amount_1"/>
<input type="hidden" name="return_url" value="http://www.marinepartsexpress.com"/>
<input type="hidden" name="cancel_url" value="http://www.marinepartsexpress.com"/>
<input type="image" src='https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif' border='0' align='top' alt='Check out with PayPal' onclick="submitForm()" />
</form>
</body>
</html>
|
|
 |
|
|
subject: How to pass JSF inputText & outputText value into javascript code ?
|
|
|
0
