need help with showing previous address fields

[ianhaney]

Hi

I have developed a finance site but the form needs altering, I need the form to display previous address fields if their current address is less than 3 years

I have put together some coding but don't seem to be working

<div class="row-single">
	<label>Moving In Date</label>
     <select name="moveindate1day">
  <option value="">---Select date---</option>
  <?php for ($i = 1; $i <= 31; $i++) : ?>
  <option value="<?php echo ($i < 10) ? '0'.$i : $i; ?>"><?php echo $i; ?></option>
  <?php endfor; ?>
</select>
     
     <select name="moveindate1month">
  <option value="">---Select month---</option>
  <?php for ($i = 1; $i <= 12; $i++) : ?>
  <option value="<?php echo ($i < 10) ? '0'.$i : $i; ?>"><?php echo $i; ?></option>
  <?php endfor; ?>
</select>
     
    <select name="moveindate1year" id="year1" onchange = "three()">
  <option value="">---Select year---</option>
  <?php for ($i = 1930; $i < date('Y'); $i++) : ?>
  <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
  <?php endfor; ?>
</select>

     </div>

<div id="extra" name="extra" style="display: none">
     <div class="row-single">
     <label>Address 2</label>
     </div>
     
     <div class="clearfix"></div>
     
     <div class="row-double">
     <div class="leftcol">
     <label>Flat</label>
     <input name="flat2" type="email" value="" maxlength="50" />
     </div>
     <div class="leftcol">
     <label>Property Name</label>
     <input name="propertyname2" type="email" value="" maxlength="50" />
     </div>
     </div>
     
     <div class="clearfix"></div>
     
     <br />
     
     <div class="row-double">
     <div class="leftcol">
     <label>Property Number</label>
     <input name="propertynumber2" type="email" value="" maxlength="50" />
     </div>
     <div class="leftcol">
     <label>Street Name</label>
     <input name="streetname2" type="email" value="" maxlength="50" />
     </div>
     </div>
     
     <div class="clearfix"></div>
     
     <br />
     
     <div class="row-double">
     <div class="leftcol">
     <label>Town</label>
     <input name="town2" type="email" value="" maxlength="50" />
     </div>
     <div class="leftcol">
     <label>Postcode</label>
     <input name="postcode2" type="email" value="" maxlength="50" />
     </div>
     </div>
     
     <div class="clearfix"></div>
     
     <br />
     
     <div class="row-single">
     <label>Moving In Date</label>
     <select name="moveindate2day">
  <option value="">---Select date---</option>
  <?php for ($i = 1; $i <= 31; $i++) : ?>
  <option value="<?php echo ($i < 10) ? '0'.$i : $i; ?>"><?php echo $i; ?></option>
  <?php endfor; ?>
</select>
     
     <select name="moveindate2month">
  <option value="">---Select month---</option>
  <?php for ($i = 1; $i <= 12; $i++) : ?>
  <option value="<?php echo ($i < 10) ? '0'.$i : $i; ?>"><?php echo $i; ?></option>
  <?php endfor; ?>
</select>
     
	<select name="moveindate2year">
  <option value="">---Select year---</option>
  <?php for ($i = 1930; $i < date('Y'); $i++) : ?>
  <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
  <?php endfor; ?>
</select>
     </div>
     </div>

<script>    
function three() {
var yr = new Date().getFullYear();  // current year
var dv = Number(document.getElementById("year1").value);
if ((dv == yr) || dv == yr-1) || dv == yr-2) || dv = yr-3)) {
document.getElementById("extra").style.display = "block";
}
else {
document.getElementById("extra").style.display = "none";
}
}
</script>

Also be good to use jquery datepicker but I couldn't get that to work for some reason, it showed the calendar but did not seem to have any css styling to it and would not enter the date into the input text field so wondering if it was a jquery issue somewhere, I left that for now and gone with select dropdowns if someone could take a look at my coding to help me get it working first then look at the datapicker

Thank you in advance

[jscheuer1]

Syntax errors/typos of omission (add the 3 red highlighted ( characters):

<script>    
function three() {
var yr = new Date().getFullYear();  // current year
var dv = Number(document.getElementById("year1").value);
if ((dv == yr) || (dv == yr-1) || (dv == yr-2) || (dv = yr-3)) {
document.getElementById("extra").style.display = "block";
}
else {
document.getElementById("extra").style.display = "none";
}
}
</script>

Once that's taken care of, you may well be able to use other scripts (like jq date-picker), but there could also be other problems. Also, this is not a form, though that might only be because you haven't shown the full code.

[ianhaney]

Hi

Thank you so much, is working, I will try and integrate the datepicker now and see if that works

[ianhaney]

Hi

Sorry back to this issue, I have got the datepicker working now bit if I select the year as 2005 the second address fields show, is there a way that they don't show if the first address year is more than 3 years from current date, I only want the second address fields to show if the first address year is within 3 years of the current date, below is the updated code

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <script>
  $(function() {
    $("#midone").datepicker({
	changeMonth: true,
    changeYear: true,
	showButtonPanel: true,
	dateFormat: "yy/mm/dd",
	showOn:"both"
	});
});
  </script>

<form action="unsecuredformsubmit.php" method="post" class="loan-form">
<input type="text" name="midone" id="midone" onchange = "three()" />
</form>

<script>    
function three() {
var yr = new Date().getFullYear();  // current year
var dv = Number(document.getElementById("midone").value);
if ((dv == yr) || (dv == yr-1) || (dv == yr-2) || (dv = yr-3)) {
document.getElementById("extra").style.display = "block";
}
else {
document.getElementById("extra").style.display = "none";
}
}
</script>

[jscheuer1]

Two problems:

1)

var dv = Number(document.getElementById("midone").value);

no longer gets the year, because that field is now in the format: yyyy/mm/dd. As long as it remains that way, you could use:

var dv = parseInt(document.getElementById("midone").value);

or any other method that isolates the year and converts it to a number. If the format changes though, a regular expression might be needed or at least a substring() method employed to extract the year portion, and that would then need to be type converted to a number.


2) In this line:

if ((dv == yr) || (dv == yr-1) || (dv == yr-2) || (dv = yr-3)) {

the last condition is an assignment, not a comparison, because it has only one = sign. Because of that it will always be true as long as yr-3 is something that evaluates to true, like any positive number, any non-empty string, almost any object, etc. It needs another = sign:

if ((dv == yr) || (dv == yr-1) || (dv == yr-2) || (dv == yr-3)) {

The whole line could be simplified to:

if (yr - dv < 3) {

However, taking into consideration that the format could change, but assuming the year (if there at all) will always be the only 4 digit string in the value, I would go with something more like so:

<script>    
function three() {
var yr = new Date().getFullYear();  // current year
var dv = document.getElementById("midone").value.match(/\d{4}/);
if (dv && dv[0] && dv[0].length == 4 && yr - +dv[0] < 3) {
document.getElementById("extra").style.display = "block";
}
else {
document.getElementById("extra").style.display = "none";
}
}
</script>

[ianhaney]

Hi jscheuer1

Thank you so much for your help, I used the following coding of yours and works perfect, thank you so much

    <script>    
function three() {
var yr = new Date().getFullYear();  // current year
var dv = document.getElementById("midone").value.match(/\d{4}/);
if (dv && dv[0] && dv[0].length == 4 && yr - +dv[0] < 3) {
document.getElementById("extra").style.display = "block";
}
else {
document.getElementById("extra").style.display = "none";
}
}
</script>