Results 1 to 6 of 6

Thread: Javascript alert to jquery dialog UI

  1. #1
    Join Date
    Oct 2011
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Javascript alert to jquery dialog UI

    Hi all i have a contact form that i have form validation on each input, if you press submit and you haven't filled out a required part of the form you will be alerted to fill it out. I want to now use a jquery dialog box instead of the javascript alert box, how would i go about making this change?

    Code:
    
    function validate_form ( )
    {
    	valid = true;
    
            if ( document.contact.contact_name.value == "" )
            {
                    alert ( "Please enter your full name." );
                    valid = false;
            }
    		
    		if ( document.contact.phoneNum.value == "" )
    		{	
    			alert ( "Please supply us with your Contact Number" );
                    valid = false;
    		}
    		
    		if ( document.contact.email.value == "" )
    		{	
    			alert ( "Please enter your Email Address" );
                    valid = false;
    		}
    		
    		if ( document.contact.feedback.value == "" )
    		{	
    			alert ( "Please enter your message" );
                    valid = false;
    		}
    
            return valid;
    }

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Something like (in the head of the page):

    Code:
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	window.$required = $('<div></div>').dialog({
    		autoOpen: false,
    		title: 'Required Information'
    	});
    });
    function validate_form(){
    	var valid = true;
    
    	if (document.contact.contact_name.value == ""){
    		$required.html("Please enter your full name.").dialog('open');
    		valid = false;
    	}
    
    	if (document.contact.phoneNum.value == ""){	
    		$required.html("Please supply us with your Contact Number").dialog('open');
    		valid = false;
    	}
    
    	if (document.contact.email.value == ""){	
    		$required.html("Please enter your Email Address").dialog('open');
    		valid = false;
    	}
    
    	if (document.contact.feedback.value == ""){	
    		$required.html("Please enter your message").dialog('open');
    		valid = false;
    	}
    
    	return valid;
    }
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2011
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    thanks that helps and it kind of even works! at the moment instead of showing a box it just displays the message without giving it a nice box to sit in. Probably a simple fix?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Did you include the:

    Code:
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    tag in the head of the page as shown in my previous post? It should style the dialog box for you. At least it did here when I tried it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2011
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    No i hadn't as i assumed it would have come with the jquery UI download package, which it doesn't.
    Thanks for that, John much appreciated

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yes, actually I started out downloading a jQuery UI package as well. But then I somehow got to:

    http://example.nemikor.com/basic-usa...ery-ui-dialog/

    and looked at the source code, which included:

    Code:
    	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
    
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    I'm familiar with the ajax.googleapis so I figured they probably had the latest versions mentioned on the other pages about the dialog function, so I just put those numbers in:

    Code:
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    And it worked. So you really don't need the package, Google is hosting it and more (has the css too).

    But you might want to style the dialog yourself. It takes a DOM inspector to see the class names involved. Or you can go to:

    http://jqueryui.com/docs/dialog/

    and click on the Theming tab to see the generated markup with class names as well as some advice on customizing the look of the dialog.

    But for instance:

    Code:
    <style type="text/css">
    .ui-dialog-titlebar {
    	background: gold;
    }
    </style>
    changes the background for the title bar of the dialog.
    Last edited by jscheuer1; 10-24-2011 at 03:57 AM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    louisaivy (10-24-2011)

Tags for this Thread

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
  •