• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 97
  • Last Modified:

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?
0
street9009
Asked:
street9009
  • 5
  • 3
  • 2
3 Solutions
 
Ryan ChongCommented:
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?
0
 
street9009Author Commented:
No, there's no jQuery or Javascript changing input values.
0
 
Ryan ChongCommented:
try share your codes here for verification
1
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
street9009Author 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

0
 
Ryan ChongCommented:
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

0
 
Julian HansenCommented:
Where is your form element? Does it wrap all the content?
0
 
street9009Author 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.
0
 
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.
0
 
street9009Author 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.
0
 
street9009Author Commented:
The issue, as I described it, wasn't an issue.
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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