Php/Mysql/Ajax (updating fields of a form of a page using Ajax)

[khalidmehmoodawan]

hi all

here is the scene.
I have a page that contains many fields (equal to the number of attributes in a database table, mixure of text fields, textarea, list box etc)
I have a search field, user types a name in this field and ajax displays the matching names in a list box or a drop down box.

Now user agains clicks any of the value in Drop down box and all the rest of the fields on page need to be populated from database using Ajax

I have done the rest but unable to do the step mentioned above in Red.

is there any way the ajax/php page can access the text fields on the page (without refreshing the page) ?

have spent 4 days and not working

[Jesdisciple]

Conveniently, I'm just now developing a script to do, among a couple other things, exactly what you want. Note, however, that I haven't tested this yet; if you post your form source, I will test them together and be very appreciative. :)

(See below for usage instructions.)
function getAjax(){
if(XMLHttpRequest)
// Firefox, Opera 8.0+, Safari, Internet Explorer 7+
return new XMLHttpRequest();
else if(ActiveXObject){
// Internet Explorer 6-
var types = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for (var i = 0; i < types.length; i++)
try {
return new ActiveXObject(types[i]);
} catch(e) {}
}
return null;
}
function Form(name){
var that = this;
var form = document.forms[name] || document.getElementById(name);
form.onsubmit = function(event){
event = event || window.event;
(that.onsubmit || function(){})(event);
return false;
};
this.getElements = function(withNulls){
var elements = [];
for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
if(withNulls || element.value)
elements.push(elements[element.name] = element);
return elements;
};
this.update();
this.getValues = function(withNulls){
var values = [];
for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
if(withNulls || element.value)
values.push(values[element.name] = element.value);
return values;
};
this.setValues = function(values){
for(var i = 0, element = form.elements[0]; i < form.elements.length; element = form.elements[++i])
element.value = values[element.name] || element.value;
};
this.submit = function(method, action, elements){
if(elements)
this.setValues(elements);
form.onsubmit();
form.submit();
};
this.ajax = function(callback, method, action, async, elements){
var ajax = getAjax();
if(ajax){
method = (method || form.method).toUpperCase(),
query = Form.makeQuery(elements || this.getElements());
ajax.open(method || form.method,
(action || form.action) + (method === 'GET' ? '?' + query : ''),
async !== false);
ajax.onreadystatechange = function(){
if(this.readyState === 4)
callback({text: this.responseText, xml: this.responseXML});
};
ajax.send(method === 'POST' ? query : null);
return true;
}else
return false;
};
}
Form.makeQuery = function(elements){
var query = [];
for(var i = 0; i < elements.length; i++)
query.push(elements[i].name + '=' + elements[i].value);
return query.join('&');
};
Form.prototype = {
validate: function(callbacks, values){
values = values || this.getValues(true);
for(var i = 0, value = values[callbacks[0].name]; i < callbacks.length; value = values[callbacks[++i].name])
if(value && !callbacks[i](value))
return false;
return true;
},
update: function(){
this.elements = this.getElements(true);
}
};To use it, put a form tag around your fields and adorn it with method="GET" and action="<?php echo $_SERVER['PHP_SELF']; ?>" attributes. (If the page is loaded in response to a form submission, do the same thing but without JS.) Link to the script and, in a separate script tag at the end of the body, link to this one (with all placeholders replaced):
var form = new Form("your form's name or id");
var menu = form.elements.menu; // Change "menu" to your dropdown's name.
menu.onchange = function(){
form.ajax(callback, null, "the_thinking.php", null, [menu]);
};
function callback(response){
//Change the fields' values here according to response.xml or response.text.
}The mini-framework should take care of everything else.

[khalidmehmoodawan]

well...

this problem is resolved BUT...

now this one arise...



here is the scenario
i have populated a list using ajax code. it has been populated successfully

BUT

i am unable to make this list select Multiple Values.

i.e. multiple='multiple' is not working.

here is the test code.
This is handler


<?php
require_once('./dbconn/conn.php');
$q = $_GET["q"];
$seed=$_GET['inputtxt'];
$query="";

if ($q == 1) $query="select bsFriendlyName, bsID from tabbasett where bsFriendlyname like '%" . $seed . "%'" ;
elseif ($q == 2) $query="select alarmType, id_f, idalarm from tabalarms where id_f = " . $seed ;

$recordSet = mysql_query($query) or mysql_error();
$number_of_rows = mysql_num_rows($recordSet);

if ($number_of_rows < 1)
{
echo "<div>no record found. <a href='report1.php?new=true&alarmID=false&id=" . $seed . "' onclick='document.form1.submit();'>New Alarm</a></div>";
//<br>q=". $q . "<br>inputtxt " . $seed . "<br>query = " . $query . "<br>no. of rows" . $number_of_rows;

unset($recordSet); unset($query); unset($number_of_rows);
return false;
}

if ($q == 1)
{
echo "<select name='bsSelectedList' size=\"10\" class='style1' onChange='return ListBoxSearchClicked(this);'>";
while($row=mysql_fetch_array($recordSet)){
echo "<option value=\"" . $row[bsFriendlyName] . "\" id=\"" . $row[bsID] . "\">" . $row[bsFriendlyName] . "</option>";
}
}
elseif ($q == 2)
{
echo "<select id='selectAlarms' name='selectAlarms' class='style1' onChange='return ComboBoxSearchClicked(this);'>";
echo "<option value='New Alarm' id='New Alarm' selected='selected'>New Alarm</option>";
while($row=mysql_fetch_array($recordSet)){
echo "<option value='" . $row[idalarm] . "' id=" . $row[idalarm] . ">" . $row[alarmType] . "</option>";
}
}

if ($q == 3)
{
echo "<select name='bsSelectedList' size=\"10\" class='style1' onChange='ListBoxSearchClicked(this);' multiple='multiple'>";
while($row=mysql_fetch_array($recordSet)){
echo "<option value=\"" . $row[bsFriendlyName] . "\" id=\"" . $row[bsID] . "\">" . $row[bsFriendlyName] . "</option>";
}
}


unset($recordSet); unset($query); unset($number_of_rows); unset($row);

echo "</select>";
?>



ajax function

function AjaxFunction(q, url, input_field, output_field){
httpxml=null;

try {// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e){ // Internet Explorer
try {
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
} //alert ("q =" + q + "\n url = " + url + "\ninput field = " + input_field + "\noutput field = " + output_field);
httpxml.onreadystatechange=function(){
if (httpxml.readyState==4){
switch (q)
{
case 1 :
document.getElementById("captionSearchResults").innerHTML="Search Results for <b><u class='style2'>'" + input_field.value + "'</u></b>";
document.getElementById("searchResultsCell").innerHTML=httpxml.responseText;
break;
case 2: document.getElementById("selectAlarmsCell").innerHTML=httpxml.responseText;
break;

case 3 :
document.getElementById("captionSearchResults").innerHTML="Search Results for <b><u class='style2'>'" + input_field.value + "'</u></b>";
document.getElementById("searchResultsCell").innerHTML=httpxml.responseText;
break;
}
}
};
httpxml.open("GET",url,true);
httpxml.send(null);
}


post also available on
http://www.pixel2life.com/forums/index.php?showtopic=43503

[Jesdisciple]

Try this: http://www.seungpyo.com/stacksandpiles/2006/04/16/php-and-html-multiple-select-box/