Solved

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

Posted on 2004-03-21
5
315 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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-…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

830 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