Capturing the return from a POST

Not sure how to word the topic to convey my issue. I have a form of 6 pieces of customer data. The form has:

action=“assets\cfc\new.cfc?method=modCust”
method=“post”

When I click the submit button, it executes the cfc modCust and returns a string which is displayed at the top of a blank page but I want to capture and evaluate this string. How can I do this?

you can override the normal html form submission with javascript and then capture the result and do something with it

Zac, would you believe that about an hour before your message, I was examining this very article trying to determine whether I could use it. I have tried many possible solutions only to have them not work, probably due to my incompetence.

Your message gives me confidence. Many thanks.

A bit of background. We begin from the “Customers” page where the user selects a customer and the name is passed to the “CustAdd” page via a “get”. Here upon page load a cfinvoke takes the customer name as a parameter and executes a cfc to retrieve the customer details which are loaded into a form. The user can make changes and then submit the details to a cfc for update to the database and the response to that update is what I’m trying to capture. In order to implement the “Raymond” code, I removed the “action” and “method” parameters from the “form” tag. Now, when the user makes a change and submits, it triggers a reload of the page and the aformentioned cfinvoke tries to run but without a parameter and thus generates a Lucee error. If this is the expected behavior, then I need to re-organise my cfinvoke.

Try as I may, I can’t get the “Raymond” code to work. I get various effects but none are useful or help to enlighten me. I must admit to being unsure precisely how to implement it. Do I remove the action from the form and I’m assuming that the submit button is the instigator. In order to try to debug, I’ve inserted alerts throughout the code and none are showing up. When I click the submit button, I usually obey the onsubmit=“return validateForm()” statement and at the end of that function, is the “Raymond” code but for some reason, validateForm is not executed and all I get is a re-display of the form. If I remove the “Raymond” code, validateForm is executed and the page is reloaded. I can prevent this reload by adding a return false to the “it’s valid” exit of validateForm instead of allowing it to drop of the end of the function. Please advise. Is it possible that Firefox needs more that the reference to the ajax website in order to execute the code?

Further, I set up the following in a script tag:

function myFunction()
{
alert(“button was clicked”);
$(“#myForm”).submit(function(event)
{
alert(“Here also”);
})
}

with a

button onclick=“myFunction()”>Click me

in the page body. I get to see the "button was clicked " message but not the “Here also”. Is this my lack of understanding or is my Firefox browser not liking commands which begin with a $.

If $ doesn’t work, you simply haven’t got jQuery loaded when your JavaScript runs.

You’re best off posting full code examples rather than snippets, otherwise it’s difficult to assist

Ok, I"m back after MUCH trial and error. I settled on the JQuery/Ajax form submission process.

<script> 
   	$("#myForm").submit(function(event)
	{
		alert("here1");
		event.preventDefault(); //prevent default action 
		var post_url = $(this).attr("action"); //get form action url
		var request_method = $(this).attr("method"); //get form GET/POST method
		var form_data = $(this).serialize(); //Encode form elements for submission
	
		$.ajax(
		{
			url : post_url,
			type: request_method,
			data : form_data,
			success: function(data)
			{
				alert(data);
			}
		});		
	});
</script>

That definitely gets to the cfc and returns but not to my nicely positioned alert but a new screen with just the following:

<wddxPacket version="1.0"><header/><data><string>Okey Del Honeyman Ind</string></data></wddxPacket>

So, I’m still unable to trap the cfc response…help!

try appending returnformat=json to the url or add it to the function definition in the cfc

Zac, tried adding returnformat = “json” to the cfc. I get a much cleaner result on the page but no capture. Could you show me what your suggestion would look like on the url?

Ok, finally solved it and the following works:

                $.ajax(
		{
			url : "assets/cfc/new.cfc?method=modCust",
			type: "get",
			data : {info: "Freddy"},
			dataType: "json",
			success: function(data)
			{
				if (data)
				{
					alert(data.JACK);
				}
				else
				{
					alert("here4");
				}
			},
			error: function(xhr)
			{
				alert('Request Status: ' + xhr.responseText );
			}
		});		

IN the CFC, the returntype is “struct” and the returnFormat is “json”. I’m now able to move on and try more adventurous code.