aspose file tools*
The moose likes JSF and the fly likes How to  pass JSF inputText & outputText value into javascript code ? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "How to  pass JSF inputText & outputText value into javascript code ?" Watch "How to  pass JSF inputText & outputText value into javascript code ?" New topic
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: 15641
    
  15

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="<hutputText 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>
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to pass JSF inputText & outputText value into javascript code ?
 
Similar Threads
h:datatable, how multiply row cell A with row cell B and set value in row cell C
commandLink not working in datatable+jsf2.0
HTML table to JSF table
need help in jquery
DataTable inside a DataTable