Hide address fields until text entered - PostcodeAnywhere PHP

Question

I'm trying to set up an Address form using PostCodeAnywhere. The searching works fine, and autopopulates the fields as expected.

However, I'd like to find a way how I can just show the Postcode field on the page, and then when the address is entered into the Address1, Address2, Town, County and Country fields.. these fields to be shown on the page.

Is there a simple way of doing this using an IF statement? ie. Can PHP check in real time if an input field is blank or not?

So far my form looks like this:

<li>
    <label>Address 1</label>
    <input type="text" name="address1" value="<?php if (isset($_POST['address1'])) {echo $_POST['address1'];}?>" />(*)
</li>
<li>
    <label>Address 2</label>
    <input type="text" name="address2" value="<?php if (isset($_POST['address2'])) {echo $_POST['address2'];}?>" />
</li>
<li>
    <label>Town</label>
    <input type="text" name="town" value="<?php if (isset($_POST['town'])) {echo $_POST['town'];}?>" />
</li>
<li>
    <label>County</label>
    <input type="text" name="county" value="<?php if (isset($_POST['county'])) {echo $_POST['county'];}?>" />
</li>
<li>
    <label>Postcode</label>
    <input type="text" name="postcode" class="homeReadMo" value="<?php if (isset($_POST['postcode'])) {echo $_POST['postcode'];}?>" />
</li>

The isset values, are to pull in existing details from records, if they are set.. obviously!

Edit

I am using jQuery with WordPress on this site, and have it working fine with other elements.

The link below is what I put into the head (I can't access it right now so can't paste it). But I'm unsure as to what relevance the .details has. Does that need to be a class of a containing div around the intended hidden fields? Or does each individual field to be hidden need to have this class?

Edit

So in the head tag where the other jQuery stuff is I've got:

$(".details").each(function (i) {
if ($('input[name$=postcode][value=""]',this).length == 1) { 
    $(this).hide();
    console.log('hiding');
} else {
    $(this).show();
    console.log('showing');
}
});

With my form now looking like this:

<div class="details">
    <li>
        <label>Address 1</label>
        <input type="text" name="address1" value="<?php if (isset($_POST['address1'])) {echo $_POST['address1'];}?>" />(*)
    </li>
    <li>
        <label>Address 2</label>
        <input type="text" name="address2" value="<?php if (isset($_POST['address2'])) {echo $_POST['address2'];}?>" />
    </li>
    <li>
        <label>Town</label>
        <input type="text" name="town" value="<?php if (isset($_POST['town'])) {echo $_POST['town'];}?>" />
    </li>
    <li>
        <label>County</label>
        <input type="text" name="county" value="<?php if (isset($_POST['county'])) {echo $_POST['county'];}?>" />
    </li>
</div>
<li>
    <label>Postcode</label>
    <input type="text" name="postcode" class="homeReadMo" value="<?php if (isset($_POST['postcode'])) {echo $_POST['postcode'];}?>" />
</li>

Edit

After not having any luck, I've tried a different method using this jQuery code:

if($('#address1').val() == "") {
        $(.details).hide();
    } else {
        $(.details).show();
    }

The form fields are being hidden.. but they remain hidden even when the Address 1 field has text pre-populated by the PostcodeAnywhere. Any ideas?

Solved

I managed to solve it myself using the following jQuery code:

$('#postcode').on('change', function (event) {
if (inputHasContent($(this))) {
    $('.details').show();
} else {
    $('.details').hide();
}
});

Answer 1

I was able to solve my issue by using this JS code

$('#postcode').on('change', function (event) {
if (inputHasContent($(this))) {
    $('.details').show();
} else {
    $('.details').hide();
}
});