Question

我有两个输入字段，一个用于为半径排序一个。我希望它工作，如果我设置sortby它应该保存并重新提交我选择的顺序，并且radis将以相同的方式工作，而不会让两个输入字段相互搞乱。现在，无论我为radius设置的是sortby字段，都会将其作为值发布并显示在错误的输入下。有人请仔细看看，帮我解决这个问题。谢谢，我真的很感激这个问题的任何帮助。

<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>

Answer 1

看到的问题是你在设置相同的数据，即在两种情况下都是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>

这应该是一个很好的解决方法

JQuery输入表单不起作用

1 个答案: