按钮未在表单内禁用

时间:2018-08-04 07:58:09

标签: javascript html forms

向开发人员致意。我正在做与Java有关的大学项目。我创建了一个页面,该页面具有添加按钮和禁用按钮,该按钮被禁用。一旦用户单击添加按钮,将出现提示框,当他们单击确定进行提示后,当添加按钮变为禁用时,取消按钮将可以单击。如果单击取消好友,则可以单击添加按钮。我不知道该怎么解释。可能是我的问题可能会让人头疼。对此表示抱歉。我的问题是按钮没有禁用,如果我从不放表格的话,但是自从我放表格的时候,就不行了。伙计们有什么解决办法请帮忙

 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>

2 个答案:

答案 0 :(得分:1)

由于未指定表单操作,因此“添加”和“取消好友”按钮都提交POST请求,该请求正在刷新页面。也许您需要阅读HTTP方法。 https://www.w3schools.com/tags/ref_httpmethods.asp是很好的资源。

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

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

答案 1 :(得分:0)

我个人并不真正使用表单,除非表单超过3个字段。

要考虑的两件事:

您有正确的书面想法,但是缺少event.preventDefault(),它会使您的网站刷新,从而迫使所有内容刷新。

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

另一个是尝试在两个按钮之间尝试,因为它们都是我建议在按钮标签中单击的一项功能。只是为了避免两种输入类型。

其他: 我建议您添加jquery以使切换功能更轻松。