Skip to main content
WolfShade
WolfShade
Legend
March 2, 2015
Answered

Submit form via AJaX to CFC

  • March 2, 2015
  • 6 replies
  • 4154 views

Hello, everyone,

I have a form (NOT a CFFORM - those are evil) that I am attempting to submit the data to a CFC.

Right now, all the CFC is supposed to do (for testing purposes) is to display the form data in a DIV on the same page as the form.

Every time I submit the data, I get a 500 error message stating that the page cannot be displayed.

Here is pseudo-code for what I've got, now.

<form name="subOpp" id="subOpp" enctype="application/x-www-form-urlencoded">


  <!--- a couple of inputs, shortened for brevity --->


  <input type="text" name="company_name" id="company_name" />


  <input type="text" name="company_address" id="company_address" />


...


  <input type="button" name="submitBtn" id="submitBtn" value="Submit" onclick="submitForm(this.form,'so');" />


</form>




<script type="text/javascript">


  function submitForm(formObj,whichForm){


    XHR = new XMLHttpRequest();


    XHR.open("post","../../components/public.cfc?method=submitData",true);


    XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");


    XHR.onreadystatechange = function(){


        if(XHR.readyState === 4) && (XHR.status === 200){


            document.getElementById('result').innerHTML = XHR.responseText;


            }


        }


    XHR.send(formObj);


    }


</script>


<cfcomponent>


  <cffunction name="submitData" output="yes" returntype="any">


    <cfargument name="form" type="struct" required="yes" />


    <cfreturn "HEY!" />


  </cffunction>


</cfcomponent>

Firebug is showing:

POST http://localhost/public/components/public.cfc?method=submitData 500 Internal Server Error

The page you are trying to access cannot be displayed.  Please try again or notify the administrator.

Am I missing a step??

V/r,

^_^

    This topic has been closed for replies.
    Correct answer BKBK

    A crucial point I mentioned:

    The argument of the function, submitData, is required. Since you are invoking the CFC by URL, ColdFusion expects you to pass a value for form_fields parameter.
    In other words, send('form_fields=.......')

    6 replies

    WolfShade
    WolfShadeAuthor
    Legend
    March 9, 2015

    Another thing that I _just_ now noticed.


    It doesn't matter if the method exists, or not - both cases give the exact same error message: "Page cannot be displayed".

    This makes me think it might be a CFAdmin setting.  But where?

    V/r,

    ^_^

    BKBK
    Community Expert
    BKBKCommunity ExpertCorrect answer
    Community Expert
    March 9, 2015

    A crucial point I mentioned:

    The argument of the function, submitData, is required. Since you are invoking the CFC by URL, ColdFusion expects you to pass a value for form_fields parameter.
    In other words, send('form_fields=.......')
    WolfShade
    WolfShadeAuthor
    Legend
    March 11, 2015

    I find it odd that if only one argument is being passed to the CFC, it has to be "introduced" by appending "varName=" to the string/object that is being passed.

    But, I did as you suggested, and it's working.

    Thank you,

    ^_^

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    March 7, 2015

    A suggestion for a solution:

      <form name="subOpp" id="subOpp" enctype="application/x-www-form-urlencoded" action="ex">

          <!--- a couple of inputs, shortened for brevity --->

          <input type="text" name="company_name" id="company_name" />

          <input type="text" name="company_address" id="company_address" />

        <input type="button" name="submitBtn" id="submitBtn" value="Submit" onClick="submitForm('subOpp','so');"/>

        </form>

        <script type="text/javascript">

          function submitForm(formID,whichForm){

              var responseStr ="";

           var XHR = new XMLHttpRequest();

            XHR.open("post","public.cfc?method=submitData",true);

            XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            XHR.onreadystatechange = function(){

                if(XHR.readyState == 4 && XHR.status == 200){

                    document.getElementById('result').innerHTML = XHR.responseText;

                    }

                }

                /* Create response string. Note that it starts with the name of the argument of public.cfc's function, submitData */

                 responseStr = 'form_fields=company_details:';

                // add company name to response

                responseStr = responseStr + 'company_name=' + document.getElementById(formID).company_name.value;

                  /* add company address to response, using non-special character | to separate the values */

                responseStr = responseStr + '|' + 'company_address=' + document.getElementById(formID).company_address.value;

                XHR.send(responseStr);

          }

        </script>

    public.cfc

    <cfcomponent>

      <cffunction name="submitData" output="yes" returntype="any" access="remote">

        <cfargument name="form_fields" type="string" required="yes" />

        <cfreturn "HEY! " & arguments.form_fields />

      </cffunction>

    </cfcomponent>

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    March 7, 2015

    WolfShade wrote:

        <form name="subOpp" id="subOpp" enctype="application/x-www-form-urlencoded">

          

        ...

          <input type="button" name="submitBtn" id="submitBtn" value="Submit" onclick="submitForm(this.form,'so');" />

        </form> 

        <script type="text/javascript">

          function submitForm(formObj,whichForm){

            XHR = new XMLHttpRequest();

            XHR.open("post","../../components/public.cfc?method=submitData",true);

            XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            XHR.onreadystatechange = function(){

                if(XHR.readyState === 4) && (XHR.status === 200){

                    document.getElementById('result').innerHTML = XHR.responseText;

                    }

                }

            XHR.send(formObj);

            }

        </script> 

    There are at least 2 problems with this.

    1) With this.form a child element (a form input field) attempts to reference its parent (the form);

    2) The argument of the AJAX send function should be a string whereas, here, it is a form object.

    WolfShade
    WolfShadeAuthor
    Legend
    March 9, 2015

    BKBK wrote:

    2) The argument of the AJAX send function should be a string whereas, here, it is a form object.

    So instead of sending the form object, itself, I should send a JSON stringified form object?  I tried that, and I'm still getting "page cannot be displayed."

    V/r,

    ^_^

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    March 9, 2015

    Could you show us what you tried?

    WolfShade
    WolfShadeAuthor
    Legend
    March 5, 2015

    Could it be a setting in CFAdmin, maybe?  If it is, I can't think of where that setting would be.

    V/r,

    ^_^

    H
    haxtbh
    Inspiring
    March 5, 2015

    If you are getting an 500 error then you should have something in the CF logs to tell you why. Check the application.log and/or the coldfusion-out.log.

    WolfShade
    WolfShadeAuthor
    Legend
    March 5, 2015

    The coldfusion-out log ONLY ever says that the log initialised.  I've never seen anything else in there.  Ever.

    Ditto for coldfusion-error log.

    After having done a "submit" five times in a row, the application log has only one entry for that timestamp: Session rotated successfully.

    V/r,

    ^_^

    WolfShade
    WolfShadeAuthor
    Legend
    March 4, 2015

    Anyone else have any ideas what might be causing this to happen?

    V/r,

    ^_^

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    March 7, 2015

    WolfShade wrote:

    Anyone else have any ideas what might be causing this to happen?

    Yes, WolfShade. The argument of the function, submitData, is required. Since you are invoking the CFC by URL, ColdFusion expects you to pass a value for form_fields parameter.

    Dave Ferguson
    Dave Ferguson
    Participating Frequently
    March 2, 2015

    Change you function to this.  The access needs to be set to remote.

      <cffunction name="submitData" output="yes" returntype="any" access="remote" > 

        <cfargument name="form" type="struct" required="yes" /> 

        <cfreturn "HEY!" /> 

      </cffunction> 

    WolfShade
    WolfShadeAuthor
    Legend
    March 2, 2015

    Thanks for your reply!

    Added

    access="remote"

    , no change.  Tried

    access="public"

    , also no change.   Still getting error that page cannot be displayed.

    V/r,

    ^_^

    Dave Ferguson
    Dave Ferguson
    Participating Frequently
    March 2, 2015

    Sorry, I didn't look to closely at the code you originally posted. Take out the argument and it should work.

    By having <cfargument name="form" type="struct" required="yes" />


    The function is expecting to be passed in a var named form.  For example.... http://localhost/public/components/public.cfc?method=submitData&form=123

    The form scope will be available inside the function.  You don't need to declare an argument for it.


    HTH,

    --Dave

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices