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