?
Solved

Javascript, Read-only Forms, and Dragable Layers

Posted on 2005-03-04
5
Medium Priority
?
3,098 Views
Last Modified: 2012-06-27
I have run into a wall in the development of a solution, and in the process I have made quite bit of code to keep track of.  I will try to keep it very neat here so that everyone can understand it.  I am using HTML, Javascript, and ASP.

The basic idea is that I have a large form.  Within this form are subsections [Person1, Person2, Person3] that all have the same 5 pieces of information [Name, Address1, Address2, City/State, Country].  These text boxes are read-only, and are filled in from a pull-down menu populated from a database which will query and fill the boxes [this part has not yet been implemented, and is not part of the issue].  

Here is the problem: There is an option at the end of the pull down menu for the person to enter new information that wasn't in the database.  What I originally did was to have a pop-up window come up, the person filled the information into this window, and on submitting it, it populated the parent form.  However, becuase of popup blockers I need to look to a better solution.

What I found was a javascript for a "Dragable Layer" from CodeLifter.com @ [http://www.codelifter.com/main/javascript/dragablelayer.html]which you could make appear and dissapear.  

The original code I had setup, however, queried out a variable from each of the subsections of the form, depending on which had been clicked, to the new window.  I attempted to solve this problem by refreshing the same page, however in doing this I will loose data from Person1 if the user attempts to enter in information for Person2.  I also have the limitation of only 1 layer due to the restrictions of the code and my novice javascript expertise in editing it.

I apologize upfront for this description being long and most likely difficult to follow.  I have included the code, and hope that in looking at it an expert will be able to understand my predicaments.

THE GOAL IS TO AVOID HAVING TO USE SERVER-SIDE TO KEEP TRACK OF ANYTHING.  I want the person to be able to enter in new information for Person1, and Person2, 3, etc [which I did not include for the sake of keeping the code shorter] and be able to submit this at the end.

thank you very much in advance

----------------------------------------------------------
floatlayer.js
-------------
            // Script Source: CodeLifter.com
            // Copyright 2003
            // Do not remove this header
            
            isIE=document.all;
            isNN=!document.all&&document.getElementById;
            isN4=document.layers;
            isHot=false;
            
            function ddInit(e){
              topDog=isIE ? "BODY" : "HTML";
              whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
              hotDog=isIE ? event.srcElement : e.target;  
              while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
                hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
              }  
              if (hotDog.id=="titleBar"){
                offsetx=isIE ? event.clientX : e.clientX;
                offsety=isIE ? event.clientY : e.clientY;
                nowX=parseInt(whichDog.style.left);
                nowY=parseInt(whichDog.style.top);
                ddEnabled=true;
                document.onmousemove=dd;
              }
            }
            
            function dd(e){
              if (!ddEnabled) return;
              whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
              whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
              return false;  
            }
            
            function ddN4(whatDog){
              if (!isN4) return;
              N4=eval(whatDog);
              N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
              N4.onmousedown=function(e){
                N4.captureEvents(Event.MOUSEMOVE);
                N4x=e.x;
                N4y=e.y;
              }
              N4.onmousemove=function(e){
                if (isHot){
                  N4.moveBy(e.x-N4x,e.y-N4y);
                  return false;
                }
              }
              N4.onmouseup=function(){
                N4.releaseEvents(Event.MOUSEMOVE);
              }
            }
            
            function hideMe(){
              if (isIE||isNN) whichDog.style.visibility="hidden";
              else if (isN4) document.theLayer.visibility="hide";
            }
            
            function showMe(){
              if (isIE||isNN) whichDog.style.visibility="visible";
              else if (isN4) document.theLayer.visibility="show";
            }
            
            document.onmousedown=ddInit;
            document.onmouseup=Function("ddEnabled=false");
-----------------------------------------------------------------------------
test.asp
----------
<html>
      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            
            <script LANGUAGE="JavaScript" SRC="floatLayer.js"></script>
            <script type="text/javascript" language="JavaScript">
                  function reloadFunction(type, x)
                  {
                      var selObj = document.getElementById('selectID' + x);            
                        var selIndex = selObj.selectedIndex;      
                        var txtValueObj = selObj.options[selIndex].value;
                        
                        var type = type;
                        
                        //alert("x: " + x + '\n' + "type: " + type + '\n' + "selIndex: " + selIndex + '\n' + "txtValueObj: " + txtValueObj)
                        
                        if (txtValueObj == '*')
                        {
                              showMe();      
                        }
                  }
                  
               function setInParentForm()
               {
                  document["myform"].userid<%=Request.Querystring("type")%>.value = document["userInfoForm"].userid<%=Request.Querystring("type")%>.value;
                  document["myform"].address1<%=Request.Querystring("type")%>.value = document["userInfoForm"].address1<%=Request.Querystring("type")%>.value;
                  document["myform"].address2<%=Request.Querystring("type")%>.value = document["userInfoForm"].address2<%=Request.Querystring("type")%>.value;
                  document["myform"].citystate<%=Request.Querystring("type")%>.value = document["userInfoForm"].citystate<%=Request.Querystring("type")%>.value;
                  document["myform"].country<%=Request.Querystring("type")%>.value = document["userInfoForm"].country<%=Request.Querystring("type")%>.value;
               }
                  
            
            </script>
            
            <style>
                  body {
                        font-family: Arial
                  }
            </style>

      </head>


      <body>
            <!-- BEGIN FLOATING LAYER CODE //-->
                  <div id="theLayer" style="position:absolute;width:250px;left:351px;top:50px;visibility:hidden">
                  <table border="0" width="250" bgcolor="#ff9933" cellspacing="0" cellpadding="5">
                  <tr>
                  <td width="100%">
                    <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
                    <tr>
                    <td id="titleBar" style="cursor:move" width="100%">
                    <ilayer width="100%" onSelectStart="return false">
                    <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
                    <font face="Arial" color="#FFFFFF">Enter Info</font>
                    </layer>
                    </ilayer>
                    </td>
                    <td style="cursor:hand" valign="top">
                    <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
                    </td>
                    </tr>
                    <tr>
                    <td width="100%" bgcolor="#fffaf0" style="font-size: 12px; padding:4px" colspan="2">
                  <!-- PLACE YOUR CONTENT HERE //-->  
                     <form name="userInfoForm">
                        <table style="font-size: 13px">
                              <tr><td>Name: </td><td><input id="autofocus" type="text" name="userid<%=Request.Querystring("type")%>"/></td></tr>
                              <tr><td>Address 1: </td><td><input type="text" name="address1<%=Request.Querystring("type")%>"/></td></tr>
                              <tr><td>Address 2: </td><td><input type="text" name="address2<%=Request.Querystring("type")%>"/></td></tr>
                              <tr><td>City / State: </td><td><input type="text" name="citystate<%=Request.Querystring("type")%>"/></td></tr>
                              <tr><td>Country: </td><td><input type="text" name="country<%=Request.Querystring("type")%>"/></td></tr>
                        </table>
                  
                        <div align=center><input type="button" name="okbutton" value="OK" onClick="setInParentForm(); hideMe()"/></div>
                     </form>
                  <!-- END OF CONTENT AREA //-->
                    </td>
                    </tr>
                    </table>
                  </td>
                  </tr>
                  </table>
                  </div>
            <!-- END FLOATING LAYER CODE //-->
                  
            
      <a href="javascript:showMe();">show</a> |
      <a href="javascript:hideMe();">hide</a>
      <br />      <br />      
            
      <form name="myform">      
      <table border="0">
            <tr>
                  <td colspan=2 style="font-size:19px; font-weight:bold">Person1</td>
            </tr>
            <tr>
                  <td colspan="2">
                              <select id="selectID1" onChange="reloadFunction('Shipper', 1)">
                                      <option>Select Person:</option>
                                      <option>------------------------------------------------------------------------</option>
                                      <option>Person 1 [will eventually be dynamic]</option>
                                      <option>Person 2</option>
                                      <option value="*">Enter New Person</option>
                        </select>
                  </td>
            </tr>
            <tr>
                  <td>Name</td>
                  <td><input readonly size=35 type="text" name="useridPerson"/></td>
            </tr>
            <tr>
                  <td>Address 1:</td>
                  <td><input readonly size=35 type="text" name="address1Person"/></td>
            </tr>
            <tr>
                  <td>Address 2:</td>
                  <td><input readonly size=35 type="text" name="address2Person" value=""/></td>
            </tr>
            <tr>
                  <td>City / State</td>
                  <td><input readonly size=35 type="text" name="citystatePerson" value=""/></td>
            </tr>
            <tr>
                  <td>Country</td>
                  <td><input readonly size=35 type="text" name="countryPerson" value=""/></td>
            </tr>
      </table>
      </form>

      </body>
      
</html>
0
Comment
Question by:123abc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
5 Comments
 
LVL 2

Expert Comment

by:terminator_III
ID: 13475742
The big issue you have here is that once the server data is changed (ie new name added for example)  Your "client side" page does not know its there.  Javascript wont help you because its client side, and a refresh will reset your data unless you put it in a cookie r something. (back to square 1!)  

I have done similar stuff, and it could be gotten round using a 2 prong method:

Bear with me on this.....  

I assume you are using some kind of file or db to populate fixed argument drop down menus dynamically.  

You could open a 'window.showModalDialog' window that has a form that POST's the new data to the server, and on closing also returns the newly entered fields back to the form. You then simply use javascript to add the value to the bottom of your drop down.


Link example for dialog boxes: http://www.codeproject.com/aspnet/Modal_Dialog.asp

Scot
0
 

Author Comment

by:123abc
ID: 13489154
That's not exactly what I meant..
0
 
LVL 2

Accepted Solution

by:
terminator_III earned 2000 total points
ID: 13494415
Well perhaps the example below is closer to your needs.  I did misread your question sorry, i kinda skipped half of it, pretty busy at the moment.

You could simply use a <DIV tag to "hide" new fields in the form and if a user click "add new" etc, simply spit out a new box or whatever that way.

I have uploaded an example of a dynamic div tag here:---  http://codecentre.visicomscientific.co.uk/form_with_dynamic_elements.htm

If this is anything like what you want let me know, I can help you expand upon it a little more.

BTW using dialogs as explained previously would be a reliable way to get round popup blockers.  I am not aware of any that stop them.


Scot



0

Featured Post

Automating Terraform w Jenkins & AWS CodeCommit

How to configure Jenkins and CodeCommit to allow users to easily create and destroy infrastructure using Terraform code.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Suggested Courses

765 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