0

Problem

I have a form and once it is filled out by user and submitted i would like a message to pop up over the form saying "Now sit back and relax bla bla....". also ideally i would like a button on this message to say "ok".

What i have so far?

A form that gets submitted (POSTed) via an ajax post function

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest1.php',
     data: $("#form1").serialize(),
     success: function(response) {
 $('#form1').html("<div class=\'info\'>Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk<div><div class=\'tick\'>logo");
     }
   });
});

Now instead of replacing #form1 i would like it to sit on top(above) of #form1 in a nicely formatted div/alert/etc of some sort. Similar to JS Alert box.

Is this possible given that i have to keep the "ajax posting function"?

Sorry if i have used any incorrect terminology, I'm still learning, and be no means an expert.

Example using a Picture

enter image description here

In this picture the message is sitting on top of the form and not in between.

Dan Cundy
  • 2,649
  • 2
  • 38
  • 65
  • 1
    Use `append`, `prepend` insted of `html`. – Milan and Friends Jan 28 '14 at 18:17
  • Add another DIV to your html markup, something like `
    ` and in your callback use `$('#msg')` instead of the form1 id selector.     – Harvey A. Ramer Jan 28 '14 at 18:18
  • Add a
    in your html code where you want the error to appear. let's call it
    and add a nice CSS to it e.g. red background, bold font etc. Then just use $("#error_message").html("opps, we have an error");
     – Mohammed Joraid Jan 28 '14 at 18:21
  • opps, @HarveyA.Ramer i didn't' see your comment :D – Mohammed Joraid Jan 28 '14 at 18:22
  • @HarveyA.Ramer what you have said is great and does work but it doesn't sit on top of the form it sits in between, pushing content out of its containing div. Is there a way to get it to sit on top like javascript alert would? – Dan Cundy Jan 28 '14 at 18:34
  • Same question to you also @MohammedJoraid, and thank you both for your answers but it just doesn't completely do what i wanted. – Dan Cundy Jan 28 '14 at 18:35
  • 3
    @DanCundy Yes, you can set a height and width on your div either doing as @mdesdev mentions or with my technique (his is better!) and use absolute positioning. `#msg { width:200px; height:200px; position:absolute; top: 100px; left:100px }` fine tune the top/left offset and width height to your specs. Also, remember that absolute positioning is done based on the body element. If you want more control, set the nearest parent to `position:relative` and you will be able to offset from that parent. – Harvey A. Ramer Jan 28 '14 at 19:27
  • @HarveyA.Ramer +1 for absolute positioning ;) – Milan and Friends Jan 28 '14 at 19:35
  • Thank You so much @HarveyA.Ramer, how could i be so stupid to miss that one. Using the absolute positioning i have achieved what i wanted. Just goes to show what an extra pair of eyes and brains can do. Even if it was obvious. So thank you once again, and thank you to the others who also commented and helped. I will write up the answer now. – Dan Cundy Jan 28 '14 at 19:59
  • Well, it was not clear for me that your wanted a popup until u uploaded the image and mentioned that you wanted an alert! (site on top) and (on top(above)) mean you are talking about appearance order, one that appears on top of another on a 2d plan. TO SIT ON TOP is different from "TO POP OUT". If you are going to use a custom alert (not the JS native) then most likely you need to block the background page so the user won't go and play around while you displaying the alert. – Mohammed Joraid Jan 29 '14 at 03:48
  • 1
    Personally I use "bootbox" search for it, it's great and easy to use and totally compatible. There are dozen of libraries there just to show alert messages, dialgos and confirm. Good luck. – Mohammed Joraid Jan 29 '14 at 03:49

3 Answers3

1

http://jsfiddle.net/f7EZJ/

The JSFiddle show's a working example...

<body bgcolor="#DDDDDD">
    <table class='dialog' id='dlg' style='top:0px;left:0px;width:100%;height:100%;position:absolute;' cellspacing='0px'>
        <tbody>
            <tr>
                <td onclick='return false;'>
                    <div style='margin: 0px auto; border: 1px solid black; padding: 20px; width: 200px; border-radius: 8px;'>
                        <center style='margin-top: -10px;'>
                            <b>
                                <font size='+2'>Header</font>
                            </b>
                        </center>
                        <hr style='border: 1px solid black;'/>Hai<br/>
                        <a href='#' style='float: right; margin-right: -15px;' onclick="document.getElementById('dlg').style.display = 'none'; return false;">Close</a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body
131
  • 1,363
  • 1
  • 12
  • 32
  • After researching what you suggested it would appear that each insert content to before or after #form1? Is this a correct understanding? – Dan Cundy Jan 28 '14 at 18:22
  • 1
    Not exactly. prepend() insert content inside #form1, but in the start. append() insert the content in the end of #form1. – 131 Jan 28 '14 at 18:24
  • ok thank you for your response but i was hoping i could get it to sit on top of the form and make the #form1 untouched. – Dan Cundy Jan 28 '14 at 18:37
  • Do `$("#form1").before("content");` – 131 Jan 28 '14 at 18:42
  • Sorry i think i haven't explained my self properly, when i say on top i mean sitting above/over the top of #form1. Does that make more sense. – Dan Cundy Jan 28 '14 at 18:53
  • Could you edit your question, and make a before/after? That would make it so much easier :P – 131 Jan 28 '14 at 18:57
  • I have added a picture @ahmad albayati, i hope this helps – Dan Cundy Jan 28 '14 at 19:17
  • I've managed to find a solution using Absolute positioning and an empty div which is filled once the form is submitted. However the example you have posted does look more fitting as it has a close button, is it able to be positioned absolute on top of form? – Dan Cundy Jan 28 '14 at 20:14
  • Yea sure it is possible. – 131 Jan 28 '14 at 20:31
  • ok well i'll play around with the solution i have at the moment and if it doesn't work out i'll give what you have suggested ago. Thank you for your help @ahmad – Dan Cundy Jan 28 '14 at 20:38
  • 1
    Is this the '90s! Please do not use tables for layout! – Jon P Jan 28 '14 at 21:52
1

Step one read this article on centering divs.

Next style up your pop up in place in the html. Use a div for the pop up, with a child div for the dynamic content. Once you're happy with the look of the pop-up, add display:none to its' CSS to hide it.

Finaly in your ajax success function, update the dynamic content and display the pop up.

Your pop up HTML will look something like:

<div id="popup">
    <h2>Info <span title="click to close" class="close">X</span></h2>
    <div class="content"></div>  
</div>

Some quick and dirty styling would look something like: 

#popup{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;

    border: 1px solid #5C5C5C;    
    height:200px;
    width:300px;
    background-color:#CFC;
    display:none;
}

#popup h2
{
    font-size:1.2em;
    color:#FFF;
    background-color:#090;
    margin:0;
    padding:10px;   
    position:relative;
}

#popup h2>.close
{
    border: solid 1px #FFF;
    padding:2px;
    position:relative;  
    left:220px;
    cursor:pointer;
}

#popup .content
{
    padding:10px;
}

Change your javascript to

$(document).ready(function () {
    //Event Listener for form submit
    $('#form1').submit(function(e){
        e.preventDefault();
        console.log('Form Submitted'); //Debug line
        $.ajax({
            type: 'POST',
            url: 'indextest1.php',
            data: $("#form1").serialize(),
            error: function(){console.log('Ajax Error');}, //Debug Line
            success: function(response) {
                console.log('Ajax Success'); //Debug Line
                $('#popup .content').html("Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on xxxxxx or xxxxx");
                $('#popup').show();
            }
         });
    });        

    //Add the following event listener
    $("#popup .close").click(function(){
        $("#popup").hide();
    });
});

See it in action (roughly) here:http://jsfiddle.net/Rq3Up/

Jon P
  • 19,442
  • 8
  • 49
  • 72
  • ok so i'm having some trouble implementing this into my page, i think it's the ajax call which is not working. – Dan Cundy Jan 28 '14 at 23:34
  • Add a bit of debug code to the ajax function, either use an alert or better still console.log (http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it) to see if your success function is being called. – Jon P Jan 29 '14 at 00:16
  • ahh so this is how you debug Javascript! – Dan Cundy Jan 29 '14 at 00:28
  • would you mind just having a quick look at my ajax call, pretty sure i'm missing a parenthesis or have one to many?!http://jsfiddle.net/v8BvC/ – Dan Cundy Jan 29 '14 at 00:31
  • Ahh I see what you've done, you've just copied my code straight into the ajax call from the fiddle. That has added the event listener for the button click that I was using to simulate the ajax call in there. Use the code from my answer, **not the fiddle** for the ajax call. The Close event listener should go in `document.ready` – Jon P Jan 29 '14 at 00:59
  • I've updated my answer. I forogt to include the code to display the popup! – Jon P Jan 29 '14 at 01:08
  • My bad forgot to add the form event listener! – Jon P Jan 29 '14 at 01:17
  • Finally got it to work, been looking at your solution for about 2 hours now. The confusion came from the fact you had used a button and i had used a submit. I think you may have changed your solution to reflect this and i had not noticed? Thus i was still using the button when i should have been using submit again. Or am i wrong?!lol anyway it works now! :) Thank you! – Dan Cundy Jan 29 '14 at 01:54
0

solution

Using absolute positioning on div placed in the #form1 i was able to get the feedback to "float" on top of the form as depicted in pitture.

CSS

#msg{
    ;
    position:absolute;
    top:0;
    left:0;
    border: 6px solid #5C5C5C;
    height:300px;
    padding:30px;

}

HTML

Added div msg

<div class='content one'>
      <div id="contact-form" class="clearfix">

         <div id="msg"></div>//added div

         <P>Quick And Easy!</P>
        <br/>
        <P>Fill out our super swanky contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry.</P>
        <br/>

Changed ajax function

from

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest1.php',
     data: $("#form1").serialize(),
     success: function(response) {
 $('#form1').html("<div class=\'info\'>Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk<div><div class=\'tick\'>logo");
     }
   });
});

to

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest1.php',
     data: $("#form1").serialize(),
     success: function(response) {
 $('#msg').html("Now sit back and relax while we go to work on your behalf, we\'ll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk");

     }
   });
});
</script>
Dan Cundy
  • 2,649
  • 2
  • 38
  • 65