EllisLab text mark
Advanced Search
     
AJAX EE form, freeform - need to modify js to process info properly
Posted: 13 May 2009 03:59 PM
Avatar
Joined: 2008-07-14
684 posts

I have a form: name, email, question

I applied ajax to it, using this tutorial http://nettuts.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Once I hit submit, it displays the message that it was submitted, but it does not actually store the data nor send the email w/ the data.

When I look at the source, it displays this for the form tag

<form id="freeform" action="http://www.website.com/" method="post" name="contact"

This is the part I think I need to fix to get it to go to the appropriate template, to submit the info, or maybe it does not need to, but maybe this snippet of code needs to be modified to submit the info properly

$.ajax({
    type
"POST",
    
url"thankyou",
    
datadataString,
    
success: function() {
      
$('#contact_form').html("<div id='message'></div>");
      $(
'#message').html("<h2>Contact Form Submitted!</h2>")
      .
append("<p>We will be in touch soon.</p>")
      .
hide()
      .
fadeIn(1500, function() {
        
$('#message').append("<img id='checkmark' src='/images/uploads/images/check.png' />");
      
});
    
}
   }
);
  return 
false;
}); 

below is the entire code, just above this is the snippet of code that may to be modified to get this to submit properly.

$(function() {
  
$('.error').hide();
  $(
'input.text-input').css({backgroundColor:"#FFFFFF"});
  $(
'input.text-input').focus(function(){
    
$(this).css({backgroundColor:"#FFDDAA"});
  
});
  $(
'input.text-input').blur(function(){
    
$(this).css({backgroundColor:"#FFFFFF"});
  
});

  $(
".button").click(function() {
        
// validate and process form
        // first hide any error messages
    
$('.error').hide();
        
      var 
name = $("input#name").val();
        if (
name == ""{
      
$("label#name_error").show();
      $(
"input#name").focus();
      return 
false;
    
}
        
var email = $("input#email").val();
        if (
email == ""{
      
$("label#email_error").show();
      $(
"input#email").focus();
      return 
false;
    
}
        
var message = $("input#message").val();
        if (
message == ""{
      
$("label#message_error").show();
      $(
"input#message").focus();
      return 
false;
    
}
        
        
var dataString 'name='name '&email;=' email '&message;=' message;
        
//alert (dataString);return false;
        
        
$.ajax({
      type
"POST",
      
url"/thankyou",
      
datadataString,
      
success: function() {
        
$('#contact_form').html("<div id='message'></div>");
        $(
'#message').html("<h2>Contact Form Submitted!</h2>")
        .
append("<p>We will be in touch soon.</p>")
        .
hide()
        .
fadeIn(1500, function() {
          
$('#message').append("<img id='checkmark' src='/images/uploads/images/check.png' />");
        
});
      
}
     }
);
    return 
false;
    
});
});
runOnLoad(function(){
  
$("input#name").select().focus();
}); 

When I comment out a certain part, it does submit properly, but it loads it up the site/thankyou template, instead of ajaxifying the submission.

Here is the code for the form:

<div id="contact_form">    
{exp:freeform:form name="contact" form_name="website_submitted_questions" return="site/thankyou" mailinglist="website_submitted_questions" notify="email@email.com" template="website_submitted_questions" mailinglist_opt_in="yes" required="name|email|message"}

    
<fieldset>
       <
label for="name" id="name_label">Name</label>
       <
input type="text" id="name" name="name" value="" maxlength="27" class="required" />
       <
label class="error" for="name" id="name_error">This field is required.</label>

       <
label for="email" id="email_label">Email</label>
       <
br /><input type="text" id="email" name="email" value="" maxlength="25" class="required" />
       <
label class="error" for="email" id="email_error">This field is required.</label>

        <
label for="message" id="message_label">Any questions you have for us?</label>
        <
textarea name="message" cols="23" rows="6" class="required"></textarea>
        <
label class="error" for="message" id="message_error">This field is required.</label>
     
       <
p><input type="submit" name="submit" class="button" id="submit_btn" value="Send" /></p>
    </
fieldset>

{/exp:freeform:form}
</div

Any help is appreciated

 
Posted: 13 May 2009 04:56 PM   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2007-06-05
1431 posts

It could be related to this part in the tut

You might also notice that I have left both the action and the method parts of the form tag blank. We actually don’t need either of these here, because jQuery takes care of it all later on.

The freeform tag generates that data automatically.  You may need to do it manually to freeform without the freeform tag by using what freeform outputs.

 Signature 

Marshall Grant   |  grantmx.com  |  Atlanta, GA   |  design  |  development  |  @grantmx

 
Posted: 13 May 2009 05:08 PM   [ # 2 ]   [ Rating: 0 ]
Avatar
Joined: 2008-12-18
1680 posts

you should use the jQuery Form Plugin to do that stuff.  makes it far simpler.

do your validation in the beforeSubmit callback, your message in the success callback.

 Signature 

EE Pro Network
eMarketSouth - full service web design, development, and SEO
ExpressionEngine consulting services - SQL queries, .htaccess rewrites, template optimization, jQuery/AJAX, and more!
our add-ons - please “favorite” and rate our products on devot:ee if you like our work. smile

 
Posted: 13 May 2009 05:40 PM   [ # 3 ]   [ Rating: 0 ]
Avatar
Joined: 2008-07-14
684 posts

@ender, thank you.

The problem I have now is, it displays the alert window, I commented out the alert, and want to put in a message saying the form was submitted successfully, but it loads a blank page, I want it to display on the same page w/ all the other content still there, but it displays on the same URL path, but the page is blank.

[removed] 
    
// wait for the DOM to be loaded 
    
$(document).ready(function() 
    
// bind 'freeform' and provide a simple callback function 
        
$('#freeform').ajaxForm(function() 
                
//alert("Thank you for your comment!");
                
[removed]("Please display this msg");
        
});
    
}); 
[removed] 

The form tag

{exp:freeform:form 
    name
="contact" 
    
form_name="website_submitted_questions" 
    
return="site/thankyou" 
    
mailinglist="website_submitted_questions" 
    
notify="email@domain.com" 
    
template="website_submitted_questions" 
    
mailinglist_opt_in="yes" 
    
required="name|email|message"


HTML form tag

<form id='freeform' name='contact' method="post" action="http://domain.com/"  

It delivers the data properly, but it displays “Please display this msg” on a blank page.

 
Posted: 14 May 2009 11:11 AM   [ # 4 ]   [ Rating: 0 ]
Avatar
Joined: 2008-12-18
1680 posts

gonna need a link to a test page to go much further with this one.

 Signature 

EE Pro Network
eMarketSouth - full service web design, development, and SEO
ExpressionEngine consulting services - SQL queries, .htaccess rewrites, template optimization, jQuery/AJAX, and more!
our add-ons - please “favorite” and rate our products on devot:ee if you like our work. smile

 
Posted: 14 May 2009 11:36 AM   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2006-09-06
513 posts

If I recall correctly, this method worked pretty well for me.

 Signature 

Kyle Summer | smartpill design | New Haven, CT |  twitter

 
Posted: 14 May 2009 01:12 PM   [ # 6 ]   [ Rating: 0 ]
Avatar
Joined: 2008-07-14
684 posts

@smartpill, I checked out the link (http://www.solspace.com/forums/viewthread/666/) you sent me and I am still having trouble, it submits the form, delivers the data, but it loads the template “success”

here is the code I am using, the jquery.form.js file is there, so that is not a problem, as well as a success template within the site template group.

<html >
<
html>
<
head>
<
title>Title</title>
[removed][removed]
[removed][removed]

[removed]
$(document).ready(function(){
    
//Bind ajaxForm to the FreeForm 
$('#contact-form').ajaxForm(
  
{  target:"#hiddenDIV",     //set response to go into hidden div    
  
beforeSubmit:function()  //before sending submit, give user notification...
  
{
     
$("#msg").html("Sending...");
     $(
"#msg").css({border:"1px solid #a00"backgroundColor:"#fdd"});
  
},
   
success:function(rtn
   
{
    
if(rtn=="success")
    
{
      
$("#contact-form").resetForm();
      $(
"#msg").html("Thank you for your comment.");
     
}else{
        
//there was an erro, so grab the UL in the content ID, 
        //inside the hidden DIV, and put it into the Message Notification
      
$("#msg").html(  $("#hiddenDIV #content ul").html() );
      $(
"#hiddenDIV").empty();
     
}
   }
  }
);
[removed]
</head>
<
body>

<!-- 
Notice the return param which is an EE templatesite/success which contains a single word "success" -->
{exp:freeform:form form_name="feedback" form_id="contact-form" required="name|email" notify="email@domain.com" template="website_submitted_questions" return="success"}
  
<p>name <input type="text" name="name" id="name"></p>
  <
p>email <input type="text" name="email" id="email"></p>
  <
p>msg <input type="text" name="message" id="message"></p>

  <
div  id="msg" style="color:#d00 !important; font-weight:bold !important; font-size:15px !important; padding-left:20px !important;"></div>
  <
p><input name="submit" type='submit' value='Submit Form' /></p>
{/exp:freeform:form}

<div  id="hiddenDIV" style="display:none;"></div>
</
body>
</
html
 
Posted: 14 May 2009 01:48 PM   [ # 7 ]   [ Rating: 0 ]
Avatar
Joined: 2008-12-18
1680 posts

got a link?

 Signature 

EE Pro Network
eMarketSouth - full service web design, development, and SEO
ExpressionEngine consulting services - SQL queries, .htaccess rewrites, template optimization, jQuery/AJAX, and more!
our add-ons - please “favorite” and rate our products on devot:ee if you like our work. smile

 
Posted: 14 May 2009 01:52 PM   [ # 8 ]   [ Rating: 0 ]
Avatar
Joined: 2008-07-14
684 posts

Unfortunately no, the site is behind a firewall and I can not change that, the network admin would have to and I know he would not.

 
Posted: 14 May 2009 01:55 PM   [ # 9 ]   [ Rating: 0 ]
Avatar
Joined: 2008-12-18
1680 posts

can’t really debug javascript that I can’t run for myself through firebug/etc.  if you can get a bit of code on a public facing site I’ll try to take a look, but otherwise there isn’t much I can do to help.

 Signature 

EE Pro Network
eMarketSouth - full service web design, development, and SEO
ExpressionEngine consulting services - SQL queries, .htaccess rewrites, template optimization, jQuery/AJAX, and more!
our add-ons - please “favorite” and rate our products on devot:ee if you like our work. smile