SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 103
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 ?

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry do not understanding what you are trying achieve.

    The page you directed us to

    http://www.thecreativesheep.ca/const...truction_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/const...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?

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thank-you.html page I want to appear within the ID#Contact and conform to the dimensions of the DIV, understood ?

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code JavaScript:
    $("#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();
        })

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  10. #10
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !?!?

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <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">

  12. #12
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ???

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have changed the name attribute to id in the <form> tag.

    Code HTML4Strict:
    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

    Code JavaScript:
    $("#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

    Code JavaScript:
    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

    Code JavaScript:
    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.

  14. #14
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code JavaScript:
    function(e){
             $.post('submit.php', $(this).serialize(), callback function definition);
            e.preventDefault();
    }
    Code JavaScript:
    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 ?

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code JavaScript:
    $("#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.

  16. #16
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have not changed the name attribute on the form tag to id. It should be

    Code HTML4Strict:
    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.

  18. #18
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops I fixed it, but it's still loading the thank-you.html separately !?!?

  19. #19
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No still a problem with the javascript routine. Probably relating to a cut and paste. You have


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

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

  20. #20
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working I have a question, one question being I'm not receiving any emails !

  21. #21
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working I had to remove the action to go to the thank-you.html page.

    I have a question, I'm not receiving any emails ! I'm current looking into this so I may solve before you read this but maybe not.

  22. #22
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did a PHP test and that worked. My only conclusion has to do with the form recipient but their is only one option for the email address.

  23. #23
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It might be worthwhile just displaying what is return by submit.php

    Code JavaScript:
    $("#contact_form").before('<p>' + data + '</p>');

  24. #24
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry that is not right. The data will be either

    A -1 will indicate an error with the form validation.

    A 1 will indicate success, but if you are not receiving the email then it will indicate an error with the code sending the email.

    Since you are getting the Thank you message we know that it is 1. Therefore the problem must be with the email sending. That part of the script has a statement

    Code PHP:
    $mail->AddAddress($emailAddress);

    Silly question : Do have you got $emailAddress defined to your email address?

  25. #25
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I was going to place it between one of these lines, but I don't think it may be effective.

    Code JavaScript:
    	$ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '';
    		$body = "A user  $name submitted the contact form:\n".
    		"Name: $name\n".
    		"Email: $visitor_email \n".


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
  •