使用纯JavaScript提交表单后禁用按钮

Question

问候开发人员，我从stackoverflow中搜索了所有以前的问题。对此没有正确的答案。我在表单中创建两个按钮。一个是添加朋友，另一个是禁用的取消朋友。如果用户单击"添加"，则会直接转到提示框。单击确定后，取消好友按钮将能够单击。现在我的问题是它可以提交我的表单，但在用户注销之前按钮无法按预期工作。在所有教程中，他们仅展示了如何禁用按钮。每当我尝试时，它都可以工作，但不提交我的表格。我希望我的表单提交并禁用按钮，直到用户注销。提前谢谢。

    <script>
function myFunction(form){
    var subject = prompt("Please enter Subject that want to study");
    var btn = document.getElementById("btn");
    var add = document.getElementById("add");
    btn.disabled=false;
    add.disabled=true;
    if (subject == null){
     form['subject'].value= subject;
    add.value="request sent";
    form.submit();
    return false;
    }
    else if(subject != null) {
        form['subject'].value= subject;
        add.value="request sent";
        btn.disabled=false;
        add.disabled=true;
        form.submit();
        return true;
            }
}
function unfriend(form){
    var btn = document.getElementById("btn");
    var add = document.getElementById("add");
    add.disabled=false;
    btn.disabled=true;
    add.value="request sent";   
    return true;
}
</script>
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" > 
    <input type="hidden" name="id" value="<?php echo $row['register_ID'];?>" />
    <input type="hidden" id="subject"  name="subject" data-uid=<?php echo $_SESSION['sid'] ;?>/>
    <td>
        <input type="submit" onclick="return myFunction(form)"name="addfriend" data-type='addfriend' id="add" class="btn" value="add" /> 
</form>
<form>                
    <input type="submit" value="unfriend" id="btn"  onclick="unfriend(form);" disabled="" /> 
    </td>   
</form>

Answer 1

我不是javaScript的专家，但似乎理解这个问题。

两种可能的情况是：

1 - 如果您有输入类型="提交"，那么它将提交表单，但不会调用您的 JavaScript 方法，因为在提交表单后，您将被重定向到某个网页，无论是同一页面还是不同页面，因此它是一个新的 get 请求。

2 - 如果你有type="button"，那么它不会提交表单，但你的javascript方法将被调用，因为你将保留在同一网页上。

检查此差异：<输入类型 /> 和<输入类型 /> 之间的差异

溶液：

保持输入类型=按钮并对 post 方法进行 ajax 调用，在 ajax 调用成功时，启用/禁用添加和取消好友按钮。

没有方便的代码，因此无法共享代码。

希望对您有所帮助。