成功 ajax 响应后重置文本框值答案

【问题标题】：Reseting textbox values after successful ajax response成功 ajax 响应后重置文本框值
【发布时间】：2014-09-04 15:26:15
【问题描述】：

我现在正尝试在成功完成 ajax 请求后重置文本框的值。我试过这样的东西

$('#text1').val("");
$('#text2').prop('value','');

但不会工作。这些都在控制台中工作..

 <script type="text/javascript" src="/Includes/jquery.min.js"></script>
 <script type="text/javascript">
    $(function(){
        $('#btn').click(function(){             
            jQuery.ajax({
                url:"validation.cfc",
                data:{method:'db_validation',fname:$('#text1').val(),Email:$('#text2').val()},
                type:"POST",
                success:function(html){
                    //what code should be written to clear textbox values after successful ajax response
                    //$('#text1').val("");   ---> This code was not working
                    $('#para').html(html);//even this code was executed.
                }
            });             
        });     
    }); 
 </script> 
 <form>     
 <p id="para"></p>  
 <input id="text1" name="txtBox1" type="text"><br />    
 <input id="text2" name="txtBox2" type="text"><br />    
 <input type='button' name='Button' value='Add User' id="btn"/> 
 </form>

【问题讨论】：

你有多少个id为text1的元素？
我更新了我的答案并添加了一个小提琴示例。很抱歉发表评论，我不知道您是否了解答案编辑

标签： jquery html ajax

【解决方案1】：

使用下面的，它会清空文本框。

$('#text1').val("");

你的代码可能有问题。

如果有任何问题请联系HERE

还有 jQuery API

【讨论】：

@RPX，不工作是什么意思？检查上面答案中的链接。我给出了如何使用 VAL 的链接。它必须作为它的 jQuery 功能工作。它的问题可能是导致冲突，或控制台错误，破坏进一步的代码。
@RPX，你的工作就是看看为什么 .val() 不起作用。再次它必须工作。它适用于所有 PC，每个人的 PC 上的所有浏览器，Browser。检查是什么阻止 .val() 工作。特别是如果你说 $('#text1').val(""); $('#text2').prop('value','');这不起作用，您的代码有问题。请不要责怪 jQuery，说“我试过了，但没用”。

【解决方案2】：

我不确定#para 行的执行以及表单提交两次时页面上剩余的文本：默认情况下是表单提交和ajax。因此，我希望#para 中的 html 会出现片刻然后消失。

使用event.preventDefault() 防止默认提交，除非您有重复的 ID，否则应清除文本框。

$(function(){
    $('#btn').closest('form').submit(function( e ){
        e.preventDefault();
        jQuery.ajax({
            url:"validation.cfc",
            data:{method:'db_validation',fname:$('#text1').val(),Email:$('#text2').val()},
            type:"POST",
            success:function(html){
                $('#text1').val("");   //<----- Should work
                $('#para').html(html);  //even this code was executed.????
            }
        });
    });
});

【讨论】：

很可能确实被提交了；因此，您想将 event 传递给处理程序并使用 event.preventDefault() ... 那么这些行应该可以正常工作。

【解决方案3】：

我认为重置表单的最佳解决方案是使用重置方法

success:function(html){
  $('#form').reset();
}

编辑：抱歉那是我的失败没有检查它

在这里工作example

应该是

success:function(html){
  $('#form')[0].reset();
}

【讨论】：

@RPX 为您的表单提供 id 或使用 $('form') 选择器。但如果它存在于您的页面上，它可以重置其他表单

【解决方案4】：

如果要清除文本框，只需使用文本框 ID 作为在任何功能中

txtName.Text = "";
txtContactno.Text = "";
txtEmail.Text = "";

【讨论】：