Dialog Boxes in HTML/ASP

I'm trying to build an ASP application with some interactive features.  I need to create pop up dialog boxes that will provide me with some control over user inputs.  These are the things I am trying to acheive:

1.  Possibly the simplest of the things I'm trying to do, I have an image of a button that links to a certain page using the <a href> tag.  When anyone clicks this link, I want a pop up dialog box to show up that asks them if they really want to proceed (should have Yes and No buttons).  If they click yes, they go to the page.  If they click No, the pop up should close and leave the original page as is.  I have read some material on Modal Dialog Boxes that can be called using the onclick procedure of a button, but I'm running into a problem here because if i use the <button> tag, I'm no longer able to use my image as the button.  I get the default ugly grey button in the background which annoys me to no end.  Is there any way to set the properties of this button to transparent and overlay my image on top of it?

2.  In some subsequent pages, I have some dropdown boxes and multiple select list boxes.  If a user clicks submit without making a selection within these boxes, I want to bring up a pop up that forces the user to select something before the application allows them to move on.  What are my options to accomplish this?  Is there any kind of vbscript or javascript that might be of help?

Any help would be much appreciated!  Thanks...
sviriyalAsked:
Who is Participating?
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.

forrest321Commented:
1)  I would keep away from modals.  They are a pain and dont play well with browsers other than IE.  You can also use an onclick even in your href, or just set your href's location to a javascript to present a confirm dialog.

<script type="text/javascript">
<!--
function confirmlink()
{
  if (confirm("Follow link?"))
  {
     window.location = "link url";
  }
  else
  {
     //user clicked no
  }
}
-->
</script>

2)  There are several different ways to handle this.  There are tons of javascript and vbscript snippets around for validating field values prior to submitting, however the best practice is to verify your data on the server side after the user has submitted.  This prevents them from bypassing javascript checks.
0
ETA-TECHNICIANSCommented:
for number 1 use:

<script language="JavaScript">
<!--//
function confirmMove(){
   var doGo = confirm("Do you really wish to proced?")
   if(doGo){
      location = "thepage.html";
   }
}
//-->
</script>

<a href="javascript:void(0)" onClick="confirmMove();"><img src="yourimage.gif"></a>

For number 2 use this model

for number 1 use:

<script language="JavaScript">
<!--//
function valForm(){
     var errorCount = 0;
     var errorMess = "";
     if(document.form.menu1[document.form.menu1.selectedIndex].value == ""){
          errorCount ++;
          errorMess = "Select a value from menu 1.\n";
     }
     if(errorCount == 0){
          document.form.submit();
     }else{
          alert(errorMess);
     }
}
//-->
</script>

<form name="form">
<select name="menu1">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<input type="button" name="button" value="Submit" onClick="valForm()">


------------------------
You should be able to extrapolate from these examples on how to  proceed.
Though this is all done using JavaScript (client-side), I would recmomend using server-side validation, as any user can easily switch off JavaScript.
0
sviriyalAuthor Commented:
Thank you forrest and ETA for the solutions to the first issue.  On the second issue, I agree with you in that server-side validation makes more sense if Javascript can be turned off client-side.  However, what exactly does server side validation mean?  I can forego a pop up box if at least the page will reload with a comment above the dropdown/multiple select box that something needs to be selected before the user can move on.  I'm not exactly sure how I would implement this though.  I will gladly post some of my current code if you think that would be helpful.

Thanks!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

forrest321Commented:
Server side validation means retrieving the values to be validated from the form and validating them in your ASP code rather than using client side javascript or vbscript like so:

<%
'This will reside in the page noted in your forms action property
x = Request.Form("fieldname")  'or request.querystring if your forms method is GET
if x = "" then
  'no value for that field
else
  'there is something for that field.  validate for the type or specific values you are expecting
end if
%>
0
ETA-TECHNICIANSCommented:
Server side means that the validation is handled on the server after form submission rather then on the client's machine via the browser.  and what you suggest, reloading the page with an error message, is pretty standard practice.

Doing a quick google search will give you tons of resources on how to write server side validation code.
for example:
http://www.powerasp.com/content/hintstips/server_side_form_validation.asp
http://www.asp101.com/articles/hojjat/formvalidation/default.asp
http://www.4guysfromrolla.com/webtech/120199-1.shtml
these all basically came up w/o any real digging.

but if you are going to use ASP, you should become familiar with server-side validation, as you will need it often.

Try these and then write some code.  if you hit some roadblocks then, post here again and folks will be happy to help.
0

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
sviriyalAuthor Commented:
Thank you both.  I will make sure to read up.  ETA, by the way, I'm unable to get your first solution in Javascript to work.  When I click OK on the confirm box, the new page doesn't load.  This is the code I used exactly as you wrote it:

<script language="JavaScript">
<!--//
function confirmMove(){
   var doGo = confirm("You will lose your current market selection.  Do you really wish to proced?")
   if(doGo){
      window.location = "default.asp";
   }
}
//-->
</script>

<a href="javascript:void(0)" onclick="confirmMove()">
<img src="new_mkt.png" border=0></a>
0
sviriyalAuthor Commented:
Just as an FYI, the "javascript:void(0)" statement didn't work for me.  I looked around on the internet and found this alternative:

<a href="#" onclick="confirmMove();return false;">
<img src="new_mkt.png" border=0></a>

This loads up my page successfully for some reason.  I will try some form validation stuff and get back to you both in few minutes.  Thanks again for all your help!
0
ETA-TECHNICIANSCommented:
oops - yeah remove the javascript:void(0).
0
sviriyalAuthor Commented:
Thank you ETA and Forrest.  I used the links you provided to gain some knowledge on Server-side form validation and my error handlers work pretty well.  I'm having to use session variables (something that concerns me a little bit) because I couldn't think of any other way to keep jumping from page to page while still keeping the user's selections from the previous pages.  Anyway, I think the application looks good, and I appreciate your help on this.  Since you both helped out, a split in points might be in order.  However, since ETA was the most helpful, I believe he/she should receive the majority of the points.  

How about something like 85 points to ETA and 40 points to Forrest?  I hope you both agree.
0
forrest321Commented:
Its all good.  I'm glad your code is working.  A thought:  If you want to stay away from session variables (thats my preference as well), how about creating a session table in your database and storing the values there?
0
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
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.