Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3103
  • Last Modified:

Javascript, Read-only Forms, and Dragable Layers

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
123abc
Asked:
123abc
  • 2
1 Solution
 
terminator_IIICommented:
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
 
123abcAuthor Commented:
That's not exactly what I meant..
0
 
terminator_IIICommented:
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now