AJAX/JS/PHP：提交选择框的值而不刷新页面或单击按钮答案

【问题标题】：AJAX/JS/PHP: Submitting value of a select box without page refresh or button clickAJAX/JS/PHP：提交选择框的值而不刷新页面或单击按钮
【发布时间】：2012-07-21 01:42:52
【问题描述】：

我目前正在使用 Ajax 提交输入字段，而无需刷新页面或单击按钮。该功能适用于文本输入字段，但不适用于发布 选择框 的值，然后 php 回显结果。我使用 firebug 工具进行检查，Ajax/js 函数没有发布任何内容。

如何提交一个选择框的值，然后我可以用 php 回显？ EXAMPLE

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

【问题讨论】：

标签： php javascript jquery ajax

【解决方案1】：

选择标签不会触发keyup 事件，您应该使用change 代替，尝试以下操作：

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

 $('#item_input').html(result);

【讨论】：

@Ramison，谢谢，最后一个问题：在firebug工具中，显示JS正在运行，但结果为空白。 EXAMPLE
@cholomanCoding 欢迎您。那是因为您使用text() 来解析html 标签，请尝试更新后的答案。
@cholomanCoding 对不起，我没有注意到您正在回显 HTML 字符串，请尝试更新后的字符串。
这不是你的错，我的朋友。你一直很有帮助。但是回显结果仍然无效

【解决方案2】：

看来你的 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>

【讨论】：

+1 哦，你是对的@Shahid 我不知道我是怎么错过的。谢谢！

【解决方案3】：

使用onchange 事件触发submitForm()，以便每次<select> 的值发生变化时，它都会提交。

【讨论】：

【解决方案4】：

KeyUp 用于输入框和其他使用键盘的框。选择您可以使用 onClick 或 onChange 的框，最好使用 onChange：

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

这对你有用。

祝你好运！

【讨论】：