Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

array not passing? Javascipt

array

  • Please log in to reply
4 replies to this topic

#1 zeroradius

zeroradius

    Speaks fluent binary

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1085 posts

Posted 15 October 2012 - 08:55 PM

Hey guys,

First let me say I don't ever use J.S. I've been trying to figure this out via google and playing with the code for over an hour. I'm working on a deadline so I am going to move on and hope I get an answer to this. If not I will have to make a static form.

What I want to do is add a drop down selection option to my form every time a button is clicked. I did something similar on another page with text fields using jSon. The items for the list is gotten from a database. The drop down that is initially on the page works so I know the data is being gotten. I originally tried to pass the values by echoing a php variable into the onclick paramater list, in made the new dropdown list but each option was one letter (A R R A Y) <-face palm.

I am now trying to make a js array on my form page and pass the array into the function, nothing happens, the dropdown isn't even created anymore
Form Page
<?php
include_once 'models/DbHandler.class.php';
$db = new DbHandler();
$db->connect();
$query = "Select * From suppliesCat";
$con=array();
$con = $db->multiSelectQuery($query);
$i=0;
?>
<script type="text/javascript">
var value = new Array();
var output = new Array();
</script>
<form action="" method="post">
<input type="text" name="item[]" />
<select name="catId[]">
	 <?php
		 foreach($con as $cat)
		 {
			 echo "<option value='". $cat[0] ."'>". $cat[1] ."</option>";
			 echo "<script type='text/javascript'>";
			 echo "value[" . $i . "]='" . $cat[0] . "';";
			 echo "output[" . $i . "]='" . $cat[1] . "';";
			 echo "</script>";
			 $i++;
		 }
	 ?>
</select>
<div id="newInput">
	
</div>
<br />
	 <input type="button" onclick="addDropDown('newInput',value, output);" value="Add Field" />
</form>

Javascript
function addDropDown(id, value, display)
{
var output = "<select name='catId[]'>";
var container = document.createElement("div");
for(var i=0; i<display.length; i++)
{
	 output = output + "<option value='"+ value[i] +"'>" + display[i] +"</option>";	
}

output = output + "</select>";

container.innerHTML = output;
document.getElementById(id).appendChild(container);

}

  • 0
Posted Image

#2 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 15 October 2012 - 10:54 PM

Could you show some of the generated html from php?

Judging by your given code I've made this:
<html>
<head>
<script type="text/javascript">
function addDropDown(id, value, display){
  var output = "<select name='catId[]'>";
  var container = document.createElement("div");
  for(var i=0; i<display.length; i++){
   output = output + "<option value='"+ value[i] +"'>" + display[i] +"</option>";
  }
  output = output + "</select>";
  container.innerHTML = output;
  document.getElementById(id).appendChild(container);
}
</script>
</head>
<body onload="onload()">
<script type="text/javascript">
var value = new Array();
var output = new Array();
</script>
<form action="" method="post">
  <input type="text" name="item[]" />
  <select name="catId[]">
   <option value="option0" >opt0</option>;
   <script type='text/javascript'>
    value[0]='opt0';
    output[0]='opt0';
   </script>
   <option value="option1" >opt1</option>;
   <script type='text/javascript'>
    value[1]='opt1';
    output[1]='opt1';
   </script>
  </select>
  <div id="newInput">
   
  </div>
  <br />
	   <input type="button" onclick="addDropDown('newInput',value, output);" value="Add Field" />
</form>
</body>
</html>

But this just works.

Check if you get Javascrpit errors (CTRL+shift+J for chrome / firefox - - - F12>script tab in IE)
  • 1

#3 zeroradius

zeroradius

    Speaks fluent binary

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1085 posts

Posted 15 October 2012 - 11:08 PM

Code Created : (I seperated it a little bit to make it easy to read)
<div><!-- Load content -->
<script type="text/javascript">
var value = new Array();
var output = new Array();
</script>
<form action="" method="post">
<input type="text" name="item[]" />
<select name="catId[]">
<option value='1'>Painting Supply List</option>
<script type='text/javascript'>value[0]='1';output[0]='Painting Supply List';</script>
<option value='2'>Drawing Supply List</option>
<script type='text/javascript'>value[1]='2';output[1]='Drawing Supply List';</script>
</select>

<div id="newInput">
	
</div>
<br />


	 <input type="button" onclick="addDropDown('newInput',value, output);" value="Add Field" />
</form>
	 </div>

Error:


Error line 1:formHelper.js:12

Error line 3: Uncaught ReferenceError: addDropDown is not defined


  • 0
Posted Image

#4 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 15 October 2012 - 11:13 PM

Aaah, there it is. It can't find your addDropDown method, is it in a separate javascript file? Are you sure it's included on the page?
Make sure you don't try to prematurely close your script tag, as you would do with html tags.
<script type="text/javascript" src="filename.js" />   --> does NOT work
<script type="text/javascript" src="filename.js"></script> ---> does work

  • 1

#5 zeroradius

zeroradius

    Speaks fluent binary

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1085 posts

Posted 15 October 2012 - 11:25 PM

Thanks for the help wim Dc,

The file was getting included ..... actually I have no clue what happened but I re-uploaded it a moment ago and magically it started working. I have no clue why I din't touch the code ..... oh well don't look a gift horse in the mouth!

Thanks for all the help!!
  • 0
Posted Image





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download