PHP - Form Posts not getting updated input values (getting initial values only)

So this one is about the weirdest thing I've ever seen, but let me try to explain. I have a web page set up with multiple accordions (like these, I used this exact code): https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol.

Inside each of those accordions is a grid layout, like this one: http://www.marcorpsa.com/ee/t2716.html

Inside each grid are two inputs (uniquely named across the entire page - no repeats). When I submit the form, none of them are submitting their updated values, except for the inputs in the grids in the last accordion. If I do a var_dump($_POST), I see where the inputs are being submitted, but they don't reflect any values that were put in by the user into them (they're just submitting whatever was in them when the page loaded).

Does anyone have any ideas why this could be happening and what in the world to do to fix?
street9009IT Project ManagerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
if var_dump($_POST) can see all variables but not all of them got values, it probably mean some of the input values were being cleaned up before posting to your php backend.

can you verify the front end if you got any jQuery/Javascript that cleaned up the input values?
street9009IT Project ManagerAuthor Commented:
No, there's no jQuery or Javascript changing input values.
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
try share your codes here for verification
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

street9009IT Project ManagerAuthor Commented:
Sure. Here's a sample. I can change inputs in the Group 2 accordion and they pass through. But I can't get changed inputs from Group 1.
<style>
button.accordion {
    background-color: #95989A;
    color: #FFFFFF;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 13pt;
    transition: 0.4s;
	text-transform:uppercase;
	margin-bottom:10px;
}

button.accordion.active, button.accordion:hover {
    background-color: #95989A;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.grid-container {
	margin-left: -0px;
	margin-right: -0px;
}
.grid-container:after {
	display: table;
	clear: both;
	content: " ";
}
.grid {
	width: 220px;
	min-height: 500px;
	margin: 0px;
	float: left;
	box-sizing: border-box;
	padding: 0px;
	max-width:220px;
	text-align:center;
}
.grid-container.styled .grid {
	/*border: 1px solid #d2d3d4;
	box-shadow: 2px 2px 10px rgba(0,0,0,.5);*/
}
.text-center {
	text-align: center;
}

.fixedElement {
    position:fixed;
    top:110;
    width:100%;
    z-index:100;
	background-color:#E9E9E9;
}
</style>

<button class="accordion" type="button"><a name="Group1"></a>Group 1</button>
<div class="panel">
	<div class="grid-container styled">
		<div class='grid'>
		Text inside grid 1
		Input #1: <input tabindex=1 type='text' size='4' name='item1_input1' id="item1_input1" value=''>&nbsp;&nbsp; Input #2: <input tabindex=1 type='text' size='4' name='item1_input2' id='item1_input2' value='TEST'>						
		</div>
		<div class='grid'>
		Text inside grid 2
		Input #1: <input tabindex=2 type='text' size='4' name='item2_input1' id='item2_input1' value=''>&nbsp;&nbsp; Price: <input tabindex=2 type='text' size='4' name='item2_input2' id='item2_input2' value='TEST'>						
		</div>
	</div>
</div>
<button class="accordion" type="button"><a name="Group2"></a>Group 2</button>
<div class="panel">
	<div class="grid-container styled">
		<div class='grid'>
		Text inside grid 1
		Input #1: <input tabindex=1 type='text' size='4' name='item3_input1' id="item3_input1" value=''>&nbsp;&nbsp; Input #2: <input tabindex=1 type='text' size='4' name='item3_input2' id='item3_input2' value='TEST'>						
		</div>
		<div class='grid'>
		Text inside grid 2
		Input #1: <input tabindex=2 type='text' size='4' name='item4_input1' id='item4_input1' value=''>&nbsp;&nbsp; Price: <input tabindex=2 type='text' size='4' name='item4_input2' id='item4_input2' value='TEST'>						
		</div>
	</div>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

$(document).ready(function () {
    $('#select-anchor').change( function () {
        var targetPosition = $($(this).val()).offset().top;
        $('html,body').animate({ scrollTop: targetPosition}, 'slow');
    });
});

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed)
  {
    $('.fixedElement').css({'position': 'static', 'top': '0px'}); 
  } 
});

$(function() {
	$('button').click(function() {
		var height = $('.grid').outerHeight();
		console.log(height);
		if (this.id == 'up') {
		console.log('up');
			height = height * 1.1;
			console.log(height);
			$('.grid').css({height: height + 'px'});
			$('.grid').css({width: height + 'px'});
		}
		else {
			console.log('smaller');
			height = height / 1.1;
			console.log(height);
			$('.grid').css({height: height + 'px'});
			$('.grid').css({width: height + 'px'});
		}
	});
});
</script>

Open in new window

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
it seems nothing wrong... i can get what was posted in var_dump.

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST') {
  var_dump($_POST);
  }

?>

<script
			  src="https://code.jquery.com/jquery-3.2.1.js"
			  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
			  crossorigin="anonymous"></script>

<style>
  button.accordion {
  background-color: #95989A;
  color: #FFFFFF;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 13pt;
  transition: 0.4s;
  text-transform:uppercase;
  margin-bottom:10px;
  }

  button.accordion.active, button.accordion:hover {
  background-color: #95989A;
  }

  button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  }

  button.accordion.active:after {
  content: "\2212";
  }

  div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  }

  .grid-container {
  margin-left: -0px;
  margin-right: -0px;
  }
  .grid-container:after {
  display: table;
  clear: both;
  content: " ";
  }
  .grid {
  width: 220px;
  min-height: 500px;
  margin: 0px;
  float: left;
  box-sizing: border-box;
  padding: 0px;
  max-width:220px;
  text-align:center;
  }
  .grid-container.styled .grid {
  /*border: 1px solid #d2d3d4;
  box-shadow: 2px 2px 10px rgba(0,0,0,.5);*/
  }
  .text-center {
  text-align: center;
  }

  .fixedElement {
  position:fixed;
  top:110;
  width:100%;
  z-index:100;
  background-color:#E9E9E9;
  }
</style>

<form method="post">

<button class="accordion" type="button">
  <a name="Group1"></a>Group 1
</button>
<div class="panel">
  <div class="grid-container styled">
    <div class='grid'>
      Text inside grid 1<br>
      Input #1: <input tabindex='1' type='text' size='4' name='item1_input1' id="item1_input1" value=''>
        &nbsp;&nbsp; Input #2: <input tabindex='1' type='text' size='4' name='item1_input2' id='item1_input2' value='Group 1 input 1'>						
		</div>
    <div class='grid'>
      Text inside grid 2<br>
      Input #1: <input tabindex='2' type='text' size='4' name='item2_input1' id='item2_input1' value=''>
        &nbsp;&nbsp; Price: <input tabindex='2' type='text' size='4' name='item2_input2' id='item2_input2' value='Group 1 input 2'>						
		</div>
  </div>
</div>
<button class="accordion" type="button">
  <a name="Group2"></a>Group 2
</button>
<div class="panel">
  <div class="grid-container styled">
    <div class='grid'>
      Text inside grid 1<br>
      Input #1: <input tabindex='1' type='text' size='4' name='item3_input1' id="item3_input1" value=''>
        &nbsp;&nbsp; Input #2: <input tabindex='1' type='text' size='4' name='item3_input2' id='item3_input2' value='Group 2 input 1'>						
		</div>
    <div class='grid'>
      Text inside grid 2<br>
      Input #1: <input tabindex='2' type='text' size='4' name='item4_input1' id='item4_input1' value=''>
        &nbsp;&nbsp; Price: <input tabindex='2' type='text' size='4' name='item4_input2' id='item4_input2' value='Group 2 input 2'>						
		</div>
  </div>
</div>


  <input id="Submit1" type="submit" value="submit" />
</form>

<script>
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

$(document).ready(function () {
    $('#select-anchor').change( function () {
        var targetPosition = $($(this).val()).offset().top;
        $('html,body').animate({ scrollTop: targetPosition}, 'slow');
    });
});

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){
  $('.fixedElement').css({'position': 'fixed', 'top': '0px'});
  }
  if ($(this).scrollTop() < 200 && isPositionFixed)
  {
  $('.fixedElement').css({'position': 'static', 'top': '0px'});
  }
  });

  $(function() {
  $('button').click(function() {
  var height = $('.grid').outerHeight();
  console.log(height);
  if (this.id == 'up') {
  console.log('up');
  height = height * 1.1;
  console.log(height);
  $('.grid').css({height: height + 'px'});
  $('.grid').css({width: height + 'px'});
  }
  else {
  console.log('smaller');
  height = height / 1.1;
  console.log(height);
  $('.grid').css({height: height + 'px'});
  $('.grid').css({width: height + 'px'});
  }
  });
  });
</script>

Open in new window

Julian HansenCommented:
Where is your form element? Does it wrap all the content?
street9009IT Project ManagerAuthor Commented:
Hey Julian,

Yes, it does.

The code above is an excerpt from the live page (it's much larger) so I had to mock something smaller up.
Julian HansenCommented:
Can you point your form at a reflect script
<?php
echo "<pre>" . print_r($_POST, true) . "</pre>";
echo "<pre>" . print_r($_GET, true) . "</pre>";
?>

Open in new window

And check what is being represented there.
street9009IT Project ManagerAuthor Commented:
Turns out there were hidden fields on the page that I hadn't noticed that were overriding the inputs on the form. I'm closing this question and splitting the points but wanted to let everyone that comes by here know that there actually was no problem.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
street9009IT Project ManagerAuthor Commented:
The issue, as I described it, wasn't an issue.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.