3

現在、Ajax を使用して、ページを更新したりボタンをクリックしたりせずに入力フィールドを送信しています。この関数はテキスト入力フィールドでうまく機能しますが、選択ボックスの値を投稿してからphpが結果をエコーすると機能しません。firebug ツールで確認しましたが、Ajax/js 関数によって何も投稿されていません。

選択ボックスの値を送信して、php でエコーできるようにするにはどうすればよいですか? 例

JS

<script>
$(document).ready(function() {
        var timer = null; 
        var dataString;   
          function submitForm(){
                         $.ajax({ type: "POST",
                         url: "index.php",
                         data: dataString,
                         success: function(result){
                         $('#item_input').text( $('#resultval', result).html()); 
                             }
                            });
                            return false;
           }
             $('#item_name').on('keyup', function() {
             clearTimeout(timer);
             timer = setTimeout(submitForm, 050);
             var name = $("#item_name").val();
             dataString = 'name='+ name;
          });
 }); 
</script>

PHP

<?php
      if ($_POST)
                {
                  $item_name     = $_POST['name'];
                  echo ('<div id="item_input"><span id="resultval">'.$item_name.'</span></div>');
                }
?>

HTML

<html>
<form method="post" id="form" name="form">  
<select name="item_name" value="<? $item_name ?>" size="4" id="item_name">
     <option value="">Item1</option>
     <option value="">Item2</option>
     <option value="">Item3</option>
     <option value="">Item4</option>
</select>
</form>
<div id="item_input"></div>
</html>
4

4 に答える 4

4

keyupselectタグはイベントをトリガーしませんchange。代わりに使用する必要があります。次のことを試してください。 

 $('#item_name').on('change', function() {
     clearTimeout(timer);
     var name = $(this).val();
     dataString = 'name='+ name;
     timer = setTimeout(submitForm, 050);
 });


 $('#item_input').html(result);
于 2012-07-21T02:30:51.580 に答える
1

あなたの js は正しい問題のようです。あなたの html 部分に問題があります。選択リストの値を指定していません。リストオプションを選択するための値を指定してください。

$(document).ready(function() {
     var timer = null; 
     var dataString;   
     function submitForm(){
       $.ajax({ type: "POST",
                url: "index.php",
                data: dataString,
                success: function(result){

                //$('#item_input').html( $('#resultval', result).html()); 
                //$('#special').text(result); 
                //$('#item_input').html( $('#resultval').html() + '<p>' + result + '</p>'); 
                $('#item_input').html(result); 

                }

       });
       return false;
     }


    $('#item_name').on('change', function() {
     clearTimeout(timer);
     var name = $(this).val();
     dataString = 'name='+ name;
     timer = setTimeout(submitForm, 050);
    });      

});

このようにするか、投稿したい値にする必要があります

<select name="item_name" value="" size="4" id="item_name">
    <option value="item1">Item1</option>
    <option value="item2">Item2</option>
    <option value="item3">Item3</option>
    <option value="item4">Item4</option>
</select>
于 2012-07-21T05:19:39.820 に答える
0

KeyUpは、キーボードを使用する入力ボックスなど用です。onClickまたはonChange、できればonChangeのいずれかを使用できるボックスを選択します。

$('#item_name').change(function() {
             clearTimeout(timer);
             timer = setTimeout(submitForm, 050);
             var name = $("#item_name").val();
             dataString = 'name='+ name;
}

これはあなたのために働くでしょう。

幸運を！

于 2012-07-21T02:42:00.853 に答える
0

の値が変化するたびに送信されるようsubmitForm()に、onchangeイベントでトリガーします。<select>

于 2012-07-21T01:48:23.393 に答える