我有两个输入字段，一个用于对半径进行排序。 我希望它能够工作，如果我设置排序，它应该保存并按照我选择的顺序重新提交，并且半径将以相同的方式工作，而不会让两个输入字段相互困惑。现在，无论我为半径设置什么，都会通过排序字段进行检查，即使它被作为值发布并显示在错误的输入下。 有人请检查一下并帮助我解决这个问题。 谢谢，我非常感谢任何有关此问题的帮助。
<head>
<meta charset="utf-8">
<title>Dropdown Menus</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#shortby').val($(this).data('val'));
$('#order').submit();
});
});
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#radius').val($(this).data('val'));
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="index.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul>
<li data-val="10"> <a href="#" >10</a></li>
<li data-val="20"> <a href="#" >20</a></li>
<li data-val="30"> <a href="#" >30</a></li>
<li data-val="40"> <a href="#" >40</a></li>
<li data-val="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
最佳答案
看到问题是您设置了相同的数据，即两种情况下的 val 。检查以下内容
<script type="text/javascript">
$(document).ready(function($) {
$('input#shortby').val(<?php echo (isset($_POST['shortby'])) ? json_encode($_POST['shortby']) : ''; ?>);
$('input#radius').val(<?php echo (isset($_POST['radius'])) ? json_encode($_POST['radius']) : ''; ?>);
$('ul li').on('click', function() {
var shortbyVal, radiusVal;
if($(this).data('val') === undefined){
radiusVal = $(this).data('val2');
shortbyVal = $('input#shortby').val();
}
else if($(this).data('val2') === undefined){
shortbyVal = $(this).data('val');
radiusVal = $('input#radius').val();
}$('input#shortby').val(shortbyVal);
$('input#radius').val(radiusVal);
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="1.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul> <!-- Observe the change in data-val to data-val2 -->
<li data-val2="10"> <a href="#" >10</a></li>
<li data-val2="20"> <a href="#" >20</a></li>
<li data-val2="30"> <a href="#" >30</a></li>
<li data-val2="40"> <a href="#" >40</a></li>
<li data-val2="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
这应该是一个很好的解决方法
关于javascript - JQuery 输入表单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27690223/