Hi all!
I am trying to include two functions in an onchange when the user selects a new value from a select list:
It is a quite big form form - There are one select list, when changed - TWO other fields in the form needs to change accordingly:
I put the information back using ajax and place it within a <span id="blah"></span>;
I have checked the span ids, and they are correct!
Unfortunately, the second function disables the first one :-/
This is the select list with the onchange functions:
<?php
// SELECT LIST WHICH DECIDES THE "PREFIX-CONTENT" OF TWO OTHER FIELDS:
echo '<select name="hovedside_id" onchange="hentPosition(this.value); urlKey(this.value)" style="padding:3px;">';
echo '<option value="'.$aktuelt_id.'"> - '.$aktuelt_hovedemne.' - </option>';
$sql = "SELECT id, link_titel FROM hovedsider ORDER BY placering ASC";
$result = mysqli_query($connection, $sql)or die(mysqli_error($connection));
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row['id'].'"> '.$row['link_titel'].'</option>';
}
echo '</select>';
?>In the top of the page I have included two JS files, which run each function, and opens a ajax request for each their php file which returns the wanted data (not quite yet..)
<head>
<script language="Javascript" type="text/javascript" src="ajaxJS/underside_position.js"></script>
<script language="Javascript" type="text/javascript" src="ajaxJS/url_key.js"></script>
</head>The top one: ajaxJS/underside_position.js
function hentPosition(str)
{
if (str=="")
{
document.getElementById("placering").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("placering").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxPHP/underside_position.php?q="+str,true);
xmlhttp.send();
}The first one opens this php file, and returns the data fine when running alone:
session_start();
// Find positions for second dropdown list
$hoved_side_id = $_GET['q']; // Fra ajax i filen underside_position.js i ajaxJS folder
$sql = "SELECT placering FROM undersider WHERE hovedside_id ='$hoved_side_id'";
$resultat = mysqli_query($connection, $sql);
// If a new subject, return $count+1:
if ($_SESSION['gammelt_hovedside_id'] != $hoved_side_id)
{
echo '<select name="placering" style="padding:3px; width:45px;">';
$position_count = mysqli_num_rows($resultat);
for($count=1; $count<=$position_count+1; $count++)
{
echo '<option value= ' . $count . '>' . $count . '</option>';
}
echo '</select>
<small>Se Url Key hvis du skifter hovedemne!</small>';
}
// If its the same subject only return $count:
if ($_SESSION['gammelt_hovedside_id'] == $hoved_side_id)
{
echo '<select name="placering" style="padding:3px; width:45px;">';
$position_count = mysqli_num_rows($resultat);
for($count=1; $count<=$position_count; $count++)
{
echo '<option value= ' . $count . ' style="width:40px;">' . $count . '</option>';
}
echo '</select>';
}
?>The second function: ajaxJS/url_key.js
function urlKey(str)
{
if (str=="")
{
document.getElementById("url_key").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("url_key").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxPHP/url_key.php?q="+str,true);
xmlhttp.send();
}Opens this php file:
$url_id = $_GET['q'];
// Just testing if it gets printed the right place, which it does
echo $url_id;When I am using both functions, the first one becomes inactive and doesnt work, how can i change that, fix that?
If i enter something else than ?q="+str,true - lets say ?url_key="+str,true
I get an undefined index error, also if i change this: $url_id = $_GET;
But i dont when i write q in the get, hmm?
Basically:
How can i make this work, so I can use ajax to update two fields when an onchange has happened to the select list?
It works fine when i use the functions alone, but i need them both though :-)
Hope someone has some experince in this, as i am not the most experienced using JS, ajax.
Regards, Klemme
