Javascript Function POSTING problem

Hi all,
I have a javascript function that allows users to add subjects to a profile and these subject_id are stored in the text-box "activityId". When I view the results of the javascript after subjects are added and removed everything looks find (e.g. something like (15,13,12). However when I pass the result to another page through the post array I get this result (15,13,12 />  </p>  <p>    <label for=). I can't see how this is passed in my script? Can someone have a look and see if they can see where its going wrong? Thanks so much,
D

<script language="javascript" type="text/javascript">
var activities = new Array() //Make sure this is outside of any functions!!
function addActivity(select){
var div;
var addIt = true;
if(select!=undefined){
value = select.value.split(':');

for(var x in activities){
     if(activities[x][0]==value[0]){
          addIt = false;
          }
     }
if(addIt==true){
     activities.splice(activities.length,0,new Array());
     activities[activities.length - 1][0] = value[0];
     activities[activities.length - 1][1] = value[1];
     }
}
document.form1.activityId.value = ''
document.getElementById('Chosen').innerHTML = ''

for(var x in activities){
div = '<div id="' + activities[x][0] + '" ondblclick="removeActivity(this.id)">' + activities[x][1] + '</div>';
   if(x>0){
      document.form1.activityId.value = document.form1.activityId.value + ',' + activities[x][0];
      document.getElementById('Chosen').innerHTML = document.getElementById('Chosen').innerHTML + div;
      }
   else{
      document.form1.activityId.value = activities[x][0];
      document.getElementById('Chosen').innerHTML = div;
      }
   }

}
function removeActivity(id){
for(var x in activities){
    if(activities[x][0]==id){
       activities.splice(x,1);
       }
    }
addActivity();
}
function clearAll(){
activities.splice(0,activities.length);
document.getElementById('Chosen').innerHTML = '';
document.form1.activityId.value = '';
}

</script>
dereksheahanAsked:
Who is Participating?
 
Pravin AsarConnect With a Mentor Principal Systems EngineerCommented:
Well, I tried with following php code as reg4.php.


<?php
$act = $_POST['activityId'];
echo "Post activityId : $act";
?>

What version of php you are using?

0
 
gops1Commented:
Put your HTML code
0
 
dereksheahanAuthor Commented:
K, here it is:
It looks fairly complicated because I have a rather large javascript function in the middle that I'm using to create the dynamic drop-downs on the page. :)
Thanks,
D

<?php require_once('../Connections/Database_test.php'); ?>
<?php
mysql_select_db($database_Database_test, $Database_test);
$query_rsSubjects = "SELECT main_cat_table.mc_cat_id, main_cat_table.mc_cat_type, sub_cat_table.sc_sub_cat_id, sub_cat_table.sc_sub_cat_name, sub_cat_table.sc_cat_id, subject_table.s_subject_id, subject_table.s_subject_name, subject_table.s_sub_cat_id  FROM main_cat_table, sub_cat_table, subject_table WHERE subject_table.s_sub_cat_id = sub_cat_table.sc_sub_cat_id AND sub_cat_table.sc_cat_id = main_cat_table.mc_cat_id";
$rsSubjects = mysql_query($query_rsSubjects, $Database_test) or die(mysql_error());
$row_rsSubjects = mysql_fetch_assoc($rsSubjects);
$totalRows_rsSubjects = mysql_num_rows($rsSubjects);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
      position:absolute;
      left:53px;
      top:77px;
      width:483px;
      height:217px;
      z-index:1;
}
#Layer2 {
      position:absolute;
      left:386px;
      top:116px;
      width:348px;
      height:218px;
      z-index:2;
}
#Chosen {
      position:absolute;
      left:566px;
      top:116px;
      width:188px;
      height:154px;
      z-index:2;
      background-color: #66FF33;
}
#Layer3 {
      position:absolute;
      left:563px;
      top:89px;
      width:192px;
      height:24px;
      z-index:3;
}
#Layer4 {
      position:absolute;
      width:70px;
      height:29px;
      z-index:4;
      left: 557px;
      top: 293px;
}
-->
</style>

<script language="javascript" type="text/javascript">
var activities = new Array() //Make sure this is outside of any functions!!
function addActivity(select){
var div;
var addIt = true;
if(select!=undefined){
value = select.value.split(':');

for(var x in activities){
     if(activities[x][0]==value[0]){
          addIt = false;
          }
     }
if(addIt==true){
     activities.splice(activities.length,0,new Array());
     activities[activities.length - 1][0] = value[0];
     activities[activities.length - 1][1] = value[1];
     }
}
document.form1.activityId.value = ''
document.getElementById('Chosen').innerHTML = ''

for(var x in activities){
div = '<div id="' + activities[x][0] + '" ondblclick="removeActivity(this.id)">' + activities[x][1] + '</div>';
   if(x>0){
      document.form1.activityId.value = document.form1.activityId.value + ',' + activities[x][0];
      document.getElementById('Chosen').innerHTML = document.getElementById('Chosen').innerHTML + div;
      }
   else{
      document.form1.activityId.value = activities[x][0];
      document.getElementById('Chosen').innerHTML = div;
      }
   }

}
function removeActivity(id){
for(var x in activities){
    if(activities[x][0]==id){
       activities.splice(x,1);
       }
    }
addActivity();
}
function clearAll(){
activities.splice(0,activities.length);
document.getElementById('Chosen').innerHTML = '';
document.form1.activityId.value = '';
}

</script>
</head>

<body>
<div id="Layer1">
  <form id="form1" name="form1" method="post" action="reg4.php">
    <p>
      <select name="Main Cat" id="Main Cat" onchange="TCN_reload(this)">
        <option selected="selected">Main Cat</option>
      </select>
      <select name="Sub Cat" id="Sub Cat" onchange="TCN_reload(this)">
        <option selected="selected">Sub Cat</option>
      </select>
    </p>
    <p>    
      <select name="Subjects" size="5" multiple="multiple" id="Subjects" onchange="TCN_reload(this)" ondblclick="addActivity(this)">
        <option selected="selected">Subjects</option>
      </select>
      <script language="JavaScript" type="text/javascript">
TCN_contents=new Array();
TCN_tempArray=new Array();
TCN_counter=0;
function TCN_addContent(str){
      TCN_contents[TCN_counter]=str;
      TCN_counter++;
}
function TCN_split(){
      TCN_arrayValues = new Array();
      for(i=0;i<TCN_contents.length;i++){
            TCN_arrayValues[i]=TCN_contents[i].split(separator);
            TCN_tempArray[0]=TCN_arrayValues;
      }
}
function TCN_makeSelValueGroup(){
      TCN_selValueGroup=new Array();
      var args=TCN_makeSelValueGroup.arguments;
      for(i=0;i<args.length;i++){
            TCN_selValueGroup[i]=args[i];
            TCN_tempArray[i]=new Array();
      }
}
function TCN_makeComboGroup(){
      TCN_comboGroup=new Array();
      var args=TCN_makeComboGroup.arguments;
      for(i=0;i<args.length;i++) TCN_comboGroup[i]=findObj(args[i]);
}
function TCN_setDefault(){
      for (i=TCN_selValueGroup.length-1;i>=0;i--){
            if(TCN_selValueGroup[i]!=""){
                  for(j=0;j<TCN_contents.length;j++){
                        if(TCN_arrayValues[j][(i*2)+1]==TCN_selValueGroup[i]){
                              for(k=i;k>=0;k--){
                                    if(TCN_selValueGroup[k]=="") TCN_selValueGroup[k]=TCN_arrayValues[j][(k*2)+1];
                              }
                        }
                  }
            }
      }
}
function TCN_loadMenu(daIndex){
      var selectionMade=false;
      daArray=TCN_tempArray[daIndex];
      TCN_comboGroup[daIndex].options.length=0;
      for(i=0;i<daArray.length;i++){
            existe=false;
            for(j=0;j<TCN_comboGroup[daIndex].options.length;j++){
                  if(daArray[i][(daIndex*2)+1]==TCN_comboGroup[daIndex].options[j].value) existe=true;
            }
            if(existe==false){
                  lastValue=TCN_comboGroup[daIndex].options.length;
                  TCN_comboGroup[daIndex].options[TCN_comboGroup[daIndex].options.length]=new Option(daArray[i][daIndex*2],daArray[i][(daIndex*2)+1]);
                  if(TCN_selValueGroup[daIndex]==TCN_comboGroup[daIndex].options[lastValue].value){
                        TCN_comboGroup[daIndex].options[lastValue].selected=true;
                        selectionMade=true;
                  }
            }
      }
      if(selectionMade==false) TCN_comboGroup[daIndex].options[0].selected=true;
}      
function TCN_reload(from){
      if(!from){
            TCN_split();
            TCN_setDefault();
            TCN_loadMenu(0);
            TCN_reload(TCN_comboGroup[0]);
      }else{
            for(j=0; j<TCN_comboGroup.length; j++){
                  if(TCN_comboGroup[j]==from) index=j+1;
            }
            if(index<TCN_comboGroup.length){
                  TCN_tempArray[index].length=0;
                  for(i=0;i<TCN_comboGroup[index-1].options.length;i++){
                        if(TCN_comboGroup[index-1].options[i].selected==true){
                              for(j=0;j<TCN_tempArray[index-1].length;j++){
                                    if(TCN_comboGroup[index-1].options[i].value==TCN_tempArray[index-1][j][(index*2)-1]) TCN_tempArray[index][TCN_tempArray[index].length]=TCN_tempArray[index-1][j];
                              }
                        }
                  }
            TCN_loadMenu(index);
            TCN_reload(TCN_comboGroup[index]);
            }
      }
}
function findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
TCN_makeSelValueGroup("","","");
TCN_makeComboGroup("Main Cat","Sub Cat","Subjects");
 var separator="+#+";
<?php do{?>
TCN_addContent("<?php echo $row_rsSubjects['mc_cat_type']; ?>+#+<?php echo $row_rsSubjects['mc_cat_id']; ?>+#+<?php echo $row_rsSubjects['sc_sub_cat_name']; ?>+#+<?php echo $row_rsSubjects['sc_sub_cat_id']; ?>+#+<?php echo $row_rsSubjects['s_subject_name']; ?>+#+<?php echo $row_rsSubjects['s_subject_id'].":"; ?><?php echo $row_rsSubjects['s_subject_name']; ?>");
<?php } while ($row_rsSubjects = mysql_fetch_assoc($rsSubjects)); ?>
TCN_reload();

      </script>
   
        <input type="button" id="removeButton" style="display: none" value="Remove!" onclick="removeActivity()">
  </p>
    <p>
      <input type="text" name="activityId"  id="activityId" value="">
    </p>
    <p>
      <label for="Submit">Proceed</label>
      <input type="submit" name="Submit" value="Submit" id="Submit" />
</p>
  </form>
</div>
<div id="Chosen">
  <p>&nbsp;  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="Layer3">Your Chosen Subjects: </div>


<div id="Layer4">
<input name="button" type="button" onclick="clearAll()" value="Clear All!" /></div>
</body>
</html>
<?php
mysql_free_result($rsSubjects);
?>
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
Pravin AsarPrincipal Systems EngineerCommented:
I think it is more of  XHTML validation problem

Look at you code :

<input type="button" id="removeButton" style="display: none" value="Remove!" onclick="removeActivity()">
  </p>
    <p>
      <input type="text" name="activityId"  id="activityId" value="">
    </p>
    <p>
      <label for="Submit">Proceed</label>
      <input type="submit" name="Submit" value="Submit" id="Submit" />


Please change to  and try :

<input type="button" id="removeButton" style="display: none" value="Remove!" onclick="removeActivity()"/>
  </p>
    <p>
      <input type="text" name="activityId"  id="activityId" value=""/>
    </p>
    <p>
      <label for="Submit">Proceed</label>
      <input type="submit" name="Submit" value="Submit" id="Submit" />
    </p>

0
 
dereksheahanAuthor Commented:
Hi,
No, unfortunately its still prints out the same on the other page. I presume its got nothing to do with how I'm POSTing it and collecting it on the other page.
Recieving page:
<input type="text" name="test" id="label" value="<?php echo ($_POST['activityId']);?> />
Thanks,
D
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Run your page through validators

http://validator.w3.org/
0
 
dereksheahanAuthor Commented:
Hi pravinasar,
I'll need to update the DB to server also as page is running from localhost at the moment. I'll do it over the next few hours and let you know the outcome.
Cheers,
D
0
 
dereksheahanAuthor Commented:
Hi pravinasar,
I've put the page on the server and it generates a whole bunch of errors (93!). Here is the test page if you'd be kind enough to have a look at the errors it generates. http://www.reachateacher.ie/Registration/reg3live.php
Thanks so much,
D
0
 
Pravin AsarPrincipal Systems EngineerCommented:
To isolate the issue and problem, can you please try this one
I have removed all of javascript interaction code.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
      <head>
            <title>Enter the title of your XHTML document here</title>
      </head>
      <body>
  <form  name="form1"  id="form1" method="post" action="reg4.php">
    <p>
      <select name="MainCat" id="MainCat">
        <option selected="selected">Main Cat</option>
      </select>
      <select name="SubCat" id="SubCat">
        <option selected="selected">Sub Cat</option>
      </select>
    </p>
    <p>    
      <select name="Subjects" size="5" multiple="multiple" id="Subjects">
        <option selected="selected">Subjects</option>
      </select>
        <input type="button" id="removeButton" style="display: none" value="Remove!"/>
  </p>
    <p>
      <input type="text" name="activityId"  id="activityId" value="(12,45,20)"/>
    </p>
    <p>
      <label for="Submit">Proceed</label>
      <input type="submit" name="Submit" value="Submit" onclick="alert(this.form.activityId.value);" id="Submit" />
    </p>
  </form>
      </body>
</html>
0
 
dereksheahanAuthor Commented:
Hi,
Yeah it still happens when I use your simplified version:
"(12,45,20) />  </p>  <p>    <label for="

Cheers,
D
0
 
dereksheahanAuthor Commented:
Hi,
I'm using PHP 4.4.1. Maybe its a PHP syntax problem so because when I try your above code to call the activityId it works for me too. I know this isn't a PHP forum but surely this is an acceptable way to call from a POST?
<?php echo ($_POST['activityId']);?>
Cheers,
D
0
 
dereksheahanAuthor Commented:
Thats okay anyways I guess. It works and thats the main thing. Thanks so much for your help and patience
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Good to know, it worked for you. ..it was not much of  a Javascript issue.

I was thinking, the user interaction (by javascript) was corrupting the DOM

Thanks for your patience.

_PA
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.