提交后如何禁用输入字段

Posted 2023-05-09

【中文标题】提交后如何禁用输入字段

【英文标题】：How to disable input field after submit

【发布时间】：2019-08-28 10:23:49

【问题描述】：

点击提交按钮后，我需要帮助禁用输入字段。我目前正在使用 Laravel，所以我不确定 jQuery 是否放置在视图以外的其他地方。我尝试将这个 jQuery 代码放在 index.blade.php, 中，但没有成功。

<script type="text/javascript">
    $(document).onclick(function()
         $("#pid :input").prop("disabled", true);
    );
</script>

【问题讨论】：

如果您满意，请选择一个答案。

资源 -> 视图 -> 模板，编辑 default.blade.php。在head标签中添加jquery.min.js脚本

让我澄清一下我想要做什么。我想在提交后永久禁用 SSN 字段。这意味着，一旦单击提交按钮并提交表单，该字段就不能再被编辑。

您对答案不满意？

@MariosNikolaou 不幸的是没有。我很抱歉在最初的问题中没有让自己清楚。您的代码有效，但它并没有永久禁用该字段并且表单没有提交。表单中有多个字段，而不仅仅是我要禁用的字段。

【参考方案1】：

只听一个提交点击，然后设置输入的布尔disabled属性：

$("#submit").on("click", function() 
    $("#pid").attr("disabled", "disabled");
);

【讨论】：

在这种情况下，我认为他应该使用提交方法。

正如最初的问题中提到的，我正在使用 Laravel。 index.blade.php 文件根本没有执行 javascript。我想我应该把js放在别的地方，但我不知道在哪里。

【参考方案2】：

检查我的代码。我已经创建了一个表单和输入元素的示例。

有关序列化的更多信息，请查看link

您将使用 ajax 将输入元素值发送到 file.php，然后 file.php 中的 echo 将发送到 ajax 调用数据，数据将在控制台中打印。

之后输入字段将被禁用。

文件.php

<?php 
header('Access-Control-Allow-Origin: *');

if(isset($_GET['nm']))
    $name = $_GET['nm'];

    echo $name;


?>

$("#frm1").submit(function(e)

     //make sure you have name value in each input element
     $.ajax(
        method:'get',
        url:'http://localhost/file.php',
        data:$(this).serialize()
     ).done(function( data ) 
         console.log(data);
     ).fail(function( jqXHR, textStatus ) 
         alert( "Request failed: " + textStatus );
     );

     //after submit disable the input elememt
     $("#nm").prop("disabled", true);

     e.preventDefault();
     
);  	

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frm1" action="" method="post">
    <input type="text" id="nm" name="nm" />
    <input type="submit" value="Submit"/>
</form>

【讨论】：

对不起，我的意思是当我在这里运行代码 sn-p 时，出现脚本错误

@Emerg 已修复。我正在提交表单。

当我运行代码 sn-p 时，它给出了一个请求失败的错误。另外，我对此完全是新手。你能告诉我需要在“url”和“数据样本”部分中添加什么吗？方法“post”不是“get”吗？

查看link

只是文本，它将显示来自php文件的数据。