Javascript Arrays

[obrienkev]

Hi all,

I have tried the below on PHP forum but was told to try here. I have a select menu. When the user makes a selection from it, two separate textareas should be automatically populated with data from database query.

However, below not working. If I use only one array works fine for populating just one textarea.

Any ideas please? Thanks.

<?php

// 1) Get all Investment Types
$query = "SELECT investment_type_ID, investment_type, inv_note, inv_note2 ".
"FROM investment_type";
$result = mssql_query($query) or die('Select Error');

$type_array = array();
$type1_array = array();
$id_array = array();

while($row = mssql_fetch_assoc($result))
{
// option string
$option .= '<option value="'.$row['investment_type_ID'].'">'.$row['investment_type'].'</option>';

// arrays to build javascript array string
$type1_array[] = $row['inv_note2'];
$type_array[] = $row['inv_note']; //addslashes for javascript escape
$id_array[] = $row['investment_type_ID'];
}// end while

//create string for javascript assoc array format. "key1:value1", "key2:value2", ........
for($i=0; $i < sizeof($id_array); $i++)
{
$javascript_array[$i] = '"'.$id_array[$i].'":"'.$type_array[$i].'"';
$javascript_array1[$i] = '"'.$id_array[$i].'":"'.$type1_array[$i].'"';
}
?>

<script language="JavaScript">
<?php
//echo javascript array var notes = {"key1:value1", "key2:value2", ...}
echo 'var notes = {'.implode(',',$javascript_array).'};';
echo 'var notes2 = {'.implode(',',$javascript_array1).'};';
?>

function change(id)
{
document.getElementById('inv_type_note').innerHTML = notes[id];
document.getElementById('inv_type_note2').innerHTML = notes2[id];
}
</script>

<p>
<?php if(isset($error_message['investment_type'])){ echo $error_message['investment_type'].'<br />'; } ?>
<label for="investment_type">Investment Type</label>
<select name="investment_type" id="investment_type" onchange="change(this.options[selectedIndex].value);">
<option value="0">Select Investment Type</option>
<?php
echo $option;
?>
</select>
</p>

<p>
<label for="inv_type_note">Note</label>
<textarea cols="55" rows="5" name="inv_type_note" id="inv_type_note">
</textarea>
</p>

[JPnyc]

You're passing id in both of them, and then setting the value of id in the function call I assume? Well I thinkthat's the problem. Both arrays are being set to the same value of id.

Where's the function calls? That'll tell us what is being passed

[obrienkev]

Here are the arrays echoed out... values are correctly assigned...


var notes = {"2":"item2",
"3":"item3"
};

var notes2 = {"2":"new1"};


Function called here...

<select name="investment_type" id="investment_type" onchange="change(this.options[selectedIndex].value);">

[JPnyc]

But there's one function, so you're setting the value of id to the same selectedIndex value. Will that work the way you have the arrays setup? I didn't get to see the actual arrays.

[obrienkev]

so what should I change?

[JPnyc]

Well it depends, I can't see the arrays so I dunno. If you have 2 arrays but only one index for them, then they better have corresponding values in the same bucket. Say if your index = 2, then you better have the 2 pieces of info you want in the 3rd bucket of each array. Otherwise you have to rewrite this function so that the id isn't passed as an arg. or else pass 2 args, id and id1 or something like that. However, if u DO that, you have to set both values in the call.

[obrienkev]

Hi,

Here are how my Javascript arrays are created... are they correct?

//create string for javascript assoc array format. "key1:value1", "key2:value2", ........
for($i=0; $i < sizeof($id_array); $i++)
{
$javascript_array[$i] = '"'.$id_array[$i].'":"'.$type_array[$i].'"';
$javascript_array1[$i] = '"'.$id_array[$i].'":"'.$type1_array[$i].'"';
}
?>

<script language="JavaScript">
<?php
//echo javascript array var notes = {"key1:value1", "key2:value2", ...}
echo 'var notes = {'.implode(',',$javascript_array).'};';
echo 'var notes2 = {'.implode(',',$javascript_array1).'};';
?>

[JPnyc]

Well thats the php which will spit out the JS arrays. It'd be easier to diagnose if I saw the output.

But basically the issue is this, you have 2 arrays, but only one index. Therefore if you pass the value of that index in the function calls, you will end up getting the same number bucket of each of the 2 arrays. Is that going to do what you wish? I still have no idea what you're really trying to do here, but that's the 1st thing you need to tell me.

For example, if you need buck 2 of the 1st array, and bucket 6 of the 2nd array, then this approach will not give you that.

[obrienkev]

OK. What I want to achieve is this...

-- The user makes a selection from a select menu
-- Two textareas are populated with the relevant data from a database based on the above selection.

1/ Get Data from Database

$query = "SELECT investment_type_ID, investment_type, inv_note, inv_note2 ".
"FROM investment_type";
$result = mssql_query($query) or die('Select Error');

2/ Declare Arrays

$type_array = array();
$type1_array = array();
$id_array = array();


3/ Loop Through Query Results + Assign Values to Arrays

while($row = mssql_fetch_array($result))
{
// option string
$option .= '<option value="'.$row['investment_type_ID'].'">'.$row['investment_type'].'</option>';

// arrays to build javascript array string
$type1_array[] = $row['inv_note2'];
$type_array[] = $row['inv_note'];
$id_array[] = $row['investment_type_ID'];
}// end while

4/ Create string for javascript assoc array format. "key1:value1", "key2:value2",

for($i=0; $i < sizeof($id_array); $i++)
{
$javascript_array[$i] = '"'.$id_array[$i].'":"'.$type_array[$i].'"';
$javascript_array1[$i] = '"'.$id_array[$i].'":"'.$type1_array[$i].'"';
}

5/ Function when select menu changed

<script language="Javascript">
// Define first array
var notes = new Array();
// Assign PHP value to Javascript array
var notes = '<?php print_r($javascript_array) ?>';
// Define second Array
var notes2 = new Array();
var notes2 = '<?php print_r($javascript_array1) ?>';

// Put all elements into a string
document.write(notes.join(","));
document.write(notes2.join(","));

function change(id)
{
document.getElementById('inv_type_note').innerHTML = notes[id];
document.getElementById('inv_type_note2').innerHTML = notes2[id];
}
</script>


6/ Select Menu

<select name="investment_type" id="investment_type" onchange="change(this.options[selectedIndex].value);">
<option value="0">Select Investment Type</option>
<?php
echo $option;
?>
</select>

Make sense? Is what I am doing correct?
Thanks.

[JPnyc]

Well there's still something I don't understand. If you're pulling data from a server, why is JS being used at all? It doesn't play nice with PHP. Do the entire thing in PHP. It'll work much better and be easier.

[obrienkev]

How would I do it using only PHP??

When the user selects from the select menu the other textfields should then be automatically populated with data relevant to the users selection.

Thought Javascript was the only solution for this??

[JPnyc]

Do you want to do this without refreshing the whole page? Then what you need is AJAX (http://www.w3schools.com/ajax/default.asp)

[obrienkev]

Thanks.

Here's my select menu...

<select name="investment_type" id="investment_type" onchange="change(this.options[selectedIndex].value);">
<option value="0">Select Investment Type</option>
<?php
echo $option;
?>
</select>


Javascript:

<script language="JavaScript">
function change(id)
{
document.getElementById('inv_type_note').innerHTML = $type_array[];
document.getElementById('inv_type_note2').innerHTML = $type1_array[];
}
</script>


and the textarea to be automatically populated...

<textarea name="inv_type_note" id="inv_type_note">
</textarea>

<textarea name="inv_type_note2" id="inv_type_note2">
</textarea>


Database Query:

// 1) Get all Investment Types
$query = "SELECT investment_type_ID, investment_type, inv_note, inv_note2 ".
"FROM investment_type";
$result = mssql_query($query) or die('Select Error');

while($row = mssql_fetch_array($result))
{
// option string
$option .= '<option value="'.$row['investment_type_ID'].'">'.$row['investment_type'].'</option>';

// arrays to build javascript array string
$type1_array[] = $row['inv_note2'];
$type_array[] = $row['inv_note'];
$id_array[] = $row['investment_type_ID'];
}// end while


Any ideas how I assign the database data to the Javascript?

Thanks.

[obrienkev]

After making changes now. Seems to make more sense o me but unable to get the relevant Database data to display in the textfields.

Any ideas why this is?? Thanks.


<?php

// 1) Get all Investment Types
$query = "SELECT investment_type_ID, investment_type, inv_note, inv_note2 ".
"FROM investment_type";
$result = mssql_query($query) or die('Select Error');

while($row = mssql_fetch_array($result))
{
// Create Arrays + Populate from DB
$id_array[] = $row['investment_type_ID'];
$type_array[] = $row['inv_note'];
$type1_array[] = $row['inv_note2'];
$investment_type[] = $row['investment_type'];

}// end while

// Loop through $id_array to populate select menu
for($i=0; $i<sizeof($id_array); $i++)
{
$option .= '<option value="'.$id_array[$i].'">'.$investment_type[$i].'</option>';
}
?>

<script language="Javascript">

// Declare Javascript Arrays
var js_id_array = new Array();
var js_type_array = new Array();
var js_type1_array = new Array();

</script>

<?php

// Loop through PHP Arrays
for($i=0; $i <sizeof($id_array); $i++)
{
?>

<script language="Javascript">

// Assign PHP Arrays to Javascript Arrays
var js_id_array['<?php echo $i ?>'] = '<?php echo $id_array[$i] ?>';
var js_type_array['<?php echo $i ?>'] = '<?php echo $type_array[$i] ?>';
var js_type1_array['<?php echo $i ?>'] = '<?php echo $type1_array[$i] ?>';

</script>

<?php
} // end for loop
?>

<script language="Javascript">

function change(id)
{
document.getElementById('inv_type_note').innerHTML = js_type_array[id];
document.getElementById('inv_type_note2').innerHTML = js_type1_array[id];
}
</script>


<p>
<label for="investment_type">Investment Type</label>
<select name="investment_type" id="investment_type" onchange="change(this.options[selectedIndex].value);">
<option value="0">Select Investment Type</option>
<?php
echo $option;
?>
</select>
</p>

<p>
<label for="inv_type_note">Note</label>
<textarea cols="55" rows="5" name="inv_type_note" id="inv_type_note">
</textarea>
</p>

<p>
<label for="inv_type_note2">Note</label>
<textarea cols="45" rows="8" name="inv_type_note2" id="inv_type_note2"></textarea>
</p>

[JPnyc]

My advice, ditch the JS altogether, and do this entirely with PHP. Post it back in the php section and someone will be able to help with it. Or, if you want to do it without refreshing the whole page, then your only recourse is AJAX (http://www.w3schools.com/ajax/default.asp), in which case you won't need PHP at all.