Solved

Dialog Boxes in HTML/ASP

Posted on 2007-04-04
10
242 Views
Last Modified: 2012-06-22
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...
0
Comment
Question by:sviriyal
  • 4
  • 3
  • 3
10 Comments
 
LVL 2

Assisted Solution

by:forrest321
forrest321 earned 40 total points
Comment Utility
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
 
LVL 4

Expert Comment

by:ETA-TECHNICIANS
Comment Utility
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
 

Author Comment

by:sviriyal
Comment Utility
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
 
LVL 2

Expert Comment

by:forrest321
Comment Utility
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
 
LVL 4

Accepted Solution

by:
ETA-TECHNICIANS earned 85 total points
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:sviriyal
Comment Utility
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
 

Author Comment

by:sviriyal
Comment Utility
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
 
LVL 4

Expert Comment

by:ETA-TECHNICIANS
Comment Utility
oops - yeah remove the javascript:void(0).
0
 

Author Comment

by:sviriyal
Comment Utility
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
 
LVL 2

Expert Comment

by:forrest321
Comment Utility
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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

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

12 Experts available now in Live!

Get 1:1 Help Now