SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation php form - ajax - redirect to thankyou page - errors on form page

    Goal 1: display errors above the form on same page

    Goal 2: direct users to a new thankyou page when form is submitted.

    The form uses ajax. I am able to get it to work with the error messages displaying correctly but as is, the thankyou message also displays in the same spot and the form is left filled out. I need it to direct to a new page I designed for the purpose.

    Here is my original code and my new code with one of my attempts.

    JS file original

    PHP Code:
    $(function(){
        $(
    '#form_submit').click(function(){
            
            var 
    input_name = $('#form_name').val(),
                
    input_email = $('#form_email').val(),
                
    input_subject = $('#form_subject').val(),
                
    input_message = $('#form_message').val(),
                
    response_text = $('#response');
            
            
    response_text.hide();
            
    response_text.html('Loading...').show();
            
            $.
    post('http://url/scripts/contact-process.php', {nameinput_nameemailinput_emailsubjectinput_subjectmessageinput_message}, function(data){
                
    response_text.html(data);
            });
            return 
    false;
        });

    }); 
    New js code

    PHP Code:
    $(function(){
        $(
    '#form_submit').click(function(){
            
            var 
    input_name = $('#form_name').val(),
                
    input_email = $('#form_email').val(),
                
    input_subject = $('#form_subject').val(),
                
    input_message = $('#form_message').val(),
                
    response_text = $('#response');
            
            
    response_text.hide();
            
    response_text.html('Loading...').show();
            
            
            $.
    post('http://url/scripts/contact-process.php', {nameinput_nameemailinput_emailsubjectinput_subjectmessageinput_message}, function(data){
    if ( 
    data === '#form_submit' )
    {
    window.location "http://www.google.com/"
    }
    else
    {
    response_text.html(data);
    }

    });
            return 
    false;
        });

    }); 
    if ( data === '#form_submit' ) I am not sure how this line should be done. This is all based on research I have done and I am for the most part still in the dark about how to handle it.

    Here is my contact form code

    HTML Code:
    	<form id='contact-form' method='post' action='<?php bloginfo('url'); ?>/wp-content/themes/fullscreen_child/scripts/contact-process.php'>
    				<fieldset>					
    					<input id='form_name' type='text' name='name' value='' onfocus="if(this.value=='Name'){this.value=''};" onblur="if(this.value==''){this.value='Name'};" />	
                        <label for=name accesskey=U>Name</label>                                             
    				
    					<input id='form_email' type='text' name='email' value="" onfocus="if(this.value=='Email'){this.value=''};" onblur="if(this.value==''){this.value='Email'};" />
                                                        <label for=email accesskey=E>Email</label>                           
    
    					<input id='form_subject' type='text' name='subject' value="" onfocus="if(this.value=='Subject'){this.value=''};" onblur="if(this.value==''){this.value='Subject'};" />	
                                                        <label for=phone accesskey=P>Subject</label>               
    		
    					<textarea id='form_message' rows='10' cols='40' name='message'></textarea>				
    					<input id='form_submit' class="submit" type='submit' name='submit' value='' />			
    					<div class='hide'>
    						<label>Do not fill out this field</label>
    						<input name='spam_check' type='text' value='' />
    					</div>
    				</fieldset>
    			</form>
    and my contact process.php code

    PHP Code:
    <?php
    if(isset($_POST['name']) && empty($_POST['spam_check']))
    {
        require 
    'email-validator.php';
        
    $validator = new EmailAddressValidator();
        
        
    $errors = array();
        
        
    $input_name strip_tags($_POST['name']);
        
    $input_email strip_tags($_POST['email']);
        
    $input_subject strip_tags($_POST['subject']);
        
    $input_message strip_tags($_POST['message']);

        
    $required = array('Name field' => 'name''Email field' => 'email''Message field' => 'message');
        
        foreach(
    $required as $key=>$value)
        {
            if(isset(
    $_POST[$value]) && $_POST[$value] !== ''
            {
                continue;
            }
            else {
                
    $errors[] = $key ' cannot be left blank';
            }
        }
        
        if (!
    $validator->check_email_address($input_email)) {
               
    $errors[] = 'Enter a valid email address.';
        }
        
        if(empty(
    $errors))
        {        
            if(
    mail('info@support.com'"Message from $input_name - $input_subject"$input_message"From: $input_email"))
            {
                echo 
    'Thank You - your email has been sent.';
            }
            else 
            {
                echo 
    'There was an issue when sending your email. Please try again.';
            }        
        }
        else 
        {
            echo 
    implode('<br />'$errors);        
        }
    }
    else
    {
        die(
    'You cannot access this page directly.');
    }
    I have been trying to get this working for days now. any help will be greatly appreciated!

  2. #2
    SitePoint Addict eanimator's Avatar
    Join Date
    Sep 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use AJAX to simply this task. I would suggest to use jQuery.

    1. Bind Form to AJAX
    2. use CSS class to enable validation.
    3. Send/Receive JSON data to ease out the process.
    4. Use configurations to set email and templates.

    Your code is a bit messy.Of course you can improve it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •