使用纯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 - 如果您输入 type="submit" 那么它将提交表单但您的 javascript 方法将不会被调用，因为在提交表单后您将被重定向到同一页面或不同页面的某个网页等这是一个新的获取请求。

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

检查此差异：Difference between <input type='button' /> and <input type='submit' />

解决方案：

保持 input type=button 并对 post 方法进行 ajax 调用，在 ajax 调用成功后，启用/禁用添加和取消好友按钮。

手头没有代码所以无法共享代码。

希望对你有帮助。