[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript Function POSTING problem

Posted on 2006-06-07
13
Medium Priority
?
297 Views
Last Modified: 2013-11-19
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>
0
Comment
Question by:dereksheahan
  • 7
  • 5
13 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 16851307
Put your HTML code
0
 

Author Comment

by:dereksheahan
ID: 16851317
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16852391
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

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

 

Author Comment

by:dereksheahan
ID: 16853779
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16854123
Run your page through validators

http://validator.w3.org/
0
 

Author Comment

by:dereksheahan
ID: 16854200
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
 

Author Comment

by:dereksheahan
ID: 16861175
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16861746
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
 

Author Comment

by:dereksheahan
ID: 16861830
Hi,
Yeah it still happens when I use your simplified version:
"(12,45,20) />  </p>  <p>    <label for="

Cheers,
D
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 1800 total points
ID: 16862501
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
 

Author Comment

by:dereksheahan
ID: 16862571
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
 

Author Comment

by:dereksheahan
ID: 16862611
Thats okay anyways I guess. It works and thats the main thing. Thanks so much for your help and patience
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16862938
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…
Suggested Courses

872 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