We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

submitting form without page refresh

Medium Priority
1,081 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.  
Comment
Watch Question

Aaron TomoskyDirector, SD-WAN Solutions
CERTIFIED EXPERT

Commented:
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
Brijesh ChauhanStaff IT Engineer

Commented:
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

Brijesh ChauhanStaff IT Engineer

Commented:
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

Brijesh ChauhanStaff IT Engineer

Commented:
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.

Author

Commented:
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.

Author

Commented:
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...
Brijesh ChauhanStaff IT Engineer

Commented:
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>
Brijesh ChauhanStaff IT Engineer

Commented:
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.
Brijesh ChauhanStaff IT Engineer

Commented:
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>

Author

Commented:
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>

Author

Commented:
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>

Brijesh ChauhanStaff IT Engineer

Commented:
That is strange, because both are working for me, what is your action page, email_comment.cfm contain?? can you post that as well

Author

Commented:
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.
Staff IT Engineer
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
I will test the last answer submitted tonight and provide a reply...
Aaron TomoskyDirector, SD-WAN Solutions
CERTIFIED EXPERT

Commented:
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.