Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

AJAX EE form, freeform - need to modify js to process info properly

May 13, 2009 3:59pm

Subscribe [5]
  • #1 / May 13, 2009 3:59pm

    Brad Morse's avatar

    Brad Morse

    428 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",
        data: dataString,
        success: function() {
          $('#contact_form').html("<div id='message'></div>");
          $('#message').html("<h2>Contact Form Submitted!</h2><p>")<br />
          .append("We will be in touch soon.")<br />
          .hide()<br />
          .fadeIn(1500, function() {<br />
            $('#message').append("/images/uploads/images/check.png");<br />
          });<br />
        }<br />
       });<br />
      return false;<br />
    });</code></p>
    </pre>
    
    <p>below is the entire code, just above this is the snippet of code that may to be modified to get this to submit properly.</p>
    
    <pre><code>$(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",
          data: dataString,
          success: function() {
            $('#contact_form').html("<div id='message'></div>");
            $('#message').html("<h2>Contact Form Submitted!</h2><p>")<br />
            .append("We will be in touch soon.")<br />
            .hide()<br />
            .fadeIn(1500, function() {<br />
              $('#message').append("/images/uploads/images/check.png");<br />
            });<br />
          }<br />
         });<br />
        return false;<br />
        });<br />
    });<br />
    runOnLoad(function(){<br />
      $("input#name").select().focus();<br />
    });</code></p>
    </pre>
    
    <p>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.</p>
    
    <p>Here is the code for the form:</p>
    
    <pre><code><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>
           
    <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>
         
           <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /></p>
        </fieldset>
    
    {/exp:freeform:form}
    </div>

    Any help is appreciated

  • #2 / May 13, 2009 4:56pm

    grantmx's avatar

    grantmx

    1437 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.

  • #3 / May 13, 2009 5:08pm

    ender's avatar

    ender

    1644 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.

  • #4 / May 13, 2009 5:40pm

    Brad Morse's avatar

    Brad Morse

    428 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.

  • #5 / May 14, 2009 11:11am

    ender's avatar

    ender

    1644 posts

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

  • #6 / May 14, 2009 11:36am

    smartpill's avatar

    smartpill

    456 posts

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

  • #7 / May 14, 2009 1:12pm

    Brad Morse's avatar

    Brad Morse

    428 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 template: site/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"}
      name <input type="text" name="name" id="name"></p>
      email <input type="text" name="email" id="email"></p>
      msg <input type="text" name="message" id="message"></p>
    
      <div  id="msg"  !important; font-weight:bold !important; font-size:15px !important; padding-left:20px !important;"></div>
      <input name="submit" type='submit' value='Submit Form' /></p>
    {/exp:freeform:form}
    
    <div  id="hiddenDIV" ></div>
    </body>
    </html>
  • #8 / May 14, 2009 1:48pm

    ender's avatar

    ender

    1644 posts

    got a link?

  • #9 / May 14, 2009 1:52pm

    Brad Morse's avatar

    Brad Morse

    428 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.

  • #10 / May 14, 2009 1:55pm

    ender's avatar

    ender

    1644 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.

ExpressionEngine News

#eecms, #events, #releases