JQuery - CFML - form submit example

Report · Nov 08, 2010

I have searched for a complete example on how to use JQuery and CFML to submit a form.

So how to submit a form, pass it's form values to the data page and return it all to the page where the form is on.

I found all kinds of different code snippets but no complete example, can anyone help me, provide such?

Thanks!

Report · Nov 08, 2010

Does this help?

http://www.coldfusionjedi.com/index.cfm/2010/5/8/Simple-jQueryColdFusion-form-example

Report · Nov 08, 2010

That is very helpfull :), only problem, even if i log in with the given username and password i keep getting login failed, your example on your page works fine...

Maybe it's because i am using Railo, can't think of anything else, using the same code, same browser.

Report · Nov 08, 2010

Well, I'd recommend adding some logging. In your CFC, log the

arguments sent. Also check to see what Firebug is showing you.

Report · Nov 08, 2010

I am not sure how to check on the argument being send in:

component {
    remote boolean function authenticate(string username, string password) {
        sleep(1400);
        if(arguments.username == "paris" && arguments.password == "hilton") return true;
        return false;
    }

}

I am not used to work with script cfc's

Report · Nov 08, 2010

Well, one option is to rewrite it in tag based language.

But here is a quick log:

writeLog(file="application", text="#serializejson(arguments)#");

This writes to the application log. It writes a JSON version of the arguments.

Report · Nov 08, 2010

I am trying the first option but haven't got any luck:

</cffunction>
</cfcomponent>

Report · Nov 08, 2010

Ok, so what does Firebug show you?

Report · Nov 08, 2010

Emmm i was hoping that the cfdump would work as i don't really understand how to use firebug to check on what's going on.

Report · Nov 08, 2010

Knowing how to use Firebug for Ajax is critical. Seriously. Check this

video. It walks you through the process:

http://insideria.com/2009/06/quick-video-example-of-firebug.html

Report · Nov 08, 2010

That is awesome so now i know what to do with firebug!

I tested with firebug and i get a respons of false when the login is wrong and a respons of true when the login is correct.

So the cfc is working correctly.... strange.......

</cffunction>
</cfcomponent>

Report · Nov 08, 2010

So then your front end code isn't working - can you show that?

Report · Nov 08, 2010

Yes here it is, saved in a file called jqueryajax2.cfm:

<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//grab the submit action
$("#loginForm").submit(function(e) {

//stop the form submission
e.preventDefault()

        //get my values
        var uval = $("#username").val()
        var pval = $("#password").val()

//basic validation
if(uval == '' || pval == '') return

//disable the button
$("#loginButton").attr("disabled",true)

        //Let the user know we are doing something
        $("#result").html("Logging in...")

        //Send them to the CFC
        $.post("test.cfc?method=authenticate&returnformat=json",
                {username:uval, password:pval},
                function(res) {
                    //Handle the result
                    if(res == "true") {
                        $("#result").html("Your login worked.")
                        //Do more here.
                    } else {
                        $("#result").html("Your login failed.")
                        $("#loginButton").removeAttr("disabled")
                    }
                })

})
})
</script>
</head>

<body>

<form id="loginForm">
    username: <input type="text" name="username" id="username"><br/>
    password: <input type="password" name="password" id="password"><br/>
    <input type="submit" value="Login" id="loginButton">
</form>

</body>
</html>

Report · Nov 08, 2010

So after

function(res) {

add

alert(res);

or console.log(res)

And tell us what you see.

Oh- nevermind. It's whitespace. I can gaurantee it. Either add

output=false to your cfcomponent AND cffunction tag, OR do this

res =$.trim(res);

$.trim() is a jquery function.

Report · Nov 08, 2010

Ahhh yes! That was the problem, perfect, thanks for your time, learned a bit more!

Report · Nov 09, 2010

So now the question is how to change:

//Handle the result
                    if(res == "true") {
                        $("#result").html("Your login worked.")
                        //Do more here.
                    } else {
                        $("#result").html("Your login failed.")
                        $("#loginButton").removeAttr("disabled")
                    }

So it will catch and display a query result set that i can set in the .cfc.

What would be the change when i have for example a query returned named "results".

Any idea's?

Report · Nov 09, 2010

Would you mind if I did this in a blog entry today? So I have a bit

more space (and yeah, traffic .

Report · Nov 09, 2010

That would be awesome!

Report · Nov 09, 2010

http://www.coldfusionjedi.com/index.cfm/2010/11/9/Working-with-a-ColdFusion-Query-in-jQuery

Adobe Community

JQuery - CFML - form submit example

1 Correct answer