Question

I have a CFINPUT tag in a CFFORM. I want to set the range dynamically without posting the page. I have several AJAX calls throughout the page to dynamically load form fields on the fly:

<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" />

<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" />

<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" />

<cfdiv 
    id="maxQty" 
    bind="cfc:Data.getMaxQty({itemId})" />

<cfinput 
    type="text" 
    id="qty" 
    name="qty" />

<cfdiv 
    id="itemId" 
    bind="cfc:Data.getItemId({this}, {that}, {theOther})" />

In the above CFFORM, I basically want to set the minValue of the range to “1” and the maxValue of the range to the value of cfc:Data.getMaxQty({itemId}).

Is this possible? How can I do it?

Answer 1

The quick answer is “No”. But there is a very easy workaround. Simply load the value that you want to be the maximum into a CFDIV or a CFINPUT hidden field using binding, then access that value in a JavaScript function that validates the min/max values when you submit the form:

<script type="text/javascript">
<!--

function validateForm() {
    var maxQty = document.getElementById("maxQty").innerHTML;

    if (document.myForm.add_item_1.value < 1 || document.myForm.add_item_1.value > maxQty) {
        alert("Quantity must be an integer value between 1 and " + maxQty);

        return false;
    }

    return true;
}

//-->
</script>

<cfform name="myForm" method="post" action="myFormAction.csm" onsubmit="return validateForm();">

<cfdiv 
    id="maxQty" 
    bind="cfc:Data.getMaxQty({itemId})" />