VERY URGENT: Use of Javascript to select data and then insert into db.

Hi All

The following form uses javascript to put together a selection box followed by two readonly textboxes. The selection box reads in the project_ID from the db and the following boxes read in student_ID and project_name. What I need to be able to do is to select the student_ID from the drop down box and see the corresponding project_ID and project_name.

There are 4 bits of data that I need to pass on from this form when the user submits - project_ID and student_ID (from javascript), plus lecturer_role (from radio buttons within form) and lecturer_ID (from $_SESSION variable). The main priorty is the project_ID and student_ID.

I am hoping that the inputs will follow the usual structure once the selection box is sorted:

<input type="hidden" name="project_ID">
<input type="hidden" name="lecturer_role">
<input type="hidden" name="student_ID">
<input type="hidden" name="lecturer_ID">

But would appreciate some help.

Here is the code:

<form action="modproject.php?action=joinPROJECT" method="post">
<table width="72%" border="0">
  <tr bgcolor="#E6E6E6">
    <td bgcolor="#E2E2F2"><span class="style2 style1"><strong>Select Lecturer Role</strong></span><span class="style5"><br>
    </span></td>
    <td bgcolor="#F2F2FF"> <span class="style2">
      <input type="radio" name="role" value="Second Marker">
      Second Marker
       <input type="radio" name="role" value="Third Marker">
      Third Marker
       <input type="radio" name="role" value="Fourth Marker">
      Fourth Marker
       </span></td>
  </tr>
  <tr bgcolor="#E6E6E6">
    <td bgcolor="#E2E2F2"><span class="style2 style1"><strong>Select Project</strong></span></td>
    <td bgcolor="#F2F2FF">
<?php
     $optionsHTML = '';
     $optionsJS      = "var projectData = new Array();\n";

     $query = 'SELECT project_ID, project_name, student_ID FROM student_project';

     $result = mysql_query($query) or die("error in query:" . mysql_error());

     function jsSafe($str) {
     return addslashes(htmlspecialchars(preg_replace("/[\n\r]+/",'', $str)));
}

     while($row = mysql_fetch_assoc($result)) {
       $optionsHTML .= '<option value="'.$row['project_ID'].'">'.$row['project_ID'].'</option>';
       $optionsJS .= sprintf('projectData[%d] = new Array("%s","%s");'."\n",
                      $row['project_ID'],
                      jsSafe($row['student_ID']),
                      jsSafe($row['project_name']));
}

     echo '<script type="text/javascript">';
     echo $optionsJS;
     echo '</script>';  
     echo '<select onchange="v=eval(this.options[this.selectedIndex].value);this.form.text1.value=projectData[v][0];this.form.text2.value=projectData[v][1];">';
     echo $optionsHTML;
     echo '</select>';
     echo '<input type="text" name="text1" readonly="readonly" />';
     echo '<input type="text" name="text2" readonly="readonly" />';

?>
</td>
</table>
<br>
<input type="submit" name="submit" value="Join Project">
</form>
brasco_2006Asked:
Who is Participating?
 
waygoodCommented:
Since your not using text1 and text2 to show the Project Name and Student name, I've removed them from the javascript and the select options Apart from that I've just copied and pasted the script to my machine and both ID's are being posted okay. I've also forced one of the raio buttons to on, because if the user hits the submit button, the value doesnt pass, as none are selected.

<h2>Join an existing Project</h2>
<p class="style3">NOTE: The following information is required to join a student project. The roles of Second Marker, Third Marker and Fourth Marker are avaliable.</p>
<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.options[selected].value;

    oldpos=-1;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

    oldpos = pos;
    this_form.student_ID.value = thevalue.substring(oldpos+1,thevalue.length)
}
//--></script>
<form name="JOINPROJECT" action="modproject.php?action=joinPROJECT" method="post">
    <input type="hidden" name="project_ID" value=""/>
    <input type="hidden" name="student_ID" value=""/>
    <table width="79%" border="0">
        <tr bgcolor="#E6E6E6">
            <td width="27%" bgcolor="#E2E2F2" class="style2 style1">
                <strong>Select Lecturer Role</strong>
            </td>
            <td width="73%" bgcolor="#F2F2FF" class="style2">
                <input type="radio" name="role" value="Second Marker" checked="checked"> Second Marker<br/>
                <input type="radio" name="role" value="Third Marker"> Third Marker<br/>
                <input type="radio" name="role" value="Fourth Marker"> Fourth Marker
            </td>
        </tr>
        <tr bgcolor="#E6E6E6">
            <td bgcolor="#E2E2F2" class="style2 style1">
                <strong>Select Student Project</strong>
            </td>
            <td bgcolor="#F2F2FF">
                <select name="mySelect" onchange="updateForm(this.form);">
<?php  

      $query = 'SELECT student_project.project_ID, student_project.project_name, student_project.student_ID, student.student_name FROM student_project, student WHERE student_project.student_ID=student.student_ID';
    $result = mysql_query($query) or die("error in query:" . mysql_error());

    while($row = mysql_fetch_assoc($result))
    {
        echo '<option value="'.$row['project_ID'].'#'.$row['student_ID'].'">'.htmlentities($row['student_ID'])." | ".htmlentities($row['student_name'])." | ".htmlentities($row['project_name']).'</option>';
    }
?>
                </select>
            </td>
        </tr>
    </table>
    <br/>
    <input type="submit" name="submit" value="Join Project">  
</form>
<script language="JavaScript"><!--
updateForm(document.JOINPROJECT);
//--></script>
0
 
waygoodCommented:
http://www.irt.org/script/898.htm shows a good example of copying values from a drop down box to fields.

I suggect for your needs, ignoring the Selected value from this box on submittion and place the value (ie index) to a hidden form field when it changes. This way you can have Student_Project_ID, Student_Name and Project_Name in the option values, and only submit the required info.

ie

<select name="ignore" onchange="javascript:....>
  <option value="project_id&project_name&student_name">project_name</option>
</select>
<input name="Project_ID" type="hidden" value=""/>
<input name="Student_Name" type="text" value=""/>

getting javascript to change the value of Project_ID and Student_Name, when the select box is changed.
0
 
brasco_2006Author Commented:
Using the code above, how can I send the inputs for project_ID and student_ID to modproject.php?action=joinPROJECT. They have already been called by the selection boxes. Just need to send them to insert statement via POST.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
brasco_2006Author Commented:
Sorry when I mean using code above, i mine the original post.
0
 
brasco_2006Author Commented:
Would the hidden inputs at the end of the form carry the values that were selected in the JS function

<form action="modproject.php?action=joinPROJECT" method="post">
<table width="72%" border="0">
  <tr bgcolor="#E6E6E6">
    <td bgcolor="#E2E2F2"><span class="style2 style1"><strong>Select Lecturer Role</strong></span><span class="style5"><br>
    </span></td>
    <td bgcolor="#F2F2FF"> <span class="style2">
      <input type="radio" name="role" value="Second Marker">
      Second Marker
       <input type="radio" name="role" value="Third Marker">
      Third Marker
       <input type="radio" name="role" value="Fourth Marker">
      Fourth Marker
       </span></td>
  </tr>
  <tr bgcolor="#E6E6E6">
    <td bgcolor="#E2E2F2"><span class="style2 style1"><strong>Select Project</strong></span></td>
    <td bgcolor="#F2F2FF">
<?php
     $optionsHTML = '';
     $optionsJS      = "var projectData = new Array();\n";

     $query = 'SELECT project_ID, project_name, student_ID FROM student_project';

     $result = mysql_query($query) or die("error in query:" . mysql_error());

     function jsSafe($str) {
     return addslashes(htmlspecialchars(preg_replace("/[\n\r]+/",'', $str)));
}

     while($row = mysql_fetch_assoc($result)) {
       $optionsHTML .= '<option value="'.$row['project_ID'].'">'.$row['project_ID'].'</option>';
       $optionsJS .= sprintf('projectData[%d] = new Array("%s","%s");'."\n",
                      $row['project_ID'],
                      jsSafe($row['student_ID']),
                      jsSafe($row['project_name']));
}

     echo '<script type="text/javascript">';
     echo $optionsJS;
     echo '</script>';  
     echo '<select onchange="v=eval(this.options[this.selectedIndex].value);this.form.text1.value=projectData[v][0];this.form.text2.value=projectData[v][1];">';
     echo $optionsHTML;
     echo '</select>';
     echo '<input type="text" name="text1" readonly="readonly" />';
     echo '<input type="text" name="text2" readonly="readonly" />';

?>
</td>
</table>
<input type="hidden" name="project_ID"
<input type="hidden" name="student_ID"
<input type="submit" name="submit" value="Join Project">
</form>
0
 
waygoodCommented:
<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.options[selected].value;

    oldpos=0;
    pos = thevalue.indexOf('&',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

      oldpos = pos;
    pos = thevalue.indexOf('&',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.text1.value = thedata;

      oldpos = pos;
    this_form.text2.value = thevalue.substring(oldpos+1,thevalue.length)
}
//--></script>
<form action="modproject.php?action=joinPROJECT" method="post">
      <input type="hidden" name="project_ID" value=""/>
      <table width="72%" border="0">
            <tr bgcolor="#E6E6E6">
                  <td bgcolor="#E2E2F2" class="style2 style1">
                        <strong>Select Lecturer Role</strong>
                  </td>
                  <td bgcolor="#F2F2FF" class="style2">
                        <input type="radio" name="role" value="Second Marker"> Second Marker<br/>
                        <input type="radio" name="role" value="Third Marker"> Third Marker<br/>
                        <input type="radio" name="role" value="Fourth Marker"> Fourth Marker
                  </td>
            </tr>
            <tr bgcolor="#E6E6E6">
                  <td bgcolor="#E2E2F2" class="style2 style1">
                        <strong>Select Project</strong>
                  </td>
                  <td bgcolor="#F2F2FF">
                        <select name="mySelect" onchange="updateForm(this.form);">
<?php
      $query = 'SELECT student_project.project_ID, student_project.project_name, student.student_name FROM student_project, student WHERE student_project.student_ID=student.student_ID';
      $result = mysql_query($query) or die("error in query:" . mysql_error());

      while($row = mysql_fetch_assoc($result))
      {
            echo '<option value="'.$row['project_ID'].'&'.$row['project_name'].'&'.$row['student_name'].'">'.$row['project_name'].'</option>';
      }
?>
                        </select>
                  </td>
            </tr>
            <tr bgcolor="#E6E6E6">
                  <td bgcolor="#E2E2F2" class="style2 style1">
                        <strong>Project Details</strong>
                  </td>
                  <td bgcolor="#F2F2FF" class="style2">
                        Project: <input type="text" name="text1" readonly="readonly" /><br/>
                        Student: <input type="text" name="text2" readonly="readonly" /><br/>
                  </td>
            </tr>
      </table>
      <br/>
      <input type="submit" name="submit" value="Join Project">
</form>
0
 
waygoodCommented:
You may need to adjust the SQL statement, as I've pulled the student name from it too.

Also on second thoughts replace the '&' in the javascript and <OPTION> to '#', because we should be htmlentities($row['project_name']) and student name. As it wouldnt work properly it someone uses html characters as they get changed to include a '&'

0
 
brasco_2006Author Commented:
Where are the <OPTION> and & in the script?
0
 
brasco_2006Author Commented:
Is this what you mean?

<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.#[selected].value;

    oldpos=0;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

     oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.text1.value = thedata;

     oldpos = pos;
    this_form.text2.value = thevalue.substring(oldpos+1,thevalue.length)
}
//--></script>
0
 
waygoodCommented:
yup

AND

          echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['project_name']).'</option>';
     }
0
 
waygoodCommented:
oops! sorry not the option in the javascript.

thevalue = this_form.mySelect.options[selected].value;

0
 
brasco_2006Author Commented:
Here is the latest code:

<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.#[selected].value;

    oldpos=0;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

     oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.text1.value = thedata;

     oldpos = pos;
    this_form.text2.value = thevalue = this_form.mySelect.options[selected].value;
}
//--></script>
<form action="modproject.php?action=joinPROJECT" method="post">
     <input type="hidden" name="project_ID" value=""/>
     <table width="72%" border="0">
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Select Lecturer Role</strong>
               </td>
               <td bgcolor="#F2F2FF" class="style2">
                    <input type="radio" name="role" value="Second Marker"> Second Marker<br/>
                    <input type="radio" name="role" value="Third Marker"> Third Marker<br/>
                    <input type="radio" name="role" value="Fourth Marker"> Fourth Marker
               </td>
          </tr>
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Select Project</strong>
               </td>
               <td bgcolor="#F2F2FF">
                    <select name="mySelect" onchange="updateForm(this.form);">
<?php
     $query = 'SELECT student_project.project_ID, student_project.project_name, student.student_name FROM student_project, student WHERE student_project.student_ID=student.student_ID';
     $result = mysql_query($query) or die("error in query:" . mysql_error());

     while($row = mysql_fetch_assoc($result))
     {
          echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['project_name']).'</option>';
     }
?>
                    </select>
               </td>
          </tr>
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Project Details</strong>
               </td>
               <td bgcolor="#F2F2FF" class="style2">
                    Project: <input type="text" name="text1" readonly="readonly" /><br/>
                    Student: <input type="text" name="text2" readonly="readonly" /><br/>
               </td>
          </tr>
     </table>
     <br/>
     <input type="submit" name="submit" value="Join Project">
</form>

0
 
waygoodCommented:
sorry bad english. I meant replace the '&' with '#' in the javascript and in the echo'ed html OPTIONS.
0
 
waygoodCommented:
You need to change the first # in the javascript back to

thevalue = this_form.mySelect.options[selected].value;

and the last line back to

   this_form.text2.value = thevalue.substring(oldpos+1,thevalue.length)
0
 
brasco_2006Author Commented:
Here is the latest code, hope all is correct:

<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.thevalue = this_form.mySelect.options[selected].value;
[selected].value;

    oldpos=0;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

     oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.text1.value = thedata;

     oldpos = pos;
   this_form.text2.value = thevalue.substring(oldpos+1,thevalue.length)
}
//--></script>
<form action="modproject.php?action=joinPROJECT" method="post">
     <input type="hidden" name="project_ID" value=""/>
     <table width="72%" border="0">
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Select Lecturer Role</strong>
               </td>
               <td bgcolor="#F2F2FF" class="style2">
                    <input type="radio" name="role" value="Second Marker"> Second Marker<br/>
                    <input type="radio" name="role" value="Third Marker"> Third Marker<br/>
                    <input type="radio" name="role" value="Fourth Marker"> Fourth Marker
               </td>
          </tr>
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Select Project</strong>
               </td>
               <td bgcolor="#F2F2FF">
                    <select name="mySelect" onchange="updateForm(this.form);">
<?php
     $query = 'SELECT student_project.project_ID, student_project.project_name, student.student_name FROM student_project, student WHERE student_project.student_ID=student.student_ID';
     $result = mysql_query($query) or die("error in query:" . mysql_error());

     while($row = mysql_fetch_assoc($result))
     {
          echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['project_name']).'</option>';
     }
?>
                    </select>
               </td>
          </tr>
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Project Details</strong>
               </td>
               <td bgcolor="#F2F2FF" class="style2">
                    Project: <input type="text" name="text1" readonly="readonly" /><br/>
                    Student: <input type="text" name="text2" readonly="readonly" /><br/>
               </td>
          </tr>
     </table>
     <br/>
     <input type="submit" name="submit" value="Join Project">
</form>

0
 
brasco_2006Author Commented:
All I am getting is the three radio buttons for lecturer role and Select Project comes up with an empty drop down box.
0
 
waygoodCommented:
did you check the sql as I suggected in order to retrieve the student name too?
0
 
brasco_2006Author Commented:
The sql looks fine...is the latest code post OK. The most important thing that I need to get is the student_ID and project_ID. The rest is more for informative purposes so that the user can see what project they are selecting.
0
 
brasco_2006Author Commented:
What do you think of this code, just put this together with some help from someone off Web Developer Forums. Getting an error on the last echo before the </table> tag:

<form action="modproject.php?action=joinPROJECT" method="post" onsubmit="this.form.project_ID.value=this.form.text1.value;this.form.student_ID.value=this.form.text2.value">  
<table width="72%" border="0">
  <tr bgcolor="#E6E6E6">
    <td bgcolor="#E2E2F2"><span class="style2 style1"><strong>Select Lecturer Role</strong></span><span class="style5"><br>
    </span></td>
    <td bgcolor="#F2F2FF"> <span class="style2">
      <input type="radio" name="role" value="Second Marker">
      Second Marker
       <input type="radio" name="role" value="Third Marker">
      Third Marker
       <input type="radio" name="role" value="Fourth Marker">
      Fourth Marker
       </span></td>
  </tr>
  <tr bgcolor="#E6E6E6">
    <td bgcolor="#E2E2F2"><span class="style2 style1"><strong>Select Project</strong></span></td>
    <td bgcolor="#F2F2FF">
<?php
     $optionsHTML = '';
     $optionsJS      = "var projectData = new Array();\n";

     $query = 'SELECT project_ID, project_name, student_ID FROM student_project';

     $result = mysql_query($query) or die("error in query:" . mysql_error());

     function jsSafe($str) {
     return addslashes(htmlspecialchars(preg_replace("/[\n\r]+/",'', $str)));
}

     while($row = mysql_fetch_assoc($result)) {
       $optionsHTML .= '<option value="'.$row['project_ID'].'">'.$row['project_ID'].'</option>';
       $optionsJS .= sprintf('projectData[%d] = new Array("%s","%s");'."\n",
                      $row['project_ID'],
                      jsSafe($row['student_ID']),
                      jsSafe($row['project_name']));
}

     echo '<script type="text/javascript">';
     echo $optionsJS;
     echo '</script>';    
     echo '<select onchange="v=this.value;this.form.text1.value=projectData[v][0];this.form.text2.value=projectData[v][1];">';
     echo $optionsHTML;
     echo '</select>';
     echo '<input type="text" name="text1" readonly="readonly" />';
     echo '<input type="text" name="text2" readonly="readonly" />';
     echo '<input type="hidden" name="project_ID" />";
     echo '<input type="hidden" name="student_ID" />";
?>
</td>
</table>
<br>
<input type="submit" name="submit" value="Join Project">
</form>
0
 
brasco_2006Author Commented:
Sorted the echo problem. Will see if I can get an successful insert from this code quickly.
0
 
waygoodCommented:
The code I gave you did all you require. At the top of the form, there is a hidden field which is filled will the project_ID, so slightly adjusting the code will give both.
The only thing you'd really need in addition is to run the javascript once when the page loads, so if then didn't change the value in the drop down it would still work.

//changed to reflect extra value "Student_ID"
<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.#[selected].value;

    oldpos=0;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

     oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.text1.value = thedata;

     oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.student_ID.value = thedata;

     oldpos = pos;
    this_form.text2.value = thevalue = this_form.mySelect.options[selected].value;
}
//--></script>
<form name="project" action="modproject.php?action=joinPROJECT" method="post" >
     <input type="hidden" name="project_ID" value=""/>
     <input type="hidden" name="student_ID" value=""/>
     <table width="72%" border="0">
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Select Lecturer Role</strong>
               </td>
               <td bgcolor="#F2F2FF" class="style2">
                    <input type="radio" name="role" value="Second Marker"> Second Marker<br/>
                    <input type="radio" name="role" value="Third Marker"> Third Marker<br/>
                    <input type="radio" name="role" value="Fourth Marker"> Fourth Marker
               </td>
          </tr>
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Select Project</strong>
               </td>
               <td bgcolor="#F2F2FF">
                    <select name="mySelect" onchange="updateForm(this.form);">
<?php
     $query = 'SELECT student_project.project_ID, student_project.project_name, student_project.student_ID, student.student_name FROM student_project, student WHERE student_project.student_ID=student.student_ID';
     $result = mysql_query($query) or die("error in query:" . mysql_error());

     while($row = mysql_fetch_assoc($result))
     {
// chnaged with extra value
          echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_ID']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['project_name']).'</option>';
     }
?>
                    </select>
               </td>
          </tr>
          <tr bgcolor="#E6E6E6">
               <td bgcolor="#E2E2F2" class="style2 style1">
                    <strong>Project Details</strong>
               </td>
               <td bgcolor="#F2F2FF" class="style2">
                    Project: <input type="text" name="text1" readonly="readonly" /><br/>
                    Student: <input type="text" name="text2" readonly="readonly" /><br/>
               </td>
          </tr>
     </table>
     <br/>
     <input type="submit" name="submit" value="Join Project">
</form>
// changed to run script when loaded
<script language="JavaScript"><!--
updateForm(document.project);
//--></script>
0
 
waygoodCommented:
remove the comments and this will work as you required it.

The javascript will look at the value of the selected OPTION, split it into its parts (project id, project name, student id and student name, and set the values in the form to their correct values. to test it change the fields from hidden to text.

By putting the javascript at the end of the form, all the values exist on the page and the script will run ok.

You shouldnt really need Student ID, as you can find it out from the Project ID, but its easier to include it. :)
0
 
waygoodCommented:
I've done some testing and oldpos=0 needs to be changed to -1

I've put the code online to test at www.waygood.co.uk/brasco_2006.php and the code is www.waygood.co.uk/brasco_2006.phps

The example running code however just has sample options, no databse connection.

Also I have changed the form to post to itself and print the values at the bottom.
0
 
brasco_2006Author Commented:
Thanks for all your help waygood. My internet has been down for most of today. SO haven't had the chance to what has been posted since yesterday evening.
0
 
brasco_2006Author Commented:
I have been talking with my supervisor, the person I am building this application for. They made it clear regarding this javascript that the following had to be done:

Projects have to be selected by student_ID, student_name and project_name.

The use of project_ID is to ambigious to choose projects.

Can I just alter the options to make this change, or is there a little more involved. Thanks for the help and for posting the code on your website.
0
 
brasco_2006Author Commented:
Just to make that a little clearer. I need the selection box to show the student_ID, followed by student_name and project_name in the following text boxes.

0
 
waygoodCommented:
I've got project name as the visible option choice with the value containing Project_ID, Project_Name, Student_ID and Student Name.

To Include all you could change

          echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_ID']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['project_name']).'</option>';

TO

          echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_ID']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['project_ID'])."|".htmlentities($row['project_name'])."|".htmlentities($row['student_name']).'</option>';


so a choice would be
1|Proj1|Stud5
2|Proj2|Stud6
etc..

as long as you dont touch the "value" of the option you can put what you like between the option tags
<option value="not touch">anything you want here!</option>
0
 
brasco_2006Author Commented:
echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_ID']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['student_ID'])."|".htmlentities($row['student_name'])."|".htmlentities($row['project_name']).'</option>';

This would be the prefered layout for the selection box and 2 text boxes. Selection by student_ID and student_name is more feasible as the lecturers have to access to all the student IDs. The inclusion of project_name is more an informative choice so lecturers can see what project is being worked on by the student.

Will work on this later today.
0
 
brasco_2006Author Commented:
Here is the code that I am using:

<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.options[selected].value;

    oldpos=-1;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

    oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.text1.value = thedata;

    oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.student_ID.value = thedata;

    oldpos = pos;
    this_form.text2.value = thevalue.substring(oldpos+1,thevalue.length)
}
//--></script>
<form action="brasco_2006.php" name="project" method="post">
    <input type="hidden" name="project_ID" value=""/>
    <input type="hidden" name="student_ID" value=""/>
    <table width="79%" border="0">
        <tr bgcolor="#E6E6E6">
            <td bgcolor="#E2E2F2" class="style2 style1">
                <strong>Select Lecturer Role</strong>
            </td>
            <td bgcolor="#F2F2FF" class="style2">
                <input type="radio" name="role" value="Second Marker"> Second Marker<br/>
                <input type="radio" name="role" value="Third Marker"> Third Marker<br/>
                <input type="radio" name="role" value="Fourth Marker"> Fourth Marker
            </td>
        </tr>
        <tr bgcolor="#E6E6E6">
            <td bgcolor="#E2E2F2" class="style2 style1">
                <strong>Select Student Project</strong>
            </td>
            <td bgcolor="#F2F2FF">
                <select name="mySelect" onchange="updateForm(this.form);">
<?php  
    $query = 'SELECT student_project.project_ID, student_project.project_name, student_project.student_ID, student.student_name FROM student_project,
      student WHERE student_project.student_ID=student.student_ID';
    $result = mysql_query($query) or die("error in query:" . mysql_error());

    while($row = mysql_fetch_assoc($result))
    {
        echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_ID']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['student_ID'])." | ".htmlentities($row['student_name'])." | ".htmlentities($row['project_name']).'</option>';
    }
?>
                </select>
            </td>
        </tr>
    </table>
    <br/>
    <input type="submit" name="submit" value="Join Project">  
</form>
<script language="JavaScript"><!--
updateForm(document.project);
//--></script>

<?php
print_r($_POST);
?>

Just have 2 questions:

1. What is the purpose of the <?php print_r($_POST); ?> at the end. All it does is display array()?
2. What is beind outputted from this form? I need student_ID and project_ID to go to a SQL insert in modproject.php. I don't see the usual <input type="hidden" ...etc>.
0
 
brasco_2006Author Commented:
Could I use:

<input type="hidden" name="project_ID" value="<?php echo $row['project_ID']; ?>"
<input type="hidden" name="student_ID" value="<?php echo $row['student_ID']; ?>"

for the outputs to the mysql insert in modproject.php?
0
 
waygoodCommented:
the point of the print_r($_POST) was to show you what the form sends to the next page. In the example I had the script post to itself.

You originally posted the form to "modproject.php?action=joinPROJECT", just go there and use the posted values for your sql insert statement.

p.s. the hidden fields are under the start of the form. As they dont require and html wrappings so I put them there to make then easier to find and read.


pps
This maybe something to consider later. I prefer this method of programming:-
1. a script that contains the form
2. a script that just processes the form, with no output, and a header("location: ..");exit(); at the end to take it to the next page (or back again).

This method allows the user to use the back and forward button without that stupid "do you wish to resubmit the form" messages.
0
 
waygoodCommented:
they shouldnt contain values, as they are set when the user selects an option from the drop down selection box. I used the print_r($_POST) so you could see what values are set and posted.
0
 
brasco_2006Author Commented:
Sorry, just seen the inputs for student_ID and project_ID. I usually place them at the end of the form.
0
 
brasco_2006Author Commented:
Doesn't seem to be entering the required data into the db. Here is modassess.php. The 2 inputs from the JS form are set to $student_ID and $project_ID. The case sql insert statement for the JS form is joinPROJECT:

<?php
session_start();
include "conn.inc.php";
      
if (isset($_POST['project_ID'])) {
        $project_ID = $_POST['project_ID'];
}
if (isset($_POST['student_ID'])) {
        $student_ID = $_POST['student_ID'];
}
if (isset($_POST['role'])) {
        $role = $_POST['role'];
}
if (isset($_SESSION['user_logged'])) {
        $lecturer_ID = $_SESSION['user_logged'];
}
if (isset($_POST['students'])) {
       $students = $_POST['students'];
}
if (isset($_POST['project_name'])) {
       $project_name = $_POST['project_name'];
}
if (isset($_POST['project_desc'])) {
       $project_desc = $_POST['project_desc'];
}

$action = $_REQUEST['action'];
$projectid = $_REQUEST['projectid'];

switch ($action) {
        case "addPROJECT":
                                              mysql_query("INSERT INTO student_project
                                              (project_ID, student_ID, project_name, project_desc)
                                              VALUES('$projectid', '$students', '$project_name', '$project_desc') ");
             
                                                  $projectid = mysql_insert_id();
         
                                              mysql_query("INSERT INTO project_assess
                                              (project_assess_ID, project_ID, lecturer_ID, lecturer_role, student_ID)
                                              VALUES('$assessid', '$projectid', '$lecturer_ID', '$role', '$students') ");
      $redirect =             "index.php";
    break;
      
      case "editPROJECT":
      $query =                        "UPDATE project_assess, student_project
                                                SET project_assess.lecturer_role='$role', student_project.project_name='$project_name',
                                                student_project.project_desc='$project_desc'
                                                WHERE student_project.project_ID='$project_ID'
                                                AND project_assess.project_ID='$project_ID' ";
      $result=                        mysql_query($query);
      $redirect =             "index.php";
      
      case "joinPROJECT":
      $query =                        "INSERT INTO project_assess
                                                (project_assess_ID, project_ID, lecturer_ID, lecturer_role, student_ID)
                                                VALUES('$assessid', '$project_ID', '$lecturer_ID', '$role', '$student_ID')";
      $redirect =             "index.php";
    break;
      }

header("Location: $redirect");
exit();
?>
      
0
 
waygoodCommented:
theres no mysql_query($query) on the last case statement. Which happens to be the joinPROJECT one. :)

do an echo $query to show what me values are.
0
 
brasco_2006Author Commented:
How bad am I. No wonder, thanks waygood. :) LOL
0
 
brasco_2006Author Commented:
Here is an echo of $query for joinPROJECT:

INSERT INTO project_assess (project_assess_ID, project_ID, lecturer_ID, lecturer_role, student_ID) VALUES('', '8', 'ku17745', 'Second Marker', '')

Everything seems OK, except for the student_ID which didn't get a value.
0
 
waygoodCommented:
can you do a print_r($_POST) too, so we can see what is being posted.
Cheers
0
 
brasco_2006Author Commented:
I did echo print_r($_POST) just after the javascript, and all I get on screen is:

Array ()
0
 
waygoodCommented:
Thats cos you haved posted anything yet. put it in your processing script.

<?php
session_start();
include "conn.inc.php";

     print_r($_POST);  /////////////// here

if (isset($_POST['project_ID'])) {
       $project_ID = $_POST['project_ID'];
}
0
 
brasco_2006Author Commented:
Here is the print_r($_POST):

Array ( [project_ID] => 4 [student_ID] => [role] => Second Marker [mySelect] => 4#Online Bank Application#k0108780#Tom Clark [submit] => Join Project ) INSERT INTO project_assess (project_assess_ID, project_ID, lecturer_ID, lecturer_role, student_ID) VALUES('', '4', 'ku17745', 'Second Marker', '')
0
 
waygoodCommented:
can you put the form page here again, so I can test it here to see whe the student ID isnt being set and posted. I wont go by what was posted before as it may differ.
Cheers
0
 
brasco_2006Author Commented:
Here is the joinPROJECT form plus JS:

<form name="JOINPROJECT" action="modproject.php?action=joinPROJECT" method="post">
    <input type="hidden" name="project_ID" value=""/>
    <input type="hidden" name="student_ID" value=""/>
    <table width="79%" border="0">
        <tr bgcolor="#E6E6E6">
            <td width="27%" bgcolor="#E2E2F2" class="style2 style1">
                <strong>Select Lecturer Role</strong>
            </td>
            <td width="73%" bgcolor="#F2F2FF" class="style2">
                <input type="radio" name="role" value="Second Marker"> Second Marker<br/>
                <input type="radio" name="role" value="Third Marker"> Third Marker<br/>
                <input type="radio" name="role" value="Fourth Marker"> Fourth Marker
            </td>
        </tr>
        <tr bgcolor="#E6E6E6">
            <td bgcolor="#E2E2F2" class="style2 style1">
                <strong>Select Student Project</strong>
            </td>
            <td bgcolor="#F2F2FF">
                <select name="mySelect" onchange="updateForm(this.form);">
<?php  
    $query = 'SELECT student_project.project_ID, student_project.project_name, student_project.student_ID, student.student_name FROM student_project,
      student WHERE student_project.student_ID=student.student_ID';
    $result = mysql_query($query) or die("error in query:" . mysql_error());

    while($row = mysql_fetch_assoc($result))
    {
        echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_ID']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['student_ID'])." | ".htmlentities($row['student_name'])." | ".htmlentities($row['project_name']).'</option>';
    }
?>
                </select>
            </td>
        </tr>
    </table>
    <br/>
    <input type="submit" name="submit" value="Join Project">  
</form>
<script language="JavaScript"><!--
updateForm(document.JOINPROJECT);
//--></script>
0
 
brasco_2006Author Commented:
Array ( [project_ID] => 4 [student_ID] => [role] => Second Marker [mySelect] => 4#Online Bank Application#k0108780#Tom Clark [submit] => Join Project ) INSERT INTO project_assess (project_assess_ID, project_ID, lecturer_ID, lecturer_role, student_ID) VALUES('', '4', 'ku17745', 'Second Marker', '')

Just a question on POSTED array. Why is the student_ID being carried in the array (e.g. 4#Online Bank Application#k0108780#Tom Clark), but doesn't get placed in the database? It all seems a bit strange that it isn't recognised when it gets processed in modproject.php.

Could we give a value to:

<input type="hidden" name="student_ID" value=""/>
0
 
brasco_2006Author Commented:
Can anyone help out, as to why the student_ID is not being posted from the hidden input  to modproject.php?
0
 
waygoodCommented:
sorry I was waiting for the javascript. Can you post it so I cant test it all together.
0
 
brasco_2006Author Commented:
Sorry waygood. Thought you had gone on holiday or something. Here is the code that contains the JS. Plus the file where the queries are located:

joinproject.php

<h2>Join an existing Project</h2>
<p class="style3">NOTE: The following information is required to join a student project. The roles of Second Marker, Third Marker and Fourth Marker are avaliable.</p>
<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.options[selected].value;

    oldpos=-1;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

    oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.text1.value = thedata;

    oldpos = pos;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.student_ID.value = thedata;

    oldpos = pos;
    this_form.text2.value = thevalue.substring(oldpos+1,thevalue.length)
}
//--></script>
<form name="JOINPROJECT" action="modproject.php?action=joinPROJECT" method="post">
    <input type="hidden" name="project_ID" value=""/>
    <input type="hidden" name="student_ID" value=""/>
    <table width="79%" border="0">
        <tr bgcolor="#E6E6E6">
            <td width="27%" bgcolor="#E2E2F2" class="style2 style1">
                <strong>Select Lecturer Role</strong>
            </td>
            <td width="73%" bgcolor="#F2F2FF" class="style2">
                <input type="radio" name="role" value="Second Marker"> Second Marker<br/>
                <input type="radio" name="role" value="Third Marker"> Third Marker<br/>
                <input type="radio" name="role" value="Fourth Marker"> Fourth Marker
            </td>
        </tr>
        <tr bgcolor="#E6E6E6">
            <td bgcolor="#E2E2F2" class="style2 style1">
                <strong>Select Student Project</strong>
            </td>
            <td bgcolor="#F2F2FF">
                <select name="mySelect" onchange="updateForm(this.form);">
<?php  
    $query = 'SELECT student_project.project_ID, student_project.project_name, student_project.student_ID, student.student_name FROM student_project,
      student WHERE student_project.student_ID=student.student_ID';
    $result = mysql_query($query) or die("error in query:" . mysql_error());

    while($row = mysql_fetch_assoc($result))
    {
        echo '<option value="'.$row['project_ID'].'#'.htmlentities($row['project_name']).'#'.htmlentities($row['student_ID']).'#'.htmlentities($row['student_name']).'">'.htmlentities($row['student_ID'])." | ".htmlentities($row['student_name'])." | ".htmlentities($row['project_name']).'</option>';
    }
?>
                </select>
            </td>
        </tr>
    </table>
    <br/>
    <input type="submit" name="submit" value="Join Project">  
</form>
<script language="JavaScript"><!--
updateForm(document.JOINPROJECT);
//--></script>

modproject.php

<?php
session_start();
include "conn.inc.php";

print_r($_POST);  
      
if (isset($_POST['project_ID'])) {
        $project_ID = $_POST['project_ID'];
}
if (isset($_POST['student_ID'])) {
        $student_ID = $_POST['student_ID'];
}
if (isset($_POST['role'])) {
        $role = $_POST['role'];
}
if (isset($_SESSION['user_logged'])) {
        $lecturer_ID = $_SESSION['user_logged'];
}
if (isset($_POST['students'])) {
       $students = $_POST['students'];
}
if (isset($_POST['project_name'])) {
       $project_name = $_POST['project_name'];
}
if (isset($_POST['project_desc'])) {
       $project_desc = $_POST['project_desc'];
}

$action = $_REQUEST['action'];
$projectid = $_REQUEST['projectid'];

switch ($action) {
        case "addPROJECT":
                                              mysql_query("INSERT INTO student_project
                                              (project_ID, student_ID, project_name, project_desc)
                                              VALUES('$projectid', '$students', '$project_name', '$project_desc') ");
             
                                                  $projectid = mysql_insert_id();
         
                                              mysql_query("INSERT INTO project_assess
                                              (project_assess_ID, project_ID, lecturer_ID, lecturer_role, student_ID)
                                              VALUES('$assessid', '$projectid', '$lecturer_ID', '$role', '$students') ");
      $redirect =             "index.php";
    break;
      
      case "editPROJECT":
      $query =                        "UPDATE project_assess, student_project
                                                SET project_assess.lecturer_role='$role', student_project.project_name='$project_name',
                                                student_project.project_desc='$project_desc'
                                                WHERE student_project.project_ID='$project_ID'
                                                AND project_assess.project_ID='$project_ID' ";
      $result=                        mysql_query($query);
      $redirect =             "index.php";
      
      case "joinPROJECT":
      $query =                        "INSERT INTO project_assess
                                                (project_assess_ID, project_ID, lecturer_ID, lecturer_role, student_ID)
                                                VALUES('$assessid', '$project_ID', '$lecturer_ID', '$role', '$student_ID')";
      $result =                  mysql_query($query);  echo $query;
      $redirect =             "index.php";
    break;
      }

/* header("Location: $redirect"); */
exit();
?>
      
0
 
brasco_2006Author Commented:
Thanks waygood for your help, will upload the code and give it a try later today.
0
 
brasco_2006Author Commented:
Thanks for the help waygood. The student_ID is being passed now. Could you explain this bit of code to me:

<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.options[selected].value;

    oldpos=-1;
    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;

    oldpos = pos;
    this_form.student_ID.value = thevalue.substring(oldpos+1,thevalue.length)
}
//--></script>
0
 
waygoodCommented:
Sure.

this_form  is a variable that contains a reference to the form you created. from within the form elements it can be referenced with "this.form", outside of the form elements, you can use "document.JOINPROJECT"

anyway

this_form.mySelect is the <select name="mySelect" >  input element

this_form.mySelect.selectedIndex   is the index value of the option currently selected

ie if the first option was selected by the user
<option value="proj1#std1">stud1|sample student|sample project</option>
<option value="proj2#std2">stud2|sample student2|sample project2</option>
the value of "this_form.mySelect.selectedIndex" would be 0

this_form.mySelect.options[selected].value  is the 'value' of the option currently selected
ie proj1#std1

as this_form.mySelect.options is an array of all the options

SO, now we have the value of the selected option (proj1#std1) we need to cut it into the 2 parts (seperated by a #)

oldpos starts out as -1 as we are going to add one to it. You'll see why in a bit.
pos becomes the position of the next #, starting from 0 (oldpos+1, AFTER oldpos)
so to get the value we get the substring starting from 0 (oldpos+1) upto that #

we then set the value of one of the form elements to that value
this_form.projectID.value= ....
as projectID is hidden, the user doesnt see the change.

oldpos now becomes the position of that first #
since in this example there are only 2 values, we just need the rest of the string for the projectID.


in the old example, we could repeat that snippet of code over and over depending on how many elements we need to extract.

    pos = thevalue.indexOf('#',oldpos+1);
    thedata = thevalue.substring(oldpos+1,pos);
    this_form.project_ID.value = thedata;        // change this to the form element to set
    oldpos = pos;
 

we could of done it like this, but its easier to chop and change things around doing it the previous way.

<script language="JavaScript"><!--
function updateForm(this_form) {
    selected = this_form.mySelect.selectedIndex;
    thevalue = this_form.mySelect.options[selected].value;

    pos = thevalue.indexOf('#',0);
    thedata = thevalue.substring(0,pos);
    this_form.project_ID.value = thedata;
    oldpos = pos;

    this_form.student_ID.value = thevalue.substring(oldpos+1,thevalue.length)
}
//--></script>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.