JQuery輸入表格不起作用

我有兩個輸入字段，一個用於排序一個半徑。我希望它工作，如果我設置sortby它應該保存並重新提交我選擇的順序，並且radis將以相同的方式工作，而不會讓兩個輸入字段彼此混淆。現在，無論我爲radius設置什麼，都會通過sortby字段進行檢查，即使它作爲值發佈並顯示在錯誤的輸入下。有人請看看它並幫我解決這個問題。謝謝，我真的很感謝任何幫助解決這個問題。JQuery輸入表格不起作用

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

來源

2014-12-29 Tibby

一個很好的解決方法僅供參考：''和'<？php echo $ _POST ['radius']; ？>容易受到反射XSS攻擊 – Lorenz

那麼你會提出什麼建議？ – Tibby

看看https://stackoverflow.com/questions/129677/whats-the-best-method-for-sanitizing-user-input-with-php/130323#130323 – Lorenz

看到的問題是你設置了相同的數據，即在這兩種情況下都是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>

這應該是對於

來源

2014-12-29 14:18:19 Maxzeroedge

我修改了它，但仍然有些東西錯誤。第一個輸入工作正常，但第二個輸入不會自動更改，並在提交時清除第一個輸入的值。 – Tibby

實際上，問題在於您正在調用POST變量。當你點擊其中一個shortby時，POST ['shortby']被設置。當你點擊一個半徑時，POST ['radius']被設置。要解決這個問題，最好是在每個文檔中分別發送輸入＃半徑或輸入＃shortby的值。ready – Maxzeroedge

那麼這將如何？你能修改它嗎？ – Tibby

JQuery輸入表格不起作用

回答

相關問題