How can I do this?
I'm using Seam 1.2.1 with Glassfish v2b41d.
I have a payment information page as part of my shopping cart checkout process. The top of the page allows the user to input credit card info: card type, card number, exp date, security code. The bottom part of the page allows the user to enter the billing address.
I want to position a pair of radio buttons just above the billing address inputs that allows the user to select whether to use the shipping address as the billing address or not.
I have this working with one problem. If I position the address selector radio buttons above the billing address, it is in the same <h:form> as the credit card info and billing address inputs. When I select one of the radio buttons, the form is submitted by a valueChangeListener (via the onchange="submit()", causing validation errors on the form, e.g. the credit card info and billing address input fields).
I tested this by coding another <h:form> below the <h:form> used to submit the actual credit card info and billing address, and it works perfectly, except that the address selector radio buttons are in the wrong place on the page. :(
Is there a way to either disable validation (such as immediate="true") for the entire <h:form> when the user selects one of the address selector radio buttons, or alternatively, to position the radio buttons in the right place on the page (just above the billing address inputs), even though they're in a different <h:form>?
I want the page to look like this:
<Credit card info inputs>
<Address selector radio buttons>
<Billing address inputs>
Thanks very much... the JSF page code is listed below....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:s="http://jboss.com/products/seam/taglib">
<body>
<ui:composition>
<h1>Step 2: Payment Information</h1>
<h4>Your credit card will not be processed for payment until you review the order details and press Submit in the next page.</h4>
<f:subview rendered="true">
<h:form>
<s:validateAll>
<h2>Card Details</h2>
<h:panelGrid columns="3" styleClass="dataEntryGrid" columnClasses="dataEntryLabel, dataEntryComp, dataEntryErrorMsg">
<h:outputLabel for="cardType" value="Card Type" />
<h:selectOneMenu id="cardType" value="#{creditCard.cardType}" required="true" requiredMessage="Card Type is required.">
<f:selectItem itemLabel="AMEX" itemValue="AMEX"/>
<f:selectItem itemLabel="MASTER" itemValue="MASTER"/>
<f:selectItem itemLabel="VISA" itemValue="VISA"/>
</h:selectOneMenu>
<h:message for="cardType" styleClass="error" />
<h:outputLabel for="cardNumber" value="Card Number" />
<h:inputText id="cardNumber" label="Card Number" value="#{creditCard.cardNumber}" maxlength="16" size="30"
requiredMessage="Card Number is required." />
<h:message for="cardNumber" styleClass="error" />
<h:outputLabel for="expirationDate" value="Expiration Date (MM/YY)" />
<h:inputText id="expirationDate" label="Expiration Date (MM/YY)" value="#{creditCard.expirationDate}" maxlength="5" size="5"
requiredMessage="Expiration Date is required." />
<h:message for="expirationDate" styleClass="error" />
<h:outputLabel for="securityCode" value="Security Code" />
<h:inputSecret id="securityCode" label="Security Code" value="#{creditCard.securityCode}" maxlength="4" size="5"
requiredMessage="Security Code is required." />
<h:message for="securityCode" styleClass="error" />
</h:panelGrid>
</s:validateAll>
<h2>Billing Address</h2>
<ui:include src="address.xhtml">
<ui:param name="address" value="#{creditCard.paymentAddress}"/>
</ui:include>
<h:commandButton action="customerInfo" value="Back" style="margin:10px"/>
<h:commandButton action="#{shoppingCartBean.processPaymentInformation}"
value="Continue"
style="margin:10px"/>
</h:form>
<h:form>
<h:selectOneRadio id="addressRadio"
value="#{shoppingCartBean.addressOption}"
immediate="true"
valueChangeListener="#{shoppingCartBean.addressOptionSelected}"
onchange="submit()">
<f:selectItem itemValue="sameAsShipAddress" itemLabel="Same as Shipping Address"/>
<f:selectItem itemValue="differentFromShipAddress" itemLabel="Other"/>
</h:selectOneRadio>
</h:form>
</f:subview>
</ui:composition>
</body>
</html>