Returning PostCode to Form field 1

[Kennelbloke]

Hi folks

Using PHP/MYSQL and some Javascript for a site, where at some stage, people will fill out an address. I am trying to return the postal code automatically based upon the Suburb they select from a dropdown. The postal code is stored with the suburb in the database.

My problem is that is not returning a value.

...
div class="rfa_edit_data"><select name="suburb_id" id="suburb_id" onchange="PCodeGrab('pcode_get.php?ssid='+this.value)">
<option value="0"></option>
<option value="2">Abbotsham&nbsp;-&nbsp;Central Coast Council</option>
<option value="3">Aberdeen&nbsp;-&nbsp;Devonport City Council</option>
...etc
<div class="rfa_edit_data" id="postcode"><input name="postcode" type="text" size="10" value=""></div>

The form to get the postcode is (don't worry about the variables)

<?php
include('main_nomenu_noheader.inc');
if (n2z($_GET['ssid'],0) > 0) {
  $pcodeSQL = "SELECT postcode FROM ".$db_base."_suburbs.suburbs WHERE id = ".$_GET['ssid'];
}
$pcresult = mysqli_query($db, $pcodeSQL);
if ($strError = mysqli_error($db)) {
  echo '<p>'.$strError.'<br />'.$pcodeSQL.'</p>';
} else {
  while($pcrow = mysqli_fetch_array($pcresult)) {
    $getpcode = $pcrow["postcode"];
    echo $getpcode;
  }
}
?>

The above page works fine and returns the correct Postcode with no other header or body text on the page.

The javascript code to do is

function PCodeGrab(strURL) {
  var req = CreateXmlHttpObject();
  if (req) {
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        document.getElementById('postcode').innerHTML=req.responseText;
      } else {
        alert("There was a problem while using XMLHTTP:\n");
      }
    }
  }
  req.open("GET", strURL, true);
  req.send(null);
  }
}

I have tried moving to id="Postcode" to the div statement and move it to the input statement but not getting any returned value.
For some reason I did have it returning a value at some stage of my playing around but it was in the div area and so was not saved when the form was saved.
Javascript is not my thing so I'm unsure what is going on.

Can someone please point me in the right direction.

 

[feherke]

Hi

Assuming the returned postal code is 666, this :

document.getElementById('postcode').innerHTML=req.responseText;

Will replace this :

<div class="rfa_edit_data" id="postcode"><input name="postcode" type="text" size="10" value=""></div>

With this :

<div class="rfa_edit_data" id="postcode">[highlight]666[/highlight]</div>

I assume your goal is to obtain this :

<div class="rfa_edit_data" id="postcode"><input name="postcode" type="text" size="10" value="[highlight]666[/highlight]"></div>

So you will have to set the value [tt]attribute[/tt] of the [tt]input[/tt] node inside that [tt]div[/tt] :

document.getElementById('postcode').getElementsByTagName('input')[0].value=req.responseText;

Or shorter :

document.querySelector('#postcode input').value=req.responseText;

Though if you have a reference to the [tt]form[/tt], is more comfortable to use it like this :

referenceToTheForm.postcode.value=req.responseText;

Or you could set an [tt]id[/tt] attribute to the [tt]input[/tt] and refer it by that.

Alternatively you can keep the JavaScript unchanged and change the PHP code to send the post code together with a new [tt]input[/tt] tag that will replace the previous empty tag.


Feherke.
feherke.github.io

 

[Kennelbloke]

That's exactly what I'm after. Thank you!

I will have a play and see where I get to.

 

[Kennelbloke]

Cool! Worked perfectly the first time.
Thank you so much for spending the time and helping out.

Cheers
Howard