[已解决]aj弹出的内容没有清空

tengke

{% extends 'rootyongh.html' %}
{% block b %}
        <!-- Button trigger modal -->
<div>
{#<input id ='aj' type="button" value="新建工单1" class="btn btn-primary" >#}
<input type="button" value="新建工单" class="btn btn-primary" data-toggle="modal" data-target="#Modal123">
</div>
<!-- Modal -->
<div class="modal fade" id="Modal123" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新建工单2</h4>
      </div>
      <div class="modal-body">
        <form id="btn412"  novalidate>
    {% for f in form %}
        <div class="form-group">
            {{ f.label }} : {{ f }}
        <span class="error-msg" style="color:red; postition:absolute;"></span>
        </div>
    {% endfor %}
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">提交</button>
          <input type="reset" name="reset" id="reset" value="重置">
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    $(function () {
        console.log("aja2 function called");
          $('#Modal').modal('show');
                btn4();
                btn412();
    })
    var csrfToken = "{{ csrf_token }}";
    function btn4() {
        $("#btn41").submit(function (event) {
            event.preventDefault();  // 阻止表单默认提交行为
            $(".error-msg").text("");
            $.ajax({
                url: '/ajadd/',
                type: 'post',
                 headers: {
    "X-CSRFToken": csrfToken  // 将CSRF令牌添加到请求头部
  },
                data: $("#btn41").serialize(),
                dataType: 'json',
                success: function (res) {
                    if (res.status){
                        alert('添加成功');
                        location.reload();//刷新界面的js代码
                    }else {
                        $.each(res.error,function (name,date)
                            {
                                console.log(name,date);
                                $("#id_"+name).next().text(date[0])
                            }
                        )
                    }
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }
            });
        });
    }
    function btn412() {
        $("#btn412").submit(function (event) {
            event.preventDefault();  // 阻止表单默认提交行为
            $(".error-msg").text("");
            $.ajax({
                url: '/ajadd/',
                type: 'post',
                 headers: {
    "X-CSRFToken": csrfToken  // 将CSRF令牌添加到请求头部
  },
                data: $("#btn412").serialize(),
                dataType: 'json',
                success: function (res) {
                    if (res.status){
                        alert('添加成功');
                        $("#btn412")[0].reset();
                        $("#btn412")[0].reset();

                        location.reload();//刷新界面的js代码
                    }else {
                        $.each(res.error,function (name,date)
                            {
                                console.log(name,date);
                                $("#id_"+name).next().text(date[0])
                            }
                        )
                    }
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }
            });
        });
    }
</script>
{% endblock %}


上述代码中    $("#btn412")[0].reset(); 这个没有将输入正确的内容清空

最佳答案

月排行榜 / 总排行榜

不二如是

2023-12-13 16:50:52

鱼油的代码中，$("#btn412")[0].reset(); 被调用了两次，这个方法通常是用来重置表单的。

如果输入的内容是正确的，即使调用 reset() 方法，表单也会被清空，因为这个方法会将表单的所有输入字段重置回它们的初始值。

如果表单初始值是空的，那么 reset() 将清空所有字段。

如果发现 reset() 方法没有清空表单，那可能是由以下几个原因造成的：

• 表单初始状态不是空：如果表单的输入字段在页面加载时已经填充了数据（比如使用了value属性或者是服务端渲染的值），reset() 会将字段恢复到这些非空的初始状态。
• JavaScript或者jQuery冲突：有可能是其他的JavaScript或者jQuery代码影响了 reset() 的行为。例如，如果有其他事件监听器在 reset() 调用之后又改变了输入字段的值。
• DOM元素引用问题：如果页面中存在多个具有相同ID的元素，$("#btn412")[0] 可能没有引用到正确的表单元素。
  

要解决这个问题，您可以尝试以下几个步骤：

• 确保表单的每个输入字段在页面加载时都是空的，没有预设值。
• 检查是否有其他JavaScript代码在 reset() 调用之后执行，可能会重新设置输入字段的值。
• 确保页面上每个元素的ID都是唯一的，没有重复。
• 使用开发者工具的Console来调试，看看 $("#btn412")[0] 是否真的引用到了正确的表单元素。
• 如果您想要确保表单被清空，而不依赖于初始值，您可以通过遍历表单中的每个输入元素并显式设置它们的值为默认或空值来实现。
  

简单的 JavaScript 例子：

$("#btn412").find('input[type=text], input[type=password], input[type=number], textarea').val('');

这段代码会找到ID为 btn412 的表单中的所有文本、密码、数字输入框和文本区域，并将它们的值设置为空字符串，这样可以保证无论它们的初始状态如何，它们都会被清空。

跳转到最佳答案楼层

不二如是

鱼油的代码中，$("#btn412")[0].reset(); 被调用了两次，这个方法通常是用来重置表单的。

如果输入的内容是正确的，即使调用 reset() 方法，表单也会被清空，因为这个方法会将表单的所有输入字段重置回它们的初始值。

如果表单初始值是空的，那么 reset() 将清空所有字段。

如果发现 reset() 方法没有清空表单，那可能是由以下几个原因造成的：

• 表单初始状态不是空：如果表单的输入字段在页面加载时已经填充了数据（比如使用了value属性或者是服务端渲染的值），reset() 会将字段恢复到这些非空的初始状态。
• JavaScript或者jQuery冲突：有可能是其他的JavaScript或者jQuery代码影响了 reset() 的行为。例如，如果有其他事件监听器在 reset() 调用之后又改变了输入字段的值。
• DOM元素引用问题：如果页面中存在多个具有相同ID的元素，$("#btn412")[0] 可能没有引用到正确的表单元素。
  

要解决这个问题，您可以尝试以下几个步骤：

• 确保表单的每个输入字段在页面加载时都是空的，没有预设值。
• 检查是否有其他JavaScript代码在 reset() 调用之后执行，可能会重新设置输入字段的值。
• 确保页面上每个元素的ID都是唯一的，没有重复。
• 使用开发者工具的Console来调试，看看 $("#btn412")[0] 是否真的引用到了正确的表单元素。
• 如果您想要确保表单被清空，而不依赖于初始值，您可以通过遍历表单中的每个输入元素并显式设置它们的值为默认或空值来实现。
  

简单的 JavaScript 例子：

$("#btn412").find('input[type=text], input[type=password], input[type=number], textarea').val('');

这段代码会找到ID为 btn412 的表单中的所有文本、密码、数字输入框和文本区域，并将它们的值设置为空字符串，这样可以保证无论它们的初始状态如何，它们都会被清空。

FishC

在jQuery中，没有内置的方法reset()来重置表单。如果想要清空表单中的内容，可以使用以下两种方法之一：

方法一：通过遍历表单中的每个元素，将其值设置为空字符串。

function btn412() {    $("#btn412").submit(function (event) {        event.preventDefault();  // 阻止表单默认提交行为        $(".error-msg").text("");        $.ajax({            url: '/ajadd/',            type: 'post',            headers: {                "X-CSRFToken": csrfToken  // 将CSRF令牌添加到请求头部            },            data: $("#btn412").serialize(),            dataType: 'json',            success: function (res) {                if (res.status){                    alert('添加成功');                    $("#btn412")[0].reset();  // 清空表单内容                    location.reload();  // 刷新界面的js代码                } else {                    $.each(res.error, function (name, date) {                        console.log(name, date);                        $("#id_"+name).next().text(date);                    });                }                console.log(res);                console.log(res.status);                console.log(res.data);            }        });    });}

方法二：使用reset()方法来重置表单。但需要注意的是，reset()方法是原生的DOM方法，不能直接应用于jQuery对象。可以通过获取原生的DOM对象来调用reset()方法。

function btn412() {    $("#btn412").submit(function (event) {        event.preventDefault();  // 阻止表单默认提交行为        $(".error-msg").text("");        $.ajax({            url: '/ajadd/',            type: 'post',            headers: {                "X-CSRFToken": csrfToken  // 将CSRF令牌添加到请求头部            },            data: $("#btn412").serialize(),            dataType: 'json',            success: function (res) {                if (res.status){                    alert('添加成功');                    $("#btn412")[0].reset();  // 清空表单内容                    location.reload();  // 刷新界面的js代码                } else {                    $.each(res.error, function (name, date) {                        console.log(name, date);                        $("#id_"+name).next().text(date);                    });                }                console.log(res);                console.log(res.status);                console.log(res.data);            }        });    });}

希望这两种方法可以帮助你解决问题！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

tengke

FishC 发表于 2023-12-13 16:51
在jQuery中，没有内置的方法reset()来重置表单。如果想要清空表单中的内容，可以使用以下两种方法之一：

...

{% extends 'rootyongh.html' %}
{% block b %}
<div>
{#<input id ='aj' type="button" value="新建工单1" class="btn btn-primary" >#}
<input type="button" value="新建工单" class="btn btn-primary" data-toggle="modal" data-target="#Modal123">
</div>
<!-- Modal -->
<div class="modal fade" id="Modal123" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新建工单2</h4>
      </div>
      <div class="modal-body">
        <form id="btn412"  novalidate>
    {% for f in form %}
        <div class="form-group">
            {{ f.label }} : {{ f }}
        <span class="error-msg" style="color:red; postition:absolute;"></span>
        </div>
    {% endfor %}
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">提交</button>
          <input type="reset" name="reset" id="reset" value="重置">
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    $(function () {
        console.log("aja2 function called");
          $('#Modal').modal('show');
                btn412();
    })
    var csrfToken = "{{ csrf_token }}";
    function btn412() {
        $("#btn412").submit(function (event) {
            event.preventDefault();  // 阻止表单默认提交行为
            $(".error-msg").text("");
            $.ajax({
                url: '/ajadd/',
                type: 'post',
                 headers: {
    "X-CSRFToken": csrfToken  // 将CSRF令牌添加到请求头部
  },
                data: $("#btn412").serialize(),
                dataType: 'json',
                success: function (res) {
                    if (res.status){
                        alert('添加成功');
                        {#$("#btn412")[0].reset();#}
                        // 清空表单数据
                        $("#btn412").trigger("reset");
                        {# $("#btn412")[0].reset();#}
                        $('#btn412').modal('hide');
                        {#location.reload();//刷新界面的js代码#}
                    }else {
                        $.each(res.error,function (name,date)
                            {
                                console.log(name,date);
                                $("#id_"+name).next().text(date[0])
                            }
                        )
                    }
                    {#console.log(res);#}
                    {#console.log(res.status);#}
                    {#console.log(res.data);#}
                }
            });
        });
    }
</script>
{% endblock %}
修改了代码还是不可以 重置信息和关闭弹窗

tengke

不二如是 发表于 2023-12-14 11:50
鱼油的代码中，$("#btn412")[0].reset(); 被调用了两次，这个方法通常是用来重置表单的。

如果输入的内 ...

找到原因了    我上面的代码有个重置按钮  id绑定的是reset 我改一下就可以了

不二如是

tengke 发表于 2023-12-14 16:19
找到原因了    我上面的代码有个重置按钮  id绑定的是reset 我改一下就可以了

改好就好