Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 487
  • Last Modified:

Update Hidden form field using javascript

How do I update hidden fields in a form. I have the following html code near the top of the BODY:
<div style="margin-left: 25px; padding-top: 10px;">
			<form action="<?php echo $arch_config['portfolio_url'] . "print_html.php" ?>" method="GET" name="hidden_form">
    		<input type="hidden" name="order" id="hidden_order" value='Alphabetical' />
    		<input type="hidden" name="filters[state]" id="hidden_state" value="" />
    		<input type="hidden" name="filters[county]" id="hidden_county" value="" />
    		<input type="hidden" name="filters[city]" id="hidden_city" value="" />
    		<input type="hidden" name="filters[denomination]" id="hidden_denomination" value="" />
    		<input type="hidden" name="filters[service]" id="hidden_service" value="" />
    		<input type="hidden" name="filters[has_images]" id=hidden_has_images value="" />
				<input type="submit" value="Print Page" class="submit" target="_blank" />
			</form>
		</div>

.
.
.
Near the bottom of the BODY area I have this code:

document.getElementById("hidden_order").value = "0";
document.getElementById("hidden_state").value = "New Jersey";
document.getElementById("hidden_county").value = "";
document.getElementById("hidden_city").value = "";
document.getElementById("hidden_denomination").value = "Baptist";
document.getElementById("hidden_service").value = "";
document.getElementById("hidden_has_images").value = "";


In between these two pieces of code, there is javascript that is updating other form elements during the page load. I am wanting to put the results of this 'middle' code into the form hidden fields located at the top of the page.

What am I doing wrong?

Open in new window

0
dnotestine
Asked:
dnotestine
  • 3
  • 3
1 Solution
 
GeoffHarperCommented:
Can you post the whole file?  I don't see anything wrong with the excerpts you posted.
0
 
dnotestineAuthor Commented:
It wouldn't allow me to post the page so it is included as an attachment
<?php
	global $title;
	$title = "Portfolio";

	// Read current limit
	$limit = clean_input_by_array( $_GET['limit'], array( 10, 25, 50 ), 25 );

	// Read current page
	$page = clean_input_as_integer( $_GET['page'], 1 );


	$filters = clean_input_as_string_by_hash( $_GET['filters'], array( 'service', 'state', 'county','city', 'has_images', 'denomination' ) );

	$order = clean_input_as_string_by_array( $_GET['order'], array( 'name', 'city', 'state', 'year' ) );
	$order_string = implode( ',', $order);
	
	if( $order[ count($order) - 1 ] != 'name' ) $order[] = 'name';


	// $churches = get_churches( $limit, $page, $order,  $filters );
	
	$locations = get_states_cities_and_counties();
	$locations_json = json_encode($locations);
	
	$denominations = get_denominations();
	
	$services = get_amenities();

	?>
		<script type="text/javascript" charset="utf-8">
			var locations_obj = <?php echo $locations_json ?>;
			var locations = [];
			for(var loc in locations_obj){
				locations.push(locations_obj[loc]);
			};
		</script>
		<h1 id='port-title'>Portfolio &amp; Installation List</h1>
		
		<form id="filter-sort-block" action="<?php echo $arch_config['portfolio_url'] ?>" method="get" class="no_js">
			<fieldset id="sort">
				<h2>Sort</h2>
				<select name="order" id='sort-order'>
					<?php select_option('name','Alphabetical', $order_string) ?>
				</select>
				<input type="submit" value="Sort" class="submit" />
				<div id="ajax-loading">
					<img src='<?php echo $arch_config['portfolio_url'] ?>images/ajax-indicator-dk.gif' width="31" height="31" />
				</div>
			</fieldset>
			<fieldset id="filter">
				<h2>Filter</h2>
				<div id="filter-one" class="column">
					<label id="state_filter">
						<strong>State</strong>
						<select name="filters[state]" id='church_state'>
							<option value=""></option>
							<?php $selected_state = ""; ?>
							<?php foreach($locations as $location) : ?>
								<?php $selected_state = select_option($location['name'], $location['name'], $filters['state']) ?>
								<?php if ($selected_state != ""){$selected_state_final = $selected_state;}
								?>
							<?php endforeach; ?>
						</select>
					</label>
					<label id="county_filter" class="disabled">
						<strong>County</strong>
						<select name="filters[county]" id="church_state_counties" disabled="disabled">
							<option selected="selected"></option>
						</select>
					</label>
					<label id="city_filter" class="disabled">
						<strong>City</strong>
						<select name="filters[city]" id="church_state_cities" disabled="disabled">
							<option selected="selected"></option>
						</select>
					</label>
				</div>
				<div id="filter-two" class="column">
					<label id="denomination_filter">
						<strong>Denomination</strong>
						<select name="filters[denomination]" id="church_denomination">
							<?php foreach($denominations as $denomination) : ?>
								<?php select_option($denomination, $denomination, $filters['denomination']) ?>
							<?php endforeach; ?>
						</select>
					</label>
					<label id="services_filter"><strong>Services</strong>
						<select name="filters[service]" id="church_amenities">
							<option value=""></option>
							<?php foreach($services as $service) : ?>
								<?php select_option($service->id, $service->name, $filters['service']) ?>
							<?php endforeach; ?>
						</select>
					</label>
					<label id="images_filter">
						<strong>Photos</strong>
						<select name="filters[has_images]" id="church_photos">
							<option value=""></option>
							<?php select_option('1','Only With Photos', $filters['has_images']) ?>
						</select>
					</label>
				</div>
					
				<div class="action_row">
					<input type="submit" value="Filter" class="submit"  />
				</div>
			</fieldset>
		</form>
		

		<div style="margin-left: 25px; padding-top: 10px;">
			<form action="<?php echo $arch_config['portfolio_url'] . "print_html.php" ?>" method="GET" name="hidden_form">
    		<input type="hidden" name="order" id="hidden_order" value='Alphabetical' />
    		<input type="hidden" name="filters[state]" id="hidden_state" value="" />
    		<input type="hidden" name="filters[county]" id="hidden_county" value="" />
    		<input type="hidden" name="filters[city]" id="hidden_city" value="" />
    		<input type="hidden" name="filters[denomination]" id="hidden_denomination" value="" />
    		<input type="hidden" name="filters[service]" id="hidden_service" value="" />
    		<input type="hidden" name="filters[has_images]" id=hidden_has_images value="" />
				<input type="submit" value="Print Page" class="submit" target="_blank" />
			</form>
		</div>

		<!-- 
<input type="button" value="Print" onClick="request_print(page, true);">
		 -->
		 
		<!-- <form name="myform" action="">
<input type="button" value="Print" onClick="request_print(page, true);">
			<a href="javascript: request_print(page, true);">Print</a>
		</form> -->
		
	<?php

	//get_churches_paging( $limit, $page, $filters );
	
	$pagerLayout = new Doctrine_Pager_Layout(
	      new Doctrine_Pager(
	            get_churches_query($order, $filters),
	            $page,
	            $limit
	      ),
	      new Doctrine_Pager_Range_Sliding(array(
	            'chunk' => 30
	      )),
	      $arch_config['portfolio_url'] . '?page={%page_number}'
	);
	
	$pagerLayout->setTemplate('<a href="{%url}"><em>{%page}</em></a>');
	$pagerLayout->setSelectedTemplate('<span><em>{%page}</em></span>');
	
	$pager = $pagerLayout->getPager();
	
	$churches = $pager->execute();
	
	
	?>
	<div id="church-portfolio-wrapper">
	<div class="pagination">
		<?php $pagerLayout->display() ?>
	</div>
	<ul id="church-portfolio" class="no_js">
		
	<?php
	foreach($churches as $church):
		include 'includes/_church.php';
	endforeach; 
	?>
	
	</ul>
	<div class="pagination">
		<?php $pagerLayout->display() ?>
	</div>
	</div>
		<span class="clear">&nbsp;</span>
		
		
		
		<!--[if lte IE 7]>
		<link rel="stylesheet" href="<?php echo $arch_config['portfolio_url'] ?>css/ie.css" type="text/css" />
		<![endif]-->
		<!--[if lte IE 6]>
		<link rel="stylesheet" href="<?php echo $arch_config['portfolio_url'] ?>css/ie6.css" type="text/css" />
		<![endif]-->
		<!-- <script type='text/javascript' 
		        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> -->
		        
		<script src="<?php echo $arch_config['portfolio_url'] ?>js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="<?php echo $arch_config['portfolio_url'] ?>js/jquery.history.js" type="text/javascript" charset="utf-8"></script>
		<script src="<?php echo $arch_config['portfolio_url'] ?>js/jquery.scrollTo-min.js" type="text/javascript" charset="utf-8"></script>
		<script src="<?php echo $arch_config['portfolio_url'] ?>js/push-pop.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript" charset="utf-8">
			var cache = {};
			var updating_state = false;
			var updating_county = false;
			var history_writing = false;
			$(document).ready(function(){
				
				$("#church-portfolio li").live("click", function(e){
					window.location = $(this).find("a").attr("href");
					e.preventDefault();
				});
				$("#church-portfolio.no_js, #filter-sort-block.no_js").removeClass("no_js");
				
				$("#church_state").change(function(e){
					set_state(this.selectedIndex,false);
				});
				
				$("#church_state_counties").change(function(e){
					if (updating_state) return;
					set_county(this.selectedIndex,false);
				});
				
				$("#church_state_cities").change(function(e){
					if (updating_state || updating_county) return;
					request_update();
				})
				
				
				$.History.bind(function(state){
					if(state != ""){
						reset_from_history(state);	
					} else {
						reset_from_history('o0-s0-c0-y0-d0-a0-i0-p1');
					}	
				});
				
				$("div.pagination:eq(0) a").live("click", function(e){
					e.preventDefault();
					var href = $(this).attr('href');
					var matches = href.match(/page=(\d+)$/);
					if(matches && matches.length == 2){
						request_update(parseInt(matches[1]));
					};
				})
				
				$("div.pagination:eq(1) a").live("click", function(e){
					e.preventDefault();
					var href = $(this).attr('href');
					var matches = href.match(/page=(\d+)$/);
					if(matches && matches.length == 2){
						$(window)._scrollable().scrollTo($("#port-title"), 300, {
							onAfter:function(){
								request_update(parseInt(matches[1]));
							}
						});
					};
				});
				
				
				$("#filter-sort-block")[0].reset();
				$("#filter-sort-block").submit(function(e){
					e.preventDefault();
					request_update();
					return false;
				}).find("select:not(#church_state,#church_state_counties,#church_state_cities)").change(function(e){
					if(history_writing) return;
					request_update();
				});
			});
			
			function build_history_string(page){
				if(!page) page = 1;
				var key = "";
				key += "o" + $("#sort-order")[0].selectedIndex + "-";
				key += "s" + $("#church_state")[0].selectedIndex + "-";
				key += "c" + $("#church_state_counties")[0].selectedIndex + "-";
				key += "y" + $("#church_state_cities")[0].selectedIndex + "-";
				key += "d" + $("#church_denomination")[0].selectedIndex + "-";
				key += "a" + $("#church_amenities")[0].selectedIndex + "-";
				key += "i" + $("#church_photos")[0].selectedIndex + "-";
				key += "p" + page;
				
				return key;
			}
			
			function set_county(index, update, city_id){
				updating_county = true;
				var state_id = $("#church_state")[0].selectedIndex;
				if(!state_id) state_id = 0;
				if(!city_id) city_id = 0;
				
				if(state_id == 0){
					$("#church_state_counties").empty().append("<option></option>")[0].selectedIndex = 0;
					$("#church_state_counties").val('').attr('disabled','disabled').blur();
					$("#county_filter").addClass('disabled');
				} else if (update) {
					state_id = state_id - 1; // Account for the difference in indexes
					var state = locations[state_id]; // Convert index to string
					var counties = state.counties;
					var cnty_str = "";
					if(counties.length > 1){
						cnty_str += "<option></option>";
					};
					for(var i = 0; i<counties.length; i++){
						var county = counties[i];
						cnty_str += '<option value="' + county.name + '">' + county.name + '</option>';
					};
					
					$("#church_state_counties").empty().append(cnty_str)[0].selectedIndex = index;
					$("#church_state_counties").removeAttr('disabled');
					$("#county_filter").removeClass('disabled');
				}
				
				set_city(city_id);
				updating_county = false;
				if(!updating_state) request_update();
			}
			
			function set_city(index){
				
				var state_id = $("#church_state")[0].selectedIndex;
				if(!state_id) state_id = 0;
				
				var county_id = $("#church_state_counties")[0].selectedIndex;
				if(!county_id) county_id = 0;
				
				if(state_id == 0){
					$("#church_state_cities").empty().append("<option></option>")[0].selectedIndex = 0;
					$("#church_state_cities").val('').attr('disabled','disabled').blur();
					$("#city_filter").addClass('disabled');
				} else if ( $("#church_state_counties").val() == ""){
					state_id = state_id - 1;
					var state = locations[state_id]; // Convert index to string
					var cities = state.cities;
					
					var city_str = "";
					
					if(cities.length > 1){
						city_str += "<option></option>";
					};
					
					for(var j = 0; j<cities.length; j++){
						var city = cities[j];
						city_str += '<option value="' + city + '">' + city + '</option>';
					};
					
					$("#church_state_cities").empty().append(city_str)[0].selectedIndex = index;
					$("#church_state_cities").removeAttr('disabled');
					$("#city_filter").removeClass('disabled');
					
				} else {
					// County selected
					state_id = state_id - 1; // Account for the difference in indexes
					var state = locations[state_id]; // Convert index to string
					var counties = state.counties;
					
					if(counties.length > 1) county_id = county_id - 1; // Account for difference in indexes
					
					var county = state.counties[county_id];
					var cities = county.cities;
					var city_str = "";
					
					if(cities.length > 1){
						city_str += "<option></option>";
					};
					
					for(var j = 0; j<cities.length; j++){
						var city = cities[j];
						city_str += '<option value="' + city + '">' + city + '</option>';
					};
					
					$("#church_state_cities").empty().append(city_str)[0].selectedIndex = index;
					$("#church_state_cities").removeAttr('disabled');
					$("#city_filter").removeClass('disabled');
				}
			}
			
			function set_state(index, update, county_id, city_id){
				updating_state = true;
				
				if(update !== false) update = true;
				if(!county_id) county_id = 0;
				if(!city_id) city_id = 0;
				
				index = parseInt(index);
				if(update) $("#church_state")[0].selectedIndex = index;
				
				set_county(county_id, true, city_id);
				
				updating_state = false;
				if(!history_writing) request_update();
			}
			
			function reset_from_history(key){
				history_writing = true;
				var matches = key.match(/^o(\d+)-s(\d+)-c(\d+)-y(\d+)-d(\d+)-a(\d+)-i(\d+)-p(\d+)$/);
				if(!matches) return;
				
				
				$("#sort-order")[0].selectedIndex			= parseInt(matches[1]);
				set_state(parseInt(matches[2]),true,parseInt(matches[3]),parseInt(matches[4]));
				$("#church_denomination")[0].selectedIndex  = parseInt(matches[5]); 
				$("#church_amenities")[0].selectedIndex		= parseInt(matches[6]);
				$("#church_photos")[0].selectedIndex		= parseInt(matches[7]);
				
				var page = parseInt(matches[8]);
				
				history_writing = false;
				
				
				
				request_update(page, false);
			}
			
			function request_update(page, set_history){

				if(!page) page = 1;	

				if(set_history !== false) set_history = true;

				var history_string = build_history_string(page);
				$(document.body).addClass("loading");
				if(set_history){
					$.History.setHash(history_string);
				} else {
					if(cache[history_string]){
						$("#church-portfolio-wrapper").replaceWith(cache[history_string]);
						$(document.body).removeClass("loading");
					} else {
						$.get('<?php echo $arch_config['portfolio_url'] ?>portfolio-browse.ajax.php?' + $("#filter-sort-block").serialize(),
							{page:page},
							function(data){
								cache[history_string] = data;
								$("#church-portfolio-wrapper").replaceWith(data);
								$(document.body).removeClass("loading");
							}
						);	
					}
				}
				
document.getElementById("hidden_order").value = "0";
document.getElementById("hidden_state").value = "New Jersey";
document.getElementById("hidden_county").value = "";
document.getElementById("hidden_city").value = "";
document.getElementById("hidden_denomination").value = "Baptist";
document.getElementById("hidden_service").value = "";
document.getElementById("hidden_has_images").value = "";

				
				
				
				
			}
			
		
		</script>
	<?php


?>

Open in new window

0
 
GeoffHarperCommented:
Those last few lines:

-------------------------------

);      
                              }
                        }
                        
document.getElementById("hidden_order").value = "0";
document.getElementById("hidden_state").value = "New Jersey";
document.getElementById("hidden_county").value = "";
document.getElementById("hidden_city").value = "";
document.getElementById("hidden_denomination").value = "Baptist";
document.getElementById("hidden_service").value = "";
document.getElementById("hidden_has_images").value = "";
                  }

-------------------------------

Delete that extraneous ");" - it's probably causing a JavaScript error.
Then move the closing bracket below the "document." lines to above the "document." lines,
so you end up with this:

-------------------------------
                              }
                        }
                        
                  }

document.getElementById("hidden_order").value = "0";
document.getElementById("hidden_state").value = "New Jersey";
document.getElementById("hidden_county").value = "";
document.getElementById("hidden_city").value = "";
document.getElementById("hidden_denomination").value = "Baptist";
document.getElementById("hidden_service").value = "";
document.getElementById("hidden_has_images").value = "";

-------------------------------


-Geoff
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
dnotestineAuthor Commented:
Thanks, but I don't think that was it. The structure tested OK. I cleaned up, just the function, so you could visualize it better

      function request_update(page, set_history){
            if(!page) page = 1;      
            if(set_history !== false) set_history = true;
            var history_string = build_history_string(page);
            $(document.body).addClass("loading");
            if(set_history){
                  $.History.setHash(history_string);
            } else {
                  if(cache[history_string]){
                        $("#church-portfolio-wrapper").replaceWith(cache[history_string]);
                        $(document.body).removeClass("loading");
                  } else {
                        $.get('<?php echo $arch_config['portfolio_url'] ?>portfolio-browse.ajax.php?' + $("#filter-sort-block").serialize(),
                              {page:page},
                              function(data){
                                    cache[history_string] = data;
                                    $("#church-portfolio-wrapper").replaceWith(data);
                                    $(document.body).removeClass("loading");
                              }
                        );      
                  }
            }
document.getElementById("hidden_order").value = "0";
document.getElementById("hidden_state").value = "New Jersey";
document.getElementById("hidden_county").value = "";
document.getElementById("hidden_city").value = "";
document.getElementById("hidden_denomination").value = "Baptist";
document.getElementById("hidden_service").value = "";
document.getElementById("hidden_has_images").value = "";
      }
0
 
GeoffHarperCommented:
Did you try it like I said?
0
 
dnotestineAuthor Commented:



AHHHHHHHHHHHHHHHHHHHHHH!!!

I'm an ass :-(

It worked perfectly - thanks for your help

Cheers
David
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now