Hash Change on Forum

Hi, I need to change the way a form on my page works. As currently when you enter in the form information and hit send, you get sent to another page that loads up for testing purposes a basic ‘message sent’ message. I want the HTML page to load within the ID#Contact which is stylized with a width and a height. I’ve been directed to the following procedure but I don’t know how to make it come together.

jQuery.post() – jQuery API
.load() – jQuery API
.ready() – jQuery API

Another issue with the suggestion I was given is the amount of jQuery needed to complete this, is there not a simpler method ?

Sorry do not understanding what you are trying achieve.

The page you directed us to

http://www.thecreativesheep.ca/construction/site_construction_a.php

is a server side script. So clearly you are working server side with PHP.

I filled in the form supplying the name, email address, message and captcha and then click the Submit (not Send) button. This presented me with the page

http://www.thecreativesheep.ca/construction/thank-you.html

with a message “Thank you for the message”.

Could you elaborate on what you mean by

I want the HTML page to load within the ID#Contact which is stylized with a width and a height.

Normally you would have a form action which refers to a PHP script so that that script is executed server side. It gathers the data provided, handles it and generates a return HTML page.

jquery is essential browser side. Why do you think it has a relevance here?

The thank-you.html page I want to appear within the ID#Contact and conform to the dimensions of the DIV, understood ?

There are three techniques I can envisage

  1. Instead of the action being thank-you.html make it thank-you.php and return the same page with the thank you message in place of the form.

  2. Put the form within an <iframe> the html for the form would have to be in a separate url, contact-form.html (for example), and would be displayed in the iframe.

  3. Use javascript probably in the guise of jquery.

The order indicates my preference and probably the order of difficultly. In your post you seem to be indicating the third route as your preferred on. What has influenced you in that decision?

The order indicates my preference and probably the order of difficultly. In your post you seem to be indicating the third route as your preferred on. What has influenced you in that decision?

I was given that suggestion by someone. Which is the route I prefer but with the jQuery links I posted in my original message it seems a little bit much for this task, why I’m open to any other suggestions as well as how to make this work !

Search around a bit I came across this site

30 Awesome JQuery Contact Form

The first

A Fancy AJAX Contact Form | Tutorialzine

is not dissimilar to what you want to do. Even uses a ajax approach to post the form to the web site

$("#contact-form").submit(function(e){

            if(!$('#subject').val().length)
            {
                $.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error")
                return false;
            }
            
            if(use_ajax)
            {
                $('#loading').css('visibility','visible');
                $.post('submit.php',$(this).serialize()+'&ajax=1',
                
                    function(data){
                        if(parseInt(data)==-1)
                            $.validationEngine.buildPrompt("#captcha","* Wrong verification number!","error");
                            
                        else
                        {
                            $("#contact-form").hide('slow').after('<h1>Thank you!</h1>');
                        }
                        
                        $('#loading').css('visibility','hidden');
                    }
                
                );
            }
            e.preventDefault();
    })

I have to use a new contact form, to achieve what I want. I can’t implement something within the contact form I have now using some form of jQuery ?

I offered the site to enable you to see how what you were trying to achieve could be accomplished with jquery. I was not suggesting that you replace what you have with something else.

Essentially what the implementation does, via jquery, is validate the data in the form, capture the submit event of the form, transfer the content using an ajax method, give the user the thank you message and finally cancelled the submit.

Do you have jQuery / Javascript experience ? I hope it’s not a stupid question in a forum dedicated to that specific topic, I’m just new to the language and if I run into a road block if I could get some help ?

It appears that the A Fancy AJAX Contact Form | Tutorialzine requires you to use that contact form, unless I’m wrong and you only implement the code onto my contact form !?!?

Do you have jQuery / Javascript experience

Plenty of Javascript, less so on jQuery - I have been a bit stand offish, what I produce I have to support and if I am building on top of something else I need to have confidence in it. I think I am there with jQuery but probably not on a lot of its plugins.

It appears that the A Fancy AJAX Contact Form | Tutorialzine requires you to use that contact form,

No, as I said in a previous post - learn from it, take what you need from it.

Below is a snippet for your page. When the form is submitted the event is captured and the data from the form submitted to a server side routine submit.php (your need to write this) which can be responsible for recording it. On a successful return the form is hidden and the thank you message given.

Note: on the <form> tag I have changed the name attribute to id.

<script type="text/javascript">
<!--
$(document).ready(function(){
	$("#contact_form").submit(function(e){

		$.post('submit.php', $(this).serialize(),
			function(data){
				var message;
				if(parseInt(data)==-1)
					message = "error";
				else
				{
					$("#contact_form").hide('slow');
					message = "Thank your for the message";
				}
				$("#contact_form").before('<p>' + message + '</p>');
			}
        );
		e.preventDefault();
	});
});
// -->
</script>

<!-- end of Service ID -->
<div id="Contact" style="display: block; ">
<div class="emailform">
<form method="POST" id="contact_form" action="http://www.thecreativesheep.ca/construction/thank-you.html">

I’m not following, could you break it down a little further especially in regards to the code you posted. If I understood correctly, you have posted code that will replace the form that I have in place with a ‘thank you’ message ???

I have changed the name attribute to id in the <form> tag.

form method="POST" id="contact_form" action="http://www.thecreativesheep.ca/construction/thank-you.html">

$document.ready(function definition);

specifies a function to execute once the page has loaded. The function definition is

$("#contact_form").submit(function definition);

specifies a function to execute when the form identified by the id of contact_form is submitted. It is submitted when the button of type=submit is clicked. The function definition is

function(e){
         $.post('submit.php', $(this).serialize(), callback function definition);
        e.preventDefault();
}

The function argument is event object.

.post has three arguments (in this case) url, data, callback function

The url is the php script on the server which will be executed to receive the data and store it.

The data is $(this).serialize() (this) is the form in question, the owner of the event. .serialize() encodes the data from the form as a string for submission.

The callback function definition is the function to be execute on successfully receiving the reply. The function definition is

function(data){
                var message;
                if(parseInt(data)==-1)
                    message = "error";
                else
                {
                    $("#contact_form").hide('slow');
                    message = "Thank your for the message";
                }
                $("#contact_form").before('<p>
' + message + '</p>');
            }

The argument of the function is the data returned. If it is -1 then give an error message otherwise hide the contact form and give a thank you message. The message is placed between <p> tags and inserted before the, now hidden, form.

I understand a little more the only parts I don’t completely understand are the following, but that could be the lack of my understanding of the language.

function(e){
         $.post('submit.php', $(this).serialize(), callback function definition);
        e.preventDefault();
}

function(data){
                var message;
                if(parseInt(data)==-1)
                    message = "error";
                else
                {
                    $("#contact_form").hide('slow');
                    message = "Thank your for the message";
                }
                $("#contact_form").before('<p>
' + message + '</p>');
            }

The goal of this script is to take my current form and hide it and replace it with a thank you message. And I assume I can stylize the <p> tag within a javascript ? Is it dangerous to have my form exposed as it is within the code could the form be hijacked or is that all dependent on the server ?

Normally then you click Submit you go to a new page which is given in the action attribute of the <form>. The data from the form is sent to the server and a new html page is received.

With this scenario the same thing happens but the current page is not altered. The page transition happens in the background.

You had an action of thank-you.html. This is a nonsense since all that will be returned is a new html page. The data from the form is sent to the server but is effectively discarded. In the script I have made that url submit.php. That is a php script (which you will need to write) which takes that data that accompanied the request and store it. The first function is responsible for packing up the data and initiating that background page transition.

Because the page transition happens in the background the user gets no visible clues that anything has happen. The second function is executed when the return page is received (you don’t see it but it is there in the background). It is responsible for reporting the success/failure of the operation.

The only thing that hides the form is

$("#contact_form").hide('slow');

If you want to style the message use a class <p class=“returnmessage”>.

Is it dangerous to have my form exposed as it is within the code could the form be hijacked or is that all dependent on the server?

No. It is the server that must be robust. It must discard anything where the captcha is not right.

Hi, the thank-you.html page is still loading separately despite that I have placed submit.php in the same folder as my HTML files. I used the code for submit.php from this page. The link to my page is posted in message one incase you want to see for yourself :slight_smile:

You have not changed the name attribute on the form tag to id. It should be

form method="POST" id="contact_form" action="http://www.thecreativesheep.ca/construction/thank-you.html">

I did detail this in an earlier post. Currently the submit event is not getting attached to the form.

Ooops I fixed it, but it’s still loading the thank-you.html separately !?!?

No still a problem with the javascript routine. Probably relating to a cut and paste. You have

$("#contact_form").before('<p>
' + message + '</p>');

split across to lines. It wants to be on a single line.

I got it working :slight_smile: I have a question, one question being I’m not receiving any emails !