ajaxcoldfusionrangebindcfinput

Can I load the max value of the range attribute in CFINPUT using and AJAX call?


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?


Solution

  • 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})" />