Solved

write the value of the field chosen to the first available text field in another  table

Posted on 2004-03-21
5
313 Views
Last Modified: 2010-05-18
Hi there.. Its a bit hard to explain what i want but ill do my best :)
 
You know in access when you want to create a report and during the wizard you have 2 tables and the left one contains the available fields and you have the option to click and add the field name to the other table so that it will be included in the report.

Well am trying to do a similar thing. I created an online database  application using php that connects to mysql and on of the options is to run a report and choose the fields you want to be included in it (ie: member id, name, surname, etc)

I am having a problem at the point where the user clicks the button next to the field to be added in the report and i have problems making it appear in the other table

Here is the code


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javaScript">
                  
                                          
                  function add_selections2()
                  {
                        
                        var choises= new Array(5)
                              choises[0]=document.all.option0.value;
                              choises[1]=document.all.option1.value;
                              choises[2]=document.all.option2.value;
                              choises[3]=document.all.option3.value;
                              choises[4]=document.all.option4.value;
                        
                        var fields= new Array(5)
                              fields[0]="option0";
                              fields[1]="option1";
                              fields[2]="option2";
                              fields[3]="option3";
                              fields[4]="option4";
                              
            
                        var i=0;
                        switch (selections)
                        {
                        case "name":
                              while (i<5)
                              {      
                              if(choises[i]=="")
                              {
//The problem am havins is in the next line.
// I cant get the "field[i]" to work. Always gives me field is not an object, but i want the value of it to be used.
                              document.all.field[i].value="Member Id";
                              document.all.mem_id.bgColor='#9999FF';
                              break;
                              }
                                      else
                                    {
                                                                                                                        i++;                                                      }
                                     }break;
                        }
                  }
                        
                  
                  
</script>

<style type="text/css">
.Non_edit_fields {
      font-size:13;
      background-color:#FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      display: table-column-group;
      border: thin solid #9999CC;
      }
-->
</style>
</head>

<body onLoad="javascript:document.all.b1.focus">
            <div id=asd style="position:absolute; top:30px; left:2px; visibility:visible; width: 779px; height: 328px;">
            <!-- Customised report for list all members -->
              <form name="List_members" id="newmember" onsubmit="check_form(this); return false;">
                  
    <table  width="556" height="121" cellpadding=2 cellspacing=1 >
      <tr>
        <td height="73" colspan="2">Step 1:</td>
        <td colspan="2">Step 2:</td>
      </tr>
      <tr>
        <td width="115" height="43">Membership Type:</td>
        <td width="121"><select name="choice" >
            <option>Please choose....</option>
            <option value="Member">Member</option>
            <option value="Honorary Member">Honorary Member</option>
            <option value="Board Member">Board Member </option>
          </select></td>
        <td width="115" >Membership State</td>
        <td width="174"><select name="member_state" >
            <option>Please choose....</option>
            <option value="Active">Active</option>
            <option value="To be Renewed">To be Renewed</option>
            <option value="Suspended">Suspended </option>
          </select></td>
      </tr>
      <tr>
        <td colspan="4"> <hr></td>
      </tr>
       </table>
     
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td width="228" height="73">Fields Available</td>
        <td width="322">Fields Selected</td>
      </tr>
      <tr>
        <td height="43"> <table width="118" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid black">
            <tr>
              <td width="84" id="mem_id" >Member Id</td>
              <td width="32"><div align="right">
                  <input type="button" name="b1" value=">>" onClick=" javascript:selections='1'; add_selections2()">
                </div></td>
            </tr>
            <tr>
              <td  id="names">Name</td>
              <td><div align="right">
                  <input type="button" name="b2" value=">>" onClick="javascript:selections='name'; add_selections2()">
                </div></td>
            </tr>
            <tr>
              <td  id="Surnames">Surname</td>
              <td><div align="right">
                  <input type="button" name="b3" value=">>" onClick="javascript:selections='surname'; add_selections()">
                </div></td>
            </tr>
            <tr>
              <td  id="Addresss">Address</td>
              <td><div align="right">
                                <input type="button" name="b4" value=">>" onClick="javascript:selections='address'; add_selections()">
                        </div></td>
            </tr>
            <tr>
            <td  id="Telephones">Telephone</td>
              <td><div align="right">
                                <input type="button" name="b5" value=">>" onClick="javascript:selections='Telephone'; add_selections()">
                        </div></td>
            </tr>  
                  <tr>
            <td  id="Mobiles">Mobile</td>
              <td><div align="right">
                                <input type="button" name="b5" value=">>" onClick="javascript:selections='Mobiles'; add_selections()">
                        </div></td>
            </tr>  
             <tr>
            <td  id="Emails">Email</td>
              <td><div align="right">
                                <input type="button" name="b5" value=">>" onClick="javascript:selections='Email'; add_selections()">
                        </div></td>
            </tr>  
            <tr>
                   <td  id="Professions">Profession</td>
              <td><div align="right">
                                <input type="button" name="b5" value=">>" onClick="javascript:selections='Profession'; add_selections()">
                        </div></td>
            </tr>  
          </table></td>
        <td  align="left">
                  <table width="110" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid black">
              <tr>
              <td width="114" > <input class="Non_edit_fields" type=text id="option0" name="option1" size=18>
              </td>
             
            </tr>
            <tr>
              <td  > <input class="Non_edit_fields" type=text    name="option1" size=18></td>
             
            </tr>
            <tr>
              <td  > <input  class="Non_edit_fields" type=text name="option2"  size=18></td>
             
            </tr>
            <tr>
              <td   > <input  class="Non_edit_fields" type=text name="option3"  size=18></td>
             
            </tr>
            <tr>
              <td    > <input  class="Non_edit_fields" type=text name="option4"  size=18></td>
             
            </tr>
            <tr>
              <td  > <input  class="Non_edit_fields" type=text name="option5"  size=18></td>
           
            </tr>
            <tr>
              <td   > <input  class="Non_edit_fields" type=text name="option6" size=18></td>
             
            </tr>
            <tr>
              <td ><input  class="Non_edit_fields" type=text name="option7"  size=18></td>
             
            </tr>
           
          </table>
          <div align="center"></div>
          <div align="center"></div></td>
      </tr>
    </table>
              </form>
            </div>
</body>
</html>


And basically i  need to write the value of the field chosen to the first available text field in the other table that does not have a value.

Its not really important for the report as its just a visual addition , but is good to have in it though

any help will be much apreciated


thanks
0
Comment
Question by:Yiannis
  • 2
  • 2
5 Comments
 
LVL 12

Assisted Solution

by:lil_puffball
lil_puffball earned 200 total points
ID: 10645630
First, make sure the value that selections gets is the same as the id of the corresponding table cell.
Here is the javascript code:

-------------------------------------------
<script language="javaScript">
var selections;
                                   
function add_selections(){
  var choises=8

  for(i=0;i<choises;i++){
alert(i+"-"+document.forms[0].elements["option"+i].value+"-");
    if(document.forms[0].elements["option"+i].value==""){
      document.forms[0].elements["option"+i].value=document.getElementById(selections).firstChild.data;
      document.getElementById(selections).bgColor="#9999ff";
      break;
    }
  }
}
</script>
-------------------------------------------

And here is the entire code: (I fixed it up because some of the ids and text didn't match)

-------------------------------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javaScript">
var selections;
                                   
function add_selections(){
  var choises=8

  for(i=0;i<choises;i++){
alert(i+"-"+document.forms[0].elements["option"+i].value+"-");
    if(document.forms[0].elements["option"+i].value==""){
      document.forms[0].elements["option"+i].value=document.getElementById(selections).firstChild.data;
      document.getElementById(selections).bgColor="#9999ff";
      break;
    }
  }
}
</script>

<style type="text/css">
.Non_edit_fields {
     font-size:13;
     background-color:#FFFFFF;
     font-family: Arial, Helvetica, sans-serif;
     display: table-column-group;
     border: thin solid #9999CC;
     }
-->
</style>
</head>

<body onLoad="javascript:document.all.b1.focus">
          <div id=asd style="position:absolute; top:30px; left:2px; visibility:visible; width: 779px; height: 328px;">
          <!-- Customised report for list all members -->
            <form name="List_members" id="newmember" onsubmit="check_form(this); return false;">
               
    <table  width="556" height="121" cellpadding=2 cellspacing=1 >
      <tr>
        <td height="73" colspan="2">Step 1:</td>
        <td colspan="2">Step 2:</td>
      </tr>
      <tr>
        <td width="115" height="43">Membership Type:</td>
        <td width="121"><select name="choice" >
            <option>Please choose....</option>
            <option value="Member">Member</option>
            <option value="Honorary Member">Honorary Member</option>
            <option value="Board Member">Board Member </option>
          </select></td>
        <td width="115" >Membership State</td>
        <td width="174"><select name="member_state" >
            <option>Please choose....</option>
            <option value="Active">Active</option>
            <option value="To be Renewed">To be Renewed</option>
            <option value="Suspended">Suspended </option>
          </select></td>
      </tr>
      <tr>
        <td colspan="4"> <hr></td>
      </tr>
      </table>
     
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td width="228" height="73">Fields Available</td>
        <td width="322">Fields Selected</td>
      </tr>
      <tr>
        <td height="43"> <table width="118" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid black">
            <tr>
              <td width="84" id="mem_id" >Member Id</td>
              <td width="32"><div align="right">
                  <input type="button" name="b1" value=">>" onClick=" javascript:selections='mem_id'; add_selections()">
                </div></td>
            </tr>
            <tr>
              <td  id="name">Name</td>
              <td><div align="right">
                  <input type="button" name="b2" value=">>" onClick="javascript:selections='name'; add_selections()">
                </div></td>
            </tr>
            <tr>
              <td  id="surname">Surname</td>
              <td><div align="right">
                  <input type="button" name="b3" value=">>" onClick="javascript:selections='surname'; add_selections()">
                </div></td>
            </tr>
            <tr>
              <td  id="address">Address</td>
              <td><div align="right">
                           <input type="button" name="b4" value=">>" onClick="javascript:selections='address'; add_selections()">
                    </div></td>
            </tr>
            <tr>
            <td  id="Telephone">Telephone</td>
              <td><div align="right">
                           <input type="button" name="b5" value=">>" onClick="javascript:selections='Telephone'; add_selections()">
                    </div></td>
            </tr>  
               <tr>
            <td  id="Mobiles">Mobile</td>
              <td><div align="right">
                           <input type="button" name="b5" value=">>" onClick="javascript:selections='Mobiles'; add_selections()">
                    </div></td>
            </tr>  
             <tr>
            <td  id="Email">Email</td>
              <td><div align="right">
                           <input type="button" name="b5" value=">>" onClick="javascript:selections='Email'; add_selections()">
                    </div></td>
            </tr>  
            <tr>
                <td  id="Profession">Profession</td>
              <td><div align="right">
                           <input type="button" name="b5" value=">>" onClick="javascript:selections='Profession'; add_selections()">
                    </div></td>
            </tr>  
          </table></td>
        <td  align="left">
               <table width="110" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid black">
              <tr>
              <td width="114" > <input class="Non_edit_fields" type=text id="option0" name="option0" size=18>
              </td>
             
            </tr>
            <tr>
              <td  > <input class="Non_edit_fields" type=text name="option1" size=18></td>
             
            </tr>
            <tr>
              <td  > <input  class="Non_edit_fields" type=text name="option2"  size=18></td>
             
            </tr>
            <tr>
              <td   > <input  class="Non_edit_fields" type=text name="option3"  size=18></td>
             
            </tr>
            <tr>
              <td    > <input  class="Non_edit_fields" type=text name="option4"  size=18></td>
             
            </tr>
            <tr>
              <td  > <input  class="Non_edit_fields" type=text name="option5"  size=18></td>
           
            </tr>
            <tr>
              <td   > <input  class="Non_edit_fields" type=text name="option6" size=18></td>
             
            </tr>
            <tr>
              <td ><input  class="Non_edit_fields" type=text name="option7"  size=18></td>
             
            </tr>
           
          </table>
          <div align="center"></div>
          <div align="center"></div></td>
      </tr>
    </table>
            </form>
          </div>
</body>
</html>

-------------------------------------------
0
 
LVL 8

Accepted Solution

by:
william_jwd earned 100 total points
ID: 10648152
try this

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javaScript">
var selections;              
var selectionCount = 0;
                                   
               function add_selections(str, id)
               {                    
                              document.List_members["option" + selectionCount].value = str;
                              document.getElementById(id).bgColor='#9999FF';
                              selectionCount++;
               }
                   
               
               
</script>

<style type="text/css">
.Non_edit_fields {
     font-size:13;
     background-color:#FFFFFF;
     font-family: Arial, Helvetica, sans-serif;
     display: table-column-group;
     border: thin solid #9999CC;
     }
-->
</style>
</head>

<body onLoad="javascript:document.all.b1.focus">
          <div id=asd style="position:absolute; top:30px; left:2px; visibility:visible; width: 779px; height: 328px;">
          <!-- Customised report for list all members -->
            <form name="List_members" id="newmember" onsubmit="check_form(this); return false;">
               
    <table  width="556" height="121" cellpadding=2 cellspacing=1 >
      <tr>
        <td height="73" colspan="2">Step 1:</td>
        <td colspan="2">Step 2:</td>
      </tr>
      <tr>
        <td width="115" height="43">Membership Type:</td>
        <td width="121"><select name="choice" >
            <option>Please choose....</option>
            <option value="Member">Member</option>
            <option value="Honorary Member">Honorary Member</option>
            <option value="Board Member">Board Member </option>
          </select></td>
        <td width="115" >Membership State</td>
        <td width="174"><select name="member_state" >
            <option>Please choose....</option>
            <option value="Active">Active</option>
            <option value="To be Renewed">To be Renewed</option>
            <option value="Suspended">Suspended </option>
          </select></td>
      </tr>
      <tr>
        <td colspan="4"> <hr></td>
      </tr>
      </table>
     
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td width="228" height="73">Fields Available</td>
        <td width="322">Fields Selected</td>
      </tr>
      <tr>
        <td height="43"> <table width="118" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid black">
            <tr>
              <td width="84" id="mem_id" >Member Id</td>
              <td width="32"><div align="right">
                  <input type="button" name="b1" value=">>" onClick="add_selections('Member Id', 'mem_id')">
                </div></td>
            </tr>
            <tr>
              <td  id="names">Name</td>
              <td><div align="right">
                  <input type="button" name="b2" value=">>" onClick="javascript:add_selections('Name', 'names')">
                </div></td>
            </tr>
            <tr>
              <td  id="Surnames">Surname</td>
              <td><div align="right">
                  <input type="button" name="b3" value=">>" onClick="javascript:add_selections('Surname', 'Surnames')">
                </div></td>
            </tr>
            <tr>
              <td  id="Addresss">Address</td>
              <td><div align="right">
                           <input type="button" name="b4" value=">>" onClick="javascript:add_selections('Address', 'Addresss')">
                    </div></td>
            </tr>
            <tr>
            <td  id="Telephones">Telephone</td>
              <td><div align="right">
                           <input type="button" name="b5" value=">>" onClick="javascript:add_selections('Telephone', 'Telephones')">
                    </div></td>
            </tr>  
               <tr>
            <td  id="Mobiles">Mobile</td>
              <td><div align="right">
                           <input type="button" name="b5" value=">>" onClick="javascript:add_selections('Mobile', 'Mobiles')">
                    </div></td>
            </tr>  
             <tr>
            <td  id="Emails">Email</td>
              <td><div align="right">
                           <input type="button" name="b5" value=">>" onClick="javascript:add_selections('Email', 'Emails')">
                    </div></td>
            </tr>  
            <tr>
                <td  id="Professions">Profession</td>
              <td><div align="right">
                           <input type="button" name="b5" value=">>" onClick="javascript:add_selections('Profession', 'Professions')">
                    </div></td>
            </tr>  
          </table></td>
        <td  align="left">
               <table width="110" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid black">
              <tr>
              <td width="114" > <input class="Non_edit_fields" type=text name="option0" size=18>
              </td>
             
            </tr>
            <tr>
              <td  > <input class="Non_edit_fields" type=text    name="option1" size=18></td>
             
            </tr>
            <tr>
              <td  > <input  class="Non_edit_fields" type=text name="option2"  size=18></td>
             
            </tr>
            <tr>
              <td   > <input  class="Non_edit_fields" type=text name="option3"  size=18></td>
             
            </tr>
            <tr>
              <td    > <input  class="Non_edit_fields" type=text name="option4"  size=18></td>
             
            </tr>
            <tr>
              <td  > <input  class="Non_edit_fields" type=text name="option5"  size=18></td>
           
            </tr>
            <tr>
              <td   > <input  class="Non_edit_fields" type=text name="option6" size=18></td>
             
            </tr>
            <tr>
              <td ><input  class="Non_edit_fields" type=text name="option7"  size=18></td>
             
            </tr>
           
          </table>
          <div align="center"></div>
          <div align="center"></div></td>
      </tr>
    </table>
            </form>
          </div>
</body>
</html>
0
 

Author Comment

by:Yiannis
ID: 10651755
Thanks both of you. Thats exactly what i needed.  

I gave lil_puffball more points since he answered first and im going to use his code, but thanks to both of you really.

I guess there is more than one way of doing things
 
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10652866
Glad to help! Thanks for the points and the A. :)

(P.S. I'm a girl... :P)
0
 
LVL 8

Expert Comment

by:william_jwd
ID: 10655604
That's fine Yiannis....

William.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 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

23 Experts available now in Live!

Get 1:1 Help Now