Button enabled throughjs function返回disabled状态

Question

我有一个有两个按钮和一些文本区的表单。由于第二个应该只有在第一个被点击后才可用，我将其设置为默认禁用，然后用js函数调用启用它。这工作。然而，当第一个按钮被点击时，一些php代码被执行(通过if(isset($_POST['submit'])){如果($_SERVER["REQUEST_METHOD"] == "POST"))， php代码执行后，按钮返回到禁用状态。

知道为什么吗?我似乎整个表单是重新加载一旦php完成，但我不知道为什么。

下面是按钮和js函数的代码:

<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" onclick="enableButton2()"/>

<input id="saveFile" class="button_text" type="submit" name="download" value="Download" disabled/>
<script>
function enableButton2() {
document.getElementById("saveFile").disabled = false;
}
</script>

Answer 1

看一下Fetch API来发布你的表单与第一个按钮，然后是响应是ok的(意味着你的php被执行并返回一些东西)，第二个按钮是启用的，否则它显示错误。

function enableButton2() {
var form = new FormData(document.getElementById('form'));
fetch("YOUR-URL", { //Edit YOUR-URL to your .php script
method: "POST",
body: form
}).then(function(response) {
if (response.ok) {
//Put your code here if form successfully submitted
document.getElementById('saveFile').disabled = false;
} else {
//Put your code here if form successfully submitted but return something else than HTTP 200 Status
console.log('Network error');
}
}).catch(function(error) {
//Put your code here if form unsuccessfully submitted
console.log(error.message);
});
}

<form action=# id="form">
<input id="saveForm" class="button_text" name="submit" type="button" value="Submit" onclick="enableButton2()" />
<input id="saveFile" class="button_text" type="submit" name="download" value="Download" disabled />
</form>