[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

submitting form without page refresh

Posted on 2011-04-20
16
Medium Priority
?
785 Views
Last Modified: 2012-05-11
I'm trying to submit a form without a page refresh, but it's not working because I'm not receiving the email.. Basically once a user submit comments, the .cfm page basically is an email script using coldfusion..  Any help please... See code below:

Any suggestions to changing code is welcomed if required.  I basically put something together for testing purpose, once i get it to work, then I will modify the look and feel...

commentform.cfm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>Comment Form</title>


<script type="text/javascript" src="js/jquery-1.4.3.min.js">

</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var comments = $("#comments").val();
var dataString = 'name='+ name + '&email=' + email + '&comments=' + comments;

if(email=='' || comments=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "email_comment.cfm",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});

</script>

</script>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

* html .threepxfix{
margin-left: 3px;
}

</style>

</head>

<body>
We welcome your feedback, it will assist Mobile ITT in making your experience with us a delightful one.
<p>
<form method="post" name="form" class="cssform">

<p>
<label for="user">Name</label>
<input type="text" id="name" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="email" value="" />
</p>

<p>
<label for="comments2">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<div style="margin-left: 150px;">
<input type="submit" name="submit" value="Submit" /> <input type="reset" value="reset" />
</div>

<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Comments Submitted successfully</span>

</form>

</body>
</html>

email_comment.cfm:

<cfmail to="comments@mobileitt.com"
      from="#URL.email#"
      subject="Comments"
      type="text">
       <br>
      
      #URL.email# <br> <br>
      
      #URL.comments#
      
      
      
</cfmail>

We thank you for your valued comments.  
0
Comment
Question by:melvint91
  • 8
  • 6
  • 2
16 Comments
 
LVL 39

Expert Comment

by:Aaron Tomosky
ID: 35438189
Your form has no action. It should be the JavaScript function you want to fire. Or make the button a regular button that just calls the function
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35438257
Change your code to below, this works

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Comment Form</title>


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

</script>
<script type="text/javascript" >
$(function() {
$(".button").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var comments = $("#comments").val();
var dataString = 'name='+ name + '&email=' + email + '&comments=' + comments;

if(email=='' || comments=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "email_comment.cfm",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});

</script>

</script>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

* html .threepxfix{
margin-left: 3px;
}

</style>

</head>

<body>
We welcome your feedback, it will assist Mobile ITT in making your experience with us a delightful one.
<p>
<form name="feedback" action="">

<p>
<label for="user">Name</label>
<input type="text" id="name" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="email" value="" />
</p>

<p>
<label for="comments2">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<div style="margin-left: 150px;">
<input type="submit" name="submit" value="Submit" class="button" /> <input type="reset" value="reset" />
</div>

<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Comments Submitted successfully</span>

</form>

</body>
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35438263
You can also use inbuilt ColdFusion.Ajax.submitForm function to do it.. an example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Comment Form</title>


<head>
<!--- The cfajaximport tag is required for the submitForm function to work
            because the page does not have any Ajax-based tags. --->
<cfajaximport>

<script>
    function submitForm() {
        ColdFusion.Ajax.submitForm('myform', 'email_comment.cfm', callback,
            errorHandler);
    }
    
    function callback(text)
    {
        alert("Callback: " + text);
    }
    
    function errorHandler(code, msg)
    {
        alert("Error!!! " + code + ": " + msg);
    }
</script>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

* html .threepxfix{
margin-left: 3px;
}

</style>

</head>

<body>
We welcome your feedback, it will assist Mobile ITT in making your experience with us a delightful one.
<p>
<form name="myform">

<p>
<label for="user">Name</label>
<input type="text" id="name" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="email" value="" />
</p>

<p>
<label for="comments2">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<div style="margin-left: 150px;">
<input type="button" name="submit" value="submit" onclick="submitForm()" />
</div>


</form>

</body>
</html>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35438273
Also, if you are planning to use a LOT of ajax, then download FIREBUG for Firefox

http://www.getfirebug.com, this will help you in checking the errors and responses.

If you are using IE 9, then just click on F12 to see the same.
0
 

Author Comment

by:melvint91
ID: 35451683
brijeshchauhan:,

I tried your Coldfusion.Ajax solutions and I'm getting ain Error 500!!! Element email is undefined in URL.  Could you tell me what that mean.  I copied your code and pasted it and tried it out..but getting that error.

0
 

Author Comment

by:melvint91
ID: 35451692
brijeshchauhan:

Disregard my last post, I had to change #url.email# to #form.url#... everything works fine now... how can I change my response to text only  and not the alert box...
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35451743
Just remove the alert and add JS to show a message on your reponseDiv or any other functionality

    function callback(text)
    {
        //alert("Callback: " + text);
            document.getElementById(responseDiv).innerHTML = ' Comments Submitted successfully';
    }
   

----------------

<div id="responseDiv"></div>
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35451772
Here is an example..

FORM ->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Comment Form</title>


<head>
<!--- The cfajaximport tag is required for the submitForm function to work
            because the page does not have any Ajax-based tags. --->
<cfajaximport>

<script>
    function submitForm() {
        ColdFusion.Ajax.submitForm('myform', 'email_comment.cfm', callback,
            errorHandler);
    }
    
    function callback(text)
    {
        //alert("Callback: " + text);
	   document.getElementById('responsediv').innerHTML = text;
    }
    
    function errorHandler(code, msg)
    {
        alert("Error!!! " + code + ": " + msg);
    }
</script>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

* html .threepxfix{
margin-left: 3px;
}

</style>

</head>

<body>
We welcome your feedback, it will assist Mobile ITT in making your experience with us a delightful one.
<p>
<form name="myform" id="myform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="name" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="email" value="" />
</p>

<p>
<label for="comments2">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<div style="margin-left: 150px;">
<input type="button" name="submit" value="submit" onclick="submitForm()" />
</div>


</form>

<div id="responsediv"></div>
</body>
</html>

Open in new window


ACTION PAGE -> email_comment.cfm

<cfdump var="#form#">

Open in new window


If you run the code, you will get the dump of the form in the response div of your page.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35451779
Correction in my first commnet, you can change the JS to show the text in a div instead of alert

Just remove the alert and add JS to show a message on your reponseDiv or any other functionality

    function callback(text)
    {
        //alert("Callback: " + text);
            document.getElementById('responseDiv').innerHTML = text;
    }
   

----------------

<div id="responseDiv"></div>
0
 

Author Comment

by:melvint91
ID: 35454533
brijeshchauhan:,

I'm getting an error message when I used your last solution.  
Error I'm getting:  "Error!!! 500:  Element Email is undefined in Form"

See below what I'm using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Comment Form</title>


<head>
<!--- The cfajaximport tag is required for the submitForm function to work
            because the page does not have any Ajax-based tags. --->
<cfajaximport>

<script>
    function submitForm() {
        ColdFusion.Ajax.submitForm('myform', 'email_comment.cfm', callback,
            errorHandler);
    }
   
    function callback(text)
    {
        //alert("Callback: " + text);
         document.getElementById('responsediv').innerHTML = text;
    }
   
    function errorHandler(code, msg)
    {
        alert("Error!!! " + code + ": " + msg);
    }
</script>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

* html .threepxfix{
margin-left: 3px;
}

</style>

</head>

<body>
We welcome your feedback, it will assist Mobile ITT in making your experience with us a delightful one.
<p>
<form name="myform">

<p>
<label for="user">Name</label>
<input type="text" id="name" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="email" value="" />
</p>

<p>
<label for="comments2">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<div style="margin-left: 150px;">
<input type="button" name="submit" value="submit" onclick="submitForm()" />
</div>


</form>

<div id="responsediv"></div>
</body>
</html>
0
 

Author Comment

by:melvint91
ID: 35457032
I tried the following, but still not successful:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Comment Form</title>


<script type="text/javascript" src="js/jquery-1.4.3.min.js">

</script>
<script type="text/javascript" >
$(function() {
$(".button").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var comments = $("#comments").val();
var dataString = 'name='+ name + '&email=' + email + '&comments=' + comments;

if(email=='' || comments=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "email_comment.cfm",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});

</script>

</script>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

* html .threepxfix{
margin-left: 3px;
}

</style>

</head>

<body>
We welcome your feedback, it will assist Mobile ITT in making your experience with us a delightful one.
<p>
<form name="feedback" method="post" action="">

<p>
<label for="user">Name</label>
<input type="text" id="name" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="email" value="" />
</p>

<p>
<label for="comments2">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<div style="margin-left: 150px;">
<input type="submit" name="submit" value="Submit" /> <input type="reset" value="reset" />
</div>

<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Comments Submitted successfully</span>

</form>

</body>
</html>

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35457834
That is strange, because both are working for me, what is your action page, email_comment.cfm contain?? can you post that as well
0
 

Author Comment

by:melvint91
ID: 35459588
brijeshchauhan,

see code below:

<cfmail to="comments@mobileitt.com"
      from="#url.email#"
      subject="Comments"
      type="text">
       <br>
      
      #url.email# <br> <br>
      
      #url.comments#
      
      
      
</cfmail>


We thank you for your valued comments.
0
 
LVL 11

Accepted Solution

by:
Brijesh Chauhan earned 2000 total points
ID: 35459625
Use below..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Comment Form</title>


<head>
<!--- The cfajaximport tag is required for the submitForm function to work
            because the page does not have any Ajax-based tags. --->
<cfajaximport>

<script>
    function submitForm() {
        ColdFusion.Ajax.submitForm('myform', 'email_comment.cfm', callback,
            errorHandler);
    }
    
    function callback(text)
    {
        //alert("Callback: " + text);
	   document.getElementById('responsediv').innerHTML = text;
    }
    
    function errorHandler(code, msg)
    {
        alert("Error!!! " + code + ": " + msg);
    }
</script>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

* html .threepxfix{
margin-left: 3px;
}

</style>

</head>

<body>
We welcome your feedback, it will assist Mobile ITT in making your experience with us a delightful one.
<p>
<form name="myform" id="myform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="name" value="" name="user" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="email" value="" name="email" />
</p>

<p>
<label for="comments2">Feedback:</label>
<textarea id="comments" rows="5" cols="25" name="comments"></textarea>
</p>

<div style="margin-left: 150px;">
<input type="button" name="submit" value="submit" onclick="submitForm()" />
</div>


</form>

<div id="responsediv"></div>
</body>
</html>

Open in new window


ACTION PAGE ->


<cfmail to="comments@mobileitt.com"
      from="#form.email#"
      subject="Comments"
      type="text">
       <br>
      
      #form.email# <br> <br>
      
      #form.comments#
      
      
      
</cfmail>

Open in new window


0
 

Author Comment

by:melvint91
ID: 35739407
I will test the last answer submitted tonight and provide a reply...
0
 
LVL 39

Expert Comment

by:Aaron Tomosky
ID: 35742588
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question