Creating a modal email form that provides send confirmation in same modal

Hello,
I need some assistance with setting up a modal email contact form.  Using bootstrap 3.3.4 and jQuery 1.11.2 frameworks.  What I would like to do is call the modal form when a user wants to send an email.  And then when they send it, process the PHP in the background and the show the modal form again with a confirmation.

I know how to do the PHP mail script, but if I do need to modify the PHP to work with this, then that would help too.

My example is here - http://jsfiddle.net/fvd6gqwL/6/

I setup links for "Contact" and "Post Send".

Contact is what I want them to see when they want to bring up the form.

Post Send is what I want them to see after submitting their message.  This way they can just close and return to the same page they were on.
LVL 17
bigeven2002Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

arnoldCommented:
Here is the dilemma, an option you can add the tag requesting read confirmation.
If your php.ini setup for mail is SMTP versus /usr/snin/sendmail, the SMTP transaction will provide a "confirmation" in the form of acceptance/reference of the message accepted into the queue of the mailserver with which the SMTP session was established.

Complicating things to have an actual confirmation from the recipients mail servers would be to actually use handling that would effectively function as a mail server, determining the mail servers, establishing a connection and transferring the message recording the mail server to which the connection was established based on the response and the greeting......
Note that even though you would have this info, only the admins of the other server will be in the position to look at the logs, but getting them to do it might be a long shot.
bigeven2002Author Commented:
I got it to work, but one function I cannot figure out is to show the form again when clicking new Message, it shows the form for a brief second then goes back to the submitted notification.  So it is looping in the submit function but I don't know what I am doing wrong.

I have attached two screenshots, first is new form, and the second is the submitted page.

New FormSubmitted Form
So with the code below, I call the Contact Modal form, when I fill in email address and message, and click Send, it will send to my email address with my PHP script.  Once it is submitted, then the button "New Message" shows in place of Send Message and there is a thank you message.  When I click New Message, it will show a new form for a second and then switch back to the thank you screen.

Here is my code.  It is also posted on JSFiddle -
http://jsfiddle.net/fvd6gqwL/17/
(Click Run first)

This uses the jQuery 1.11.x and Bootstrap 3.3.4 frameworks.

HTML
<a href="#contact" data-toggle="modal" class="navbar-text">Contact</a>

<div class="modal fade" id="contact" role="dialog">
    	<div class="modal-dialog">
        	<div class="modal-content">
            	<form id="contact-form" class="form-horizontal ajax" role="form" action="" method="post">
                    
                    <div class="modal-header">
                        <h4>Contact Me <a class="close" data-dismiss="modal">x</a></h4>
                        
                    </div>
                    <div id="form-alert" class="alert alert-success">Thank You for your message.  I will reply as soon as possible.</div>
                    <div class="modal-body" id="modal-body-id">
                        
                        <div class="form-group">
                        	
                            <label for="contact-email" class="col-sm-2 control-label">E-mail:</label>
                            <div class="col-sm-10">
                            	<input type="email" name="email" class="form-control" id="contact-email" placeholder="you@example.com">
                            </div>
                        </div>
                        <div class="form-group">
                        	<label for="contact-msg" class="col-sm-2 control-label">Message:</label>
                            <div class="col-sm-10">
                            	<textarea name="message" placeholder="Type your message..." id="contact-message" class="form-control" rows="6"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-primary" data-dismiss="modal">Close</a>
                        <button class="btn btn-primary" id="new-message">New Message</button>
                        <button class="btn btn-primary" value="1" name="submit" type="submit" id="submit">Send Message</button>
                    </div>
                </form>
                
            </div>
        </div>    
    </div>

Open in new window


JavaScript
$('form.ajax').on('submit', function() {
	var that = $(this),
		url = that.attr('action'),
		type = that.attr('method'),
		data = {};
		
	that.find('[name]').each(function(index, value) {
		var that = $(this),
			name = that.attr('name'),
			value = that.val();
			
		data[name] = value;
	});
	$.ajax({

		url: url,
		type: type,
		data: data,
		success: function(response) {
			$('#form-alert').show();
			$('#modal-body-id').hide();
			$('#submit').hide();
			$('#new-message').show();
			
		}
        
	});
	
	return false;
});

$(document).ready(function(){
    $('#form-alert').hide();
	$('#new-message').hide();
	
	$("#new-message").click(function(){
		$("#contact-form")[0].reset();
		$('#modal-body-id').show();
		$('#new-message').hide();
		$('#submit').show();
		$('#form-alert').hide();		
	});
	
});

Open in new window

arnoldCommented:
your issue is that you need to set type="reset" for new message.
Without setting the type, a click is seen as submit.

<a href="#contact" data-toggle="modal" class="navbar-text">Contact</a>

<div class="modal fade" id="contact" role="dialog">
    	<div class="modal-dialog">
        	<div class="modal-content">
            	<form id="contact-form" class="form-horizontal ajax" role="form" action="" method="post">
                    
                    <div class="modal-header">
                        <h4>Contact Me <a class="close" data-dismiss="modal">x</a></h4>
                        
                    </div>
                    <div id="form-alert" class="alert alert-success">Thank You for your message.  I will reply as soon as possible.</div>
                    <div class="modal-body" id="modal-body-id">
                        
                        <div class="form-group">
                        	
                            <label for="contact-email" class="col-sm-2 control-label">E-mail:</label>
                            <div class="col-sm-10">
                            	<input type="email" name="email" class="form-control" id="contact-email" placeholder="you@example.com">
                            </div>
                        </div>
                        <div class="form-group">
                        	<label for="contact-msg" class="col-sm-2 control-label">Message:</label>
                            <div class="col-sm-10">
                            	<textarea name="message" placeholder="Type your message..." id="contact-message" class="form-control" rows="6"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-primary" data-dismiss="modal">Close</a>
                        <button class="btn btn-primary" id="new-message" type="reset">New Message</button>
                        <button class="btn btn-primary" value="1" name="submit" type="submit" id="submit">Send Message</button>
                    </div>
                </form>
                
            </div>
        </div>    
    </div>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
bigeven2002Author Commented:
Cool!  I would have never thought to use type reset.  Works great thanks!  I'll probably submit another question on form validation later.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.