Cacher is the code snippet organizer for pro developers

other JS ref: 
http://stackoverflow.com/questions/12080098/dropdown-using-javascript-onchange

<?php

/* Template Name: Homepage v2 / One Pager */

?>

<?php
$post = $wp_query->post;

get_header();	
	if (have_posts()) : while (have_posts()) : the_post();
?>

<script>		
	/*
	On page load load the first set of values:	
	*/
	var variableFromPhp = "<?php the_field('market_sales_1')   ; ?>";
	console.log("VALUE FROM POSTS: " + variableFromPhp);
		
	window.onload=function( variableFromPhp ) {
		
		// 1) Bind the onchange event handler to the dropdown
		// 2) Detect change in the dropdown values and update values via the "switchme" function line 72
		document.getElementById("selection").onchange = function() { 
			switchme(this); // pass 'this' current element to the switchme function
		}  
	
		console.log("VALUE FROM ON LOAD: " + variableFromPhp);	
		// GET INITIAL VALUES ON PAGE LOAD
		var market_sales_1 = "<?php  the_field('market_sales_1') ; ?>";
		var market_size_1 = "<?php  the_field('market_size_1') ; ?>";
		var market_avg_1 = "<?php  the_field('market_avg_1') ;  ?>";
		var market_lease_1 = "<?php  the_field('market_lease_1') ;  ?>";
		var market_title_1 = "<?php  the_field('market_title_1') ; ?>";
		var market_data_text_1 = "<?php the_field('market_data_1_text') ;  ?>";
		
		
		  // SET INITIAL VALUES ON PAGE LOAD (1st Option)
		
		document.getElementById('market_data').innerHTML = market_data_text_1;
		document.getElementById('pText').innerHTML = market_title_1;
		document.getElementById('TextField1').value = market_sales_1 ;
		document.getElementById('TextField2').value = market_size_1 ;
		document.getElementById('TextField3').value = '$' + market_avg_1 ;
		document.getElementById('TextField4').value = '$' + market_lease_1;
		
		/* POPULATE ARROWS (1st Option) 
			if this option is not set, "Down" arrow will be the default,
			only if its set it will use "Up" arrow
		*/
		var  market_size = "<?php  if ( get_field('arrow_market_size_1') ) echo 'up selected' ; ?>" ;
		show_arrow( market_size, 'market_data_arrow_size'  ) ;	 
		
		var  market_sales = "<?php  if ( get_field('arrow_market_sales_1') ) echo 'up selected' ; ?>" ;
		show_arrow( market_sales, 'market_data_arrow_sales' ) ;
		
		var  market_avg = "<?php  if ( get_field('arrow_market_avg_1') ) echo 'up selected' ; ?>" ;
		show_arrow( market_avg, 'market_data_arrow_avg' ) ;
		
		var  market_lease = "<?php  if ( get_field('arrow_market_lease_1') ) echo 'up selected' ; ?>" ;
		show_arrow( market_lease, 'market_data_arrow_lease' ) ;
	

    } // END window.onload
    
    
/*=========================================================
	SWITCH VALUES BASED ON DROP-DOWN VALUE
=========================================================*/
 function switchme(SNewSel) { 
	 /*  test if can receive values
 	var variableFromPhp = "<?php the_field('market_sales_1')   ; ?>";
 	console.log("VALUE FROM FUNCTION: " + variableFromPhp);	
	 
	*/ 
	 var market_index = SNewSel.selectedIndex;  // get index value from "Select Market" dropdown
	 
	 // this is used to simplify the names for these fields, we use these on each case
	 var txt1 = document.getElementById('TextField1'); 
	 var txt2 = document.getElementById('TextField2');
	 var txt3 = document.getElementById('TextField3');
	 var txt4 = document.getElementById('TextField4');
	 

	 switch (market_index) { 
	  case 1: //  Market Data 1
	  	  // Update the values here
		  txt1.value = "<?php  the_field('market_sales_1') ; ?>";
		  txt2.value = "<?php  the_field('market_size_1') ; ?>"; 
		  txt3.value = "$<?php  the_field('market_avg_1') ; ?>"; 
		  txt4.value = "$<?php  the_field('market_lease_1') ; ?>"; 

		  var  market_size = "<?php  if ( get_field('arrow_market_size_1') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_size, 'market_data_arrow_size'  ) ;

		  var  market_sales = "<?php  if ( get_field('arrow_market_sales_1') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_sales, 'market_data_arrow_sales' ) ;

		  var  market_avg = "<?php  if ( get_field('arrow_market_avg_1') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_avg, 'market_data_arrow_avg' ) ;

		  var  market_lease = "<?php  if ( get_field('arrow_market_lease_1') ) echo 'up selected' ; ?>" ;
		   show_arrow( market_lease, 'market_data_arrow_lease' ) ;


          document.getElementById('pText').innerHTML = "<?php the_field('market_title_1') ;  ?>" ;
          document.getElementById('market_data').innerHTML = "<?php the_field('market_data_1_text') ;  ?>";
		  break; 


	  case 2: //  Market Data 2
		  txt1.value = "<?php  the_field('market_sales_2') ; ?>";
		  txt2.value = "<?php  the_field('market_size_2') ; ?>"; 
		  txt3.value = "$<?php  the_field('market_avg_2') ; ?>"; 
		  txt4.value = "$<?php  the_field('market_lease_2') ; ?>"; 


		  var  market_size = "<?php  if ( get_field('arrow_market_size_2') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_size , 'market_data_arrow_size' ) ;

		  var  market_sales = "<?php  if ( get_field('arrow_market_sales_2') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_sales, 'market_data_arrow_sales' ) ;

		  var  market_avg = "<?php  if ( get_field('arrow_market_avg_2') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_avg, 'market_data_arrow_avg' ) ;

		  var  market_lease = "<?php  if ( get_field('arrow_market_lease_2') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_lease, 'market_data_arrow_lease' ) ;

      	  document.getElementById('pText').innerHTML = "<?php the_field('market_title_2') ;  ?>";
          document.getElementById('market_data').innerHTML = "<?php the_field('market_data_2_text');  ?>";
		  break; 


	  case 3: //  Market Data 3
		  txt1.value = "<?php  the_field('market_sales_3') ; ?>";
		  txt2.value = "<?php  the_field('market_size_3') ; ?>"; 
		  txt3.value = "$<?php  the_field('market_avg_3') ; ?>"; 
          txt4.value = "$<?php  the_field('market_lease_3') ; ?>"; 

		  var  market_size = "<?php  if ( get_field('arrow_market_size_3') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_size, 'market_data_arrow_size' ) ;

		  var  market_sales = "<?php  if ( get_field('arrow_market_sales_3') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_sales, 'market_data_arrow_sales' ) ;

		  var  market_avg = "<?php  if ( get_field('arrow_market_avg_3') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_avg, 'market_data_arrow_avg' ) ;

		  var  market_lease = "<?php  if ( get_field('arrow_market_lease_3') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_lease, 'market_data_arrow_lease' ) ;

          document.getElementById('pText').innerHTML = "<?php the_field('market_title_3') ;  ?>";
          document.getElementById('market_data').innerHTML = "<?php the_field('market_data_3_text') ; ?>";
     
		 break; 


	  case 4: //  Market Data 4
		  txt1.value = "<?php  the_field('market_sales_4') ; ?>";
		  txt2.value = "<?php  the_field('market_size_4') ; ?>"; 
		  txt3.value = "$<?php  the_field('market_avg_4') ; ?>"; 
          txt4.value = "$<?php  the_field('market_lease_4') ; ?>"; 

		  var  market_size = "<?php  if ( get_field('arrow_market_size_4') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_size, 'market_data_arrow_size' ) ;

		  var  market_sales = "<?php  if ( get_field('arrow_market_sales_4') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_sales, 'market_data_arrow_sales' ) ;

		  var  market_avg = "<?php  if ( get_field('arrow_market_avg_4') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_avg, 'market_data_arrow_avg' ) ;

		  var  market_lease = "<?php  if ( get_field('arrow_market_lease_4') ) echo 'up selected' ; ?>" ;
		  show_arrow( market_lease, 'market_data_arrow_lease' ) ;

          document.getElementById('pText').innerHTML = "<?php the_field('market_title_4') ;  ?>";
          document.getElementById('market_data').innerHTML = "<?php the_field('market_data_4_text') ; ?>";
     
		 break; 	 
	  default: 

	 break; 
	 } 
} // END switchme function


/*===============================================================
	SHOW ARROW 
    - first parameter: custom field value ( checks if its empty)
    - second parameter: DIV ID
===============================================================*/

function show_arrow( market_type, market_id ) {
		  if( market_type)  { 
		  	return document.getElementById(market_id).innerHTML = '<img src="http://popbetaserver.com/projects/casal/wp-content/uploads/2015/09/up.png">'; 
		  }
		  else { 
		  	return document.getElementById(market_id).innerHTML = '<img src="http://popbetaserver.com/projects/casal/wp-content/uploads/2015/09/down.png">'; 
		  }	
}
		
</script>



<div id="th_onepage_wrapper">
		<?php the_content(); 	?>
</div>
		<?php
	    endwhile; endif;   

get_footer(); 
 
?>



<!-- THE HTML THAT GOES IN THE FORM   -->
<h1>MARKET DATA</h1>

<p id="market_data"></p>


<div id="pText"></div>
<form action="" method="get" id="myform"> 
	<div class="selection_data_cont">
		<div class="text_size">
                <div id="market_data_arrow_size">
                </div>
			<input disabled="disabled" id="TextField1" name="TextField1" type="text" value="">
			<div class="text_desc">SIZE (SF)</div>
		</div>

		<div class="text_sales">
                <div id="market_data_arrow_sales">
                </div>
			<input disabled="disabled" id="TextField2" name="TextField2" type="text" value="">
			<div class="text_desc">SALES SIZES (AVG)</div>
		</div>

		<div class="text_avg">
                        <div id="market_data_arrow_avg">
                        </div>
			<input disabled="disabled" id="TextField3" name="TextField3" type="text" value="">
			<div class="text_desc">AVG PRICES (PER SF)</div>
		</div>

		<div class="text_lease">
                        <div id="market_data_arrow_lease">
                        </div>
			<input disabled="disabled" id="TextField4" name="TextField4" type="text" value="">
			<div class="text_desc">LEASE RATE (AVG)</div>
		</div>

	</div>

	<div class="selection_cont">
                <div class="select_market">SELECT MARKET</div>
		<select name="selection" id="selection"> 
			<option value="Choose One" disabled="">Select Market</option>  
			<option value="1">Miami International</option> 
			<option value="2">Dolphin International</option> 
			<option value="3">Kendall International</option>
            <option value="4">Doral International</option>  
		</select> 
	</div>

</form>