Submitting a CFFORM inside a CFDIV

I came across a problem submitting a CFFORM inside a CFDIV container. Normally any CFFORM submitted inside a CFDIV container will be posted back to the CFDIV (thanks CF for all the built in functions that make my life easy).... so I assumed below would work...

view plain print about
1<cfform>
2 Items Per Page:
3 <cfselect name="sortby" onChange="submit()">
4 <option value ="0"></option>
5 <option value ="0">Lowest Price</option>
6 <option value ="1">Highest Price</option>
7 </cfselect>
8 </cfform>

but because I was not using the regular submit button none of ColdFusion's built-in ajax form submission events were being triggered as a result.

a simple work around...

view plain print about
1<InvalidTag>
2submitsortby = function() {
3javaScript:ColdFusion.navigate('productpage.cfm','productlistDiv',null,null,'get','sortbyFrm');return false;
4}
5</script>
6
7
8<cfform id="sortbyFrm" name="sortbyFrm">
9 Items Per Page:
10 <cfselect name="sortby" onChange="submitsortby()">
11 <option value ="0"></option>
12 <option value ="0">Lowest Price</option>
13 <option value ="1">Highest Price</option>
14 </cfselect>
15 </cfform>

however I am curious as there must be a another way to call CF's built-in AJAX form submission event without using "ColdFusion.navigate"? I have tired a number of other things like using "document.sortbyFrm.submit(), ColdFusion.ajax.submitForm()" but with no results.

Dec02

Post Info

Comments 5

[Add Comment] [Subscribe to Comments]
  1. Sam Farmer's Gravatar # Posted By Sam Farmer
    02/12/08 17:54

    Interesting dilemma.

    What happens if you use ColdFusion.Ajax.submitForm(formId, URL[, callbackhandler, errorhandler, httpMethod, asynch]) ?

  1. Glyn Jackson's Gravatar # Posted By Glyn Jackson
    02/12/08 18:06

    tried that first but it submits the whole page, the ID is correct, maybe its just something I am doing wrong, its often the simple things I don't think of first. ColdFusion.navigate works using the same parameters passed to the function. Its not any issue just curious lol

  1. Azadi Saryev's Gravatar # Posted By Azadi Saryev
    03/12/08 08:41

    first, in your submitsortby js function there is no need for javascript: annotation or for return false; line.

    now, more to the point:
    as it happens to be, there IS another (not sure if it is a simpler one or not) method:
    if you look at the page's generated source code, you will see that CF adds an onsubmit atribute to the form with the following js function in it:
    return ColdFusion.Ajax.checkForm(this, _CF_checksortbyFrm,'productlistDiv')
    where:
    this - represents/refers to the form object;
    _CF_checksortbyFrm - refers to the js function CF has also added to the page to carry out built-in cf form validation [the function name is generated dynamically and is comprised of _CF_check prefix and your form's NAME attribute];
    'productlistDiv' - the name/id of the container the form is displayed in (<cfdiv id="productslistDiv"> in your case).

    so, with a little change to the above function it can be put in the cfselect's onchange event, and voila - no need for any other js code:
    <cfselect name="sortby" onChange="return ColdFusion.Ajax.checkForm(this.form,_CF_checksortbyFrm,'productlistDiv');">

    note the little change in the above function: 'this' has been changed to 'this.form' to keep referring to the form object (instead of select list object it would refer to was it left as 'this')

    hth

    Azadi

  1. Azadi Saryev's Gravatar # Posted By Azadi Saryev
    03/12/08 08:53

    to make it more clear, here's the test code:
    main.cfm:
    =========
    <cfajaximport tags="cfform">
    <cfdiv id="productlistDiv" bind="url:formpage.cfm" />

    formpage.cfm:
    ============
    <cfform id="sortbyFrm" name="sortbyFrm" format="html">
    Items Per Page:
    <cfselect name="sortby" onChange="return ColdFusion.Ajax.checkForm(this.form,_CF_checksortbyFrm,'productlistDiv');">
    <option value ="">Please select...</option>
    <option value ="0">Lowest Price</option>
    <option value ="1">Highest Price</option>
    </cfselect>
    </cfform>
    <cfif structkeyexists(form, 'sortby')>
    <p>sortby: <cfoutput>#form.sortby#</cfoutput></p>
    <cfelse>
    <p>form has not ben submitted yet...</p>
    </cfif>

    Azadi

  1. Glyn Jackson's Gravatar # Posted By Glyn Jackson
    03/12/08 10:06

    yes there is no need for "return false" I just left it in from when I had it on the onchange

    also thanks Azadi, yes it also submits using the function , I was thinking there must be a way to call what is already there and should have checked the page source. thanks :)

[Add Comment]