Forums

jquery ajax contact form (1 post)

  1. JPDF
    Member
    Posted 2 years ago #

    I'm trying to get a jquery ajax contact form that works on the rest of my site to work in the blog section.

    Jquery will work eg:

    $j=jQuery.noConflict();
    
    // Use jQuery via $j(...)
    $j(document).ready(function(){
      alert('test');
    });

    but for the contact form, nothing (well, you get a page reload).

    in the php

    <div class="widget"><script src="/scripts/emailer.js"></script>
    <div class="widgetHead">EMAIL </div>
    
              <form name="contact" method="post" action="">
        <fieldset><div class="contentHolder"><div class="widgetContent" id="contact_form">
     <input type="text" name="email" id="email" size="31" value="Join our mailing list" class="text-input" />        </div></div>
    
         <div class="widgetFoot"><input type="submit" name="submit" class="button" id="submit_btn" value="SIGN UP" /></div></fieldset>
      </form>
    </div>

    and the .js

    $j = jQuery.noConflict();
    
    $j(function() {
      $j('.error').hide();
    
    $j('input.text-input').css({backgroundColor:"#FFFFFF"});
      $j('input.text-input').focus(function(){
      if($j(this).val() == "Join our mailing list")
    		$j(this).val('');
    
    }).blur(function() {
    
    	if($j(this).val() == "")
    		$j(this).val('Join our mailing list');
    
      $j(".button").click(function() {
    		// validate and process form
    		// first hide any error messages
        $j('.error').hide();
    
    		var email = $j("input#email").val();
    		if (email == "Join our mailing list") {
                return false;
            }
    
           if (email == "Thanks!") {
                return false;
            }
             if (email == "") {
                return false;
            }
    
    		var dataString = '&email=' + email;
    		// alert (dataString);return false;
    
    		$j.ajax({
          type: "POST",
          url: "/scripts/process2.php",
          data: dataString,
          success: function() {
            $j('#contact_form').html("<div id='message'></div>");
            $j('#message').html("<input type='text' name='email' id='email' size='30' value='Thanks!' class='text-input' />")
    
          }
         });
    
         $j('input.text-input2').focus(function(){
      if($j(this).val() == "Thanks!")
    		$j(this).val('');
    
            });
    
        return false;
    	});
    
    });
    
    });

    In my main site i'm using the library from http://code.jquery.com/jquery-latest.pack.js

    have tried this and wp_enqueue_script("jquery") in my header but neither worked.

    Anyone have any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic