skip to Main Content

I am trying to use Ajax/JQuery to submit a form, and on the target page (response.cfm) I am returning a Json which will return either a success or a failure message (based on the checkbox) on the form page (form.cfm). But I can’t seem to access the data sent by the ajax request.

form.cfm

<form id="frm_test">
  <input type="text" name="firstname" id="firstname" placeholder="First name" required /><br>
  <input type="text" name="surname" id="surname" placeholder="Surname" required /><br>
  <input type="email" name="email" id="email" placeholder="Email" required /><br>
  <input type="checkbox" name="error" id="error" />Return error (check to see the error message. leave empty to see a success message)<br>
  <input type="submit" value="Save changes" id="submitdata" />
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

  $("#frm_test").submit(function (eventData) {
    event.preventDefault();
    $("#message").empty();
    var postData = {
      first_name: $('#firstname').val(),
      family_name: $('#surname').val(),
      email: $('#email').val(),
      error: $('#error').is(':checked')
    };

    $.ajax({
      url: "response.cfm",
      method: "POST",
      data: postData
    }).done(
      function(response) {
        if (response["SUCCESSMESSAGE"] !== null) {
          $("#message").append(response["SUCCESSMESSAGE"]);
        } else if (response["EXCEPTIONMESSAGE"] !== null) {
          $("#message").append(response["EXCEPTIONMESSAGE"]);
        }
      });

    $("#frm_test").trigger("reset");
  });

</script>


<div id="message"></div>

response.cfm

<cfprocessingdirective suppresswhitespace="Yes">

  <cfset response = {
    SuccessMessage: 'checkbox value' ? JavaCast("null", "") : "Success",
    ExceptionMessage: 'checkbox value' ? "An error occurred" : JavaCast("null", "")
  }>
  
  <cfheader name="Content-Type" value="application/json">
    
  <cfoutput> #serializeJSON(response)# </cfoutput>  
  
</cfprocessingdirective>

2

Answers


  1. You need to check for the posted value for error which will be available in the form scope.

      <cfset response = {
        SuccessMessage: form.error ? JavaCast("null", "") : "Success",
        ExceptionMessage: form.error ? "An error occurred" : JavaCast("null", "")
      }>
    
    Login or Signup to reply.
  2. Expanding on Dan’s solution

    <cfsilent>
    
    ... 
    
    <cfset response = [
       "SuccessMessage" : form.error ? JavaCast("null", "") : "Success",
       "ExceptionMessage" : form.error ? "An error occurred" : JavaCast("null", "")
     ]>
    
     ...
    
     <cfsilent>  
    
     <cfoutput> #serializeJSON(response)# </cfoutput>  
    

    So what are the changes?

    1. silent is the most effective in keeping stray spaces
    2. Using an ordered struct makes it easier to debug because the results stay in the same order
    3. Using quoted keys keeps them in the same case which also makes it easier to debug.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search