Last week, we had the author of TDD for a Shopping Website LiveProject. Friday at 11am Ranch time, Steven Solomon will be hosting a live TDD session just for us. See for the agenda and registration link
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Jeanne Boyarsky
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • paul wheaton
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Carey Brown
  • Frits Walraven
Bartenders:
  • Piet Souris
  • Himai Minh

How to pass JSF inputText & outputText value into javascript code ?

 
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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>
 
Ranch Hand
Posts: 5575
Eclipse IDE Windows XP Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
For JSF Text box:


For HTML Text box:
 
Seetharaman Venkatasamy
Ranch Hand
Posts: 5575
Eclipse IDE Windows XP Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Welcome to JavaRanch ashok meconzee :)
 
Saloon Keeper
Posts: 25466
180
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
ashok meconzee
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
<%@ 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" />
<!--
<p:inputText id="itemqun2" value="#{item.quantity}" size="2" required="true" />
-->
</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>



<!-- <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=<h:outputText value="#{myform.itemqun}" />;


// var qun= <h:outputText 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>
 
Without deviation from the norm, progress is not possible - Zappa. Tiny ad:
Free, earth friendly heat - from the CodeRanch trailboss
https://www.kickstarter.com/projects/paulwheaton/free-heat
reply
    Bookmark Topic Watch Topic
  • New Topic