javascript - 按钮未在表单内禁用

Question

向开发者问好。我正在为大学做一个与 Javascript 相关的项目。我创建了一个页面，其中有“添加”按钮和“取消好友”按钮，该按钮已禁用。一旦用户单击“添加”按钮，就会出现提示框，在单击“确定”提示后，“取消好友”按钮将能够单击，而“添加”按钮将变为禁用。如果点击取消好友，添加按钮就可以点击。我不知道如何解释。可能看了我的问题可会头疼。对此感到抱歉。我的问题是按钮无法禁用，如果我从未将其放入表单中，它就可以工作，但因为我放入表单中就不起作用。各位有什么解决办法请帮帮我

 function myFunction(add){
    	var subject = prompt("Please enter Subject that want to study");
    	if (subject != null){
    		document.getElementById("subject").value = subject;
    		
    	document.getElementById("btn").disabled=false;
    	document.getElementById("add").disabled=true;
    	document.getElementById("add").value="request sent";
    	
    	}
    }
    function disableButton(btn){
    	 
    		  
    		document.getElementById("add").disabled=false;
    		document.getElementById("btn").disabled=true;
    	document.getElementById("add").value="Add friend";
    	form.submit();
    }

<form method="post" id="form" enctype="multipart/form-data" autocomplete="off"  > 
    <input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>  
    <input type="hidden" id="subject" name="subject"/>
    <input type="submit" value="add" id="add"  onclick="myFunction(add)"  /></form>

Answer 1

“添加”和“取消好友”按钮都提交一个 POST 请求，该请求会刷新页面，因为没有指定表单操作。也许您需要阅读 HTTP 方法。 https://www.w3schools.com/tags/ref_httpmethods.asp是一个很好的资源。

如果您计划稍后添加服务器端页面来处理请求，您可以临时将以下内容添加到表单标记onsubmit="return false"。

如果您只想使用表单输入而不提交表单，您应该从disableButton函数中删除form.submit()，并从type更改添加和取消好友按钮的类型="提交" 到 type="button"。您还可以删除表单的方法和enctype。