Data binding on input element not working with wrapper class

Question

I'm trying to capture input from the user on a visualforce page, but on save the value of the property (myLoanWrap.Amoritization) does not reflect the input value the user enters on the UI, what am I missing? Here's the code:

Input binds to myLoanWrap.Amoritization

VF Page

<apex:form>
<div class="slds-col--padded slds-size--1-of-2">
    <!-- Amoritization -->
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="text-amortization">Amoritization (months)</label>
        <div class="slds-form-element__control">
            <apex:inputText id="input-amortization" styleClass="slds-input" value="{!myLoanWrap.Amoritization}"/>
            
            <!-- <input id="input-amortization" class="slds-input" type="number" value="{!myLoanWrap.Amoritization}"  /> -->
        </div>
    </div>
</div>

Save Button

<apex:define name="right">
    <apex:form>
        <!-- Save & Continue Button -->
        <apex:commandButton id="saveButton" styleClass="slds-button slds-button--neutral" 
        action="{!savePaymentDetails}" value="Save & Continue" />
    </apex:form>
</apex:define>

Controller - cm_PaymentInfoRouteController

public cm_LoanModel myLoanWrap {get;set;}

public cm_PaymentInfoRouteController() {
        
        //Show loading spinner as the page loads its content
        loadingSpinnerIsActive = true;

        //Get current record id
        this.loanId = ApexPages.CurrentPage().getparameters().get('id');

        //Check if test class is running
        if (!Test.isRunningTest()) {
            getLoanDetail();
        }

        //Hide loading spinner
        loadingSpinnerIsActive = false;
    }

private void getLoanDetail() {

        //Get loan payment attributes
        myLoanWrap = new cm_LoanModel(loanId);

        //Render the fixed or variable rate component based on selected rate type
        renderRateTypeComponent(myLoanWrap.RateType);

    }

public PageReference savePaymentDetails() { 
        
        system.debug('xxxxx: Save button was clicked!');
        system.debug('save --- amortization: ' + myLoanWrap.Amoritization);
        system.debug('save --- pay frequency: ' + myLoanWrap.PaymentFrequency);

        //Update loan record with payment summary details
        myLoanWrap.updateLoanPaymentDetails();

        return null;
    }

Model-cm_LoanModel

public with sharing class cm_LoanModel {
    
    //Loan Variable
    private List<LLC_BI__Loan__c> loanDetail;

    //Loan Attributes
    public Decimal TotalFinancedAmount {get; set;}
    public String TotalFinancedAmountFormatted {get; set;}
    public Decimal Amoritization {get; set;}
    public Decimal Term {get; set;}
    public String PaymentFrequency {get; set;}
    public String PaymentType {get; set;}
    public String RateType {get; set;}
    public Decimal QualifyingRate {get; set;}
    public Decimal PostedBasisRate {get; set;}
    public Decimal PostedBasisAdjustment {get; set;}
    public Decimal NetRate {get; set;}
    public String NetRateFormatted {get; set;}

    
    public cm_LoanModel(String id) {

        //Query Loan record
        queryLoan(id);
    }

    public void queryLoan (String loanID) {

        loanDetail = [SELECT Name, cm_Total_Financed_Amount__c, LLC_BI__Amount__c, cm_Total_Financed_Charged_Fees__c, LLC_BI__Amortized_Term_Months__c, 
        LLC_BI__Payment_Schedule__c, LLC_BI__Payment_Type__c, LLC_BI__Pricing_Basis__c, LLC_BI__Rate_Discount__c, LLC_BI__InterestRate__c, LLC_BI__Term_Months__c
        FROM LLC_BI__Loan__c 
        WHERE  Id =: loanID LIMIT 1];
        
        if(!loanDetail.isEmpty()) {
            
            System.debug('xxxxxx Loan Detail: ' + loanDetail);

            for(LLC_BI__Loan__c queriedLoan : loanDetail) {
                //Set Loan Attributes
                this.TotalFinancedAmount = queriedLoan.cm_Total_Financed_Amount__c;
                this.TotalFinancedAmountFormatted = '$' + (TotalFinancedAmount.format().contains('.')?TotalFinancedAmount.format():(TotalFinancedAmount.format()+'.00'));
                
                this.Amoritization = queriedLoan.LLC_BI__Amortized_Term_Months__c;
                this.Term = queriedLoan.LLC_BI__Term_Months__c;

                this.PaymentFrequency = queriedLoan.LLC_BI__Payment_Schedule__c;
                this.PaymentType = queriedLoan.LLC_BI__Payment_Type__c;

                this.RateType = (String)queriedLoan.LLC_BI__Pricing_Basis__c;
                //this.QualifyingRate = 4.53;

                //this.PostedBasisRate = queriedLoan.LLC_BI__Pricing_Basis__c;
                this.PostedBasisAdjustment = queriedLoan.LLC_BI__Rate_Discount__c;
                this.NetRate = queriedLoan.LLC_BI__InterestRate__c;
                this.NetRateFormatted = (NetRate.format().contains('.')?NetRate.format():(NetRate.format()+'.00')) + '%';
            }
        }
        else {
            System.debug('ERROR: The loan record was not found! Loan ID: ' + loanID); 
        }
    }

    public void updateLoanPaymentDetails () {
        try {

            //Update the queried loan record
            for(LLC_BI__Loan__c queriedLoan : loanDetail) {
                
                queriedLoan.LLC_BI__Amortized_Term_Months__c = this.Amoritization;

            }

            update loanDetail;
        }
        catch(DmlException e) {
            System.debug('Error in class cm_LoanModel.updateLoanPaymentDetails: ' + e.getMessage());
        }
    }

}  

Moved the command button under the same apex form as the input element

Answer 1

The issue is that you have used two forms. Combine your command button in the same form and it should work fine. Command buttons takes form as the context, if the form does not have any reference it would return null.

public cm_PaymentInfoRouteController(){
    myLoanWrap = new cm_LoanModel();
} 

Tested with :

public class cm_PaymentInfoRouteController {
    public TestWrapper myLoanWrap {get;set;}

    public cm_PaymentInfoRouteController(){
        myLoanWrap = new TestWrapper();
    }

    public PageReference savePaymentDetails() {

        system.debug('xxxxx: Save button was clicked!');
        system.debug('save --- amortization: ' + myLoanWrap.Amoritization);
        return null;
    }
}

Page :

<apex:page id="testPage" controller="cm_PaymentInfoRouteController">
    <apex:form>
        <div class="slds-col--padded slds-size--1-of-2">
            <!-- Amoritization -->
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="text-amortization">Amoritization (months)</label>
                <div class="slds-form-element__control">
                    <apex:inputText id="input-amortization" styleClass="slds-input" value="{!myLoanWrap.Amoritization}"/>

                    <!-- <input id="input-amortization" class="slds-input" type="number" value="{!myLoanWrap.Amoritization}"  /> -->
                </div>
            </div>
        </div>
        <apex:commandButton id="saveButton" styleClass="slds-button slds-button--neutral"
                            action="{!savePaymentDetails}" value="Save & Continue" />
    </apex:form>
    <apex:define name="right">
        <apex:form>
            <!-- Save & Continue Button -->

        </apex:form>
    </apex:define>
</apex:page>

Wrapper :

global class TestWrapper {

    public Decimal Amoritization {get; set;}
}