0

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();
}
});
halfer
  • 19,824
  • 17
  • 99
  • 186
Lee
  • 4,187
  • 6
  • 25
  • 71
  • You must use javascript to achieve this. – Debflav Mar 18 '14 at 09:49
  • Use jquery or javascript to achieve this. – Amit Mar 18 '14 at 09:50
  • Idiot question but in this topic the person uses Jquery. You have import jQuery ? Moreover you can update your question and put what you tried to do. – Debflav Mar 18 '14 at 10:10
  • Your input name postcode must be in your **div.details** (following your code). If I understand you want to hide the PostCode when you reach the page and after you want to show it when some fields are filled. You can use .keyPress() function of jQuery to check if other fields are filled. – Debflav Mar 18 '14 at 10:35
  • No, I always want the postcode field to show. And when the address1 field is completed, then i want the address1, address2, town and county fields to show – Lee Mar 18 '14 at 10:36
  • Any chance you can state how you solved this in an answer? Thanks. – Fetchez la vache Feb 18 '15 at 14:38

1 Answers1

0

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();
}
});
Lee
  • 4,187
  • 6
  • 25
  • 71