Solved

display dialog box using jquery ui after submitting a form

Posted on 2014-11-06
2
384 Views
Last Modified: 2014-11-11
I am currently submitting a form based on the select box selected option by setting the form action. When I hit the submit button the form is getting submitted correctly but I am looking to display a dialog box saying some confirmation message. This is where I am stuck. here is the mark up for my form and the jQuery

First HTML

<div id="mc_embed_signup">
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name </label>
	<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
	<label for="mce-LNAME">Last Name </label>
	<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
	<select id="listid">
		  <option>Choose an Email List</option>
		  <option id="local">Local Customers</option>
		  <option id="nonlocal">Internet Customers from Out of State</option>
		  <option id="tourists">Customers from Outside Our Area, but Visit Often</option>
		 </select>
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_e7f9ac4d5ea3363c1395539dd_db62125046" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

Open in new window


Here my jQuery Mark up

<script type="text/javascript">
$(document).ready(function(){
 //Function to change Form Action
	$("#listid").change(function(){
		var selected = $(this).children(":selected").text();
		switch(selected){
		case "Local Customers":
		$("#mc-embedded-subscribe-form").attr('action','/text.html/subscribe/post?u=e7f9ac4d5ea3363c1395539dd&amp;id=db62125046');
		$("#h2text").text("Local Customers :)");
		break;		
		case "Internet Customers from Out of State":
		$("#mc-embedded-subscribe-form").attr('action','/text.html/subscribe/post?u=e7f9ac4d5ea3363c1395539dd&amp;id=fad7d5dc8a');
		$("#h2text").text("Internet Customers from Out of State :)");
		break;		
		case "Customers from Outside Our Area, but Visit Often":
		$("#mc-embedded-subscribe-form").attr('action','/text.html/subscribe/post?u=e7f9ac4d5ea3363c1395539dd&amp;id=fdff0e10d2');
		$("#h2text").text("Customers from Outside Our Area, but Visit Often :)");
		break;		
		default:
		$("#mc-embedded-subscribe-form").attr('action','#');		
		
	}		
	});
	
	//Function For Back Button
		$(".back").click(function(){
		 parent.history.back();
		 return false;
		 });
		
	});
</script>

Open in new window


I have dialog box like beloq
	<div id="dialog" title="Almost Finished...">
	<h2 id="h2text"></h2>
    <p>Almost finished...<br />
    We need to confirm your email address.<br /><br />
    To complete the subscription process, please click the link in the email we just sent you.<br /><br />
  	</div>

Open in new window


I am looking to show this Dialog box on submission of the form.

Thanks
0
Comment
Question by:niceoneishere
2 Comments
 
LVL 32

Accepted Solution

by:
Big Monty earned 500 total points
ID: 40426932
you have 2 options, submit the form via ajax, then display the dialog, or on the submitted page, detect on page load if the page has been submitted, then display the dialog there
0
 
LVL 1

Author Closing Comment

by:niceoneishere
ID: 40436163
Thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now