Year only dropdown in the form fields

How To
1

Is it possible to use Javascript in form fields? I am looking to have a select that would display only the year details. I tried using this javascript code, but it didnt work.

<script>
  let dateDropdown = document.getElementById('gibfdx'); 
  let currentYear = new Date().getFullYear();    
  let earliestYear = 1970;     
  while (currentYear >= earliestYear) {      
    let dateOption = document.createElement('option');          
    dateOption.text = currentYear;      
    dateOption.value = currentYear;        
    dateDropdown.add(dateOption);      
    currentYear -= 1;    
  }
</script>

gibfdx is my form select field id.

Thanks in advance

2

Hi @samshik ,

You should change the first line to
let dateDropdown = document.getElementById('form-field-gibfdx');

However, I would suggest you to use PHP.
Create this in your child theme, then use {echo:my_years} on the dropdown options inside builder.
(Only works if you are in 1.9)

image
image356×613 13.2 KB

function my_years() {
	// Out put all years since 1970 until current year, each of them have a breakline after it
	$years = range( date( 'Y' ), 1970 );
	$years = array_reverse( $years ); // optional
	$years = array_map( function ( $year ) {
		return $year;
	}, $years );
	$years = implode( PHP_EOL, $years );
	
	return $years;
}