I have a form with two buttons and some texareas. As the second one should only be available after the first has been clicked I set it to disabled as default and then enable it with a js function call. That works. However when the first button is clicked some php code is executed (through if(isset($_POST['submit'])){ if ($_SERVER["REQUEST_METHOD"] == "POST")) and after that php code has been executed the button goes back to the disabled state.
Any ideas why? I seems that the whole form is reloaded once the php is done but I don't know why.
Here's the code for the buttons and js function:
<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>
Take a look at Fetch API to post your form with first button then is response is ok (mean your php was executed and return something), the second button is enabled else it display error.
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>