Member Avatar for xeracon

hi guyz

im new to HTML and CSS and i would to clarify the following doubt.


i have 2 pages
>index.php
>config.php

the index.php has a select box named "adamage", when i select the select box "atype" above, its supposed to change through AJAX and retrieve values (from a MySQL DB) for adamage according to atype

for eg. atype-art
adamage-frame, painting

atype-building
adamage-wall,door


The problem is that the AJAX works fine in all browsers, but the values cant get passed, also i cant get the selected value to be passed. :(

here is the Ajax code for config.php

<td>Area of damage : 
<select name="adamage" style="width:205px">
<option >select damage type</option>
<? while($row=mysql_fetch_array($result)){ ?>
<option value>
<?=$row['adamage']?>
</option>
<? } ?>
</select></td>

which would overwrite index.php adamage

the Ajax retrieval code in the index.php are listed below

<script>
function getdamage(strURL) {		
		
var req = getXMLHTTP();
		
	if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('damagediv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
	}
</script>

and....

<td>
<div class="mainleft">Article type:  <select name="atype" onchange="getdamage('config.php?atype='+this.value)" style="width:205px">
<option value="">select article type</option>
<option value="1">Art</option>
<option value="2">Buildings</option>
</select></div>
</td>
						
<tr><td>&nbsp;</td></tr>


<td><div class="mainleft">
<div id="damagediv">
Area of damage : <select name="adamage" style="width:205px">
<option value="">select damage type</option>
</div></div>
</td>
  • 2 Contributors
  • 1 Reply
  • 107 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Two likely causes explain why IE "works" while Firefox/Opera do not: invalid option markup on the server and injecting table/cell markup into a generic DIV so different browsers parse the fragment differently.

Corrective checklist for (and note to : browser-sniffing for DOM is unnecessary — document.getElementById and standard DOM APIs exist in all modern browsers):

  • Make each option explicit. Give every option a real value="..." (and escape it). IE historically falls back to the visible text when value is missing; Gecko/WebKit do not. See the HTMLOptionElement docs for details: HTMLOptionElement.

  • Return only what you intend to insert. Do not return <td> or an entire table row if you inject into a DIV; returning a plain list of <option> lines or JSON avoids parser quirks. InnerHTML parsing rules vary — more at Element.innerHTML.

  • Prefer updating the SELECT element directly (give it an id="adamage"). Either return JSON and build options with DOM methods, or return only the <option> fragment and set select.innerHTML = responseText.

Example server-side JSON output and client-side population (conceptual):

/* PHP (output JSON array of strings) */
header('Content-Type: application/json');
$out = [];
while ($row = mysqli_fetch_assoc($result)) $out[] = $row['adamage'];
echo json_encode($out);
/* JS: parse JSON and rebuild the select */
var sel = document.getElementById('adamage');
sel.options.length = 0;
JSON.parse(xhr.responseText).forEach(function(v) {
  var o = document.createElement('option');
  o.value = v;
  o.text  = v;
  sel.appendChild(o);
});

Quick debugging tips: inspect the AJAX response in DevTools (Network tab), paste it into the console to check validity, and run console.log(document.getElementById('adamage').value) after population to confirm the selected value.

Member Avatar for almostbob

IE uses the DOM document object model so getelementbyid() only works in IE
mozilla opera safari use a diferent model
so we can

(document.getElementById) ? dom = true : dom = false; //check for IE dom model (once)
 if (dom) {	document.getElementById('damagediv').innerHTML=req.responseText; } //IE
 else {document.getElementById('damagediv').value=req.responseText;} } //mozilla opera
/* but
document.layers['damagediv'].value=req.responseText; 
also works in mozilla implementations */

// everywhere through the code
if(dom) {response ie}
else {response mozilla}

works most of the time
mozilla.org for a mozilla dom reference

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.