This may be one of the simplier questions. However, I can't get my head around it.
I have a Button in a form:
<button id='button' type="submit" class="btn" >Submit</button>
On form submission, I'd like to change the "Submit" into "Checking" because my submission check takes 1-2 seconds to finish. So I tried echoing the following (located at the beginning of my form_submission.php):
echo "<script type='text/javascript'>
var el = document.getElementById('button');
el.firstChild.data = 'Checking Inquiry';
</script>";
However, it doesn't do anything. Can someone help?
EDIT:
PHP verification:
if (isset($_POST['email']) && $_POST['email'] != '') {
$message_sent = true;
}
else {
$message_sent = true;
$invalid_class_mail = "form-invalid";
}
In HTML:
<?php
if($message_sent):
?>
<h3> We've revieced your inquiry! </h3>
<?php
else:
?>
<form .....>
<div class="form-group">
<label for="email" class="form-label">Your Email *</label>
<input <?= $invalid_class_mail ?? "" ?> type="email" class="form-control" id="email" name="email" placeholder="jane@doe.com" tabindex="2" required>
</div>
...
</form>
You can use the innerText property of an HTML element to change its content.
You may simplify like this.
document.getElementById('button').innerText = 'Checking Inquiry';
You also should either listen on the submit event on the form or the button click event.
(when the form has in id attribute id='form'
document.getElementById('form').addEventListener(
'submit', () =>
document.getElementById('button').innerText = 'Checking Inquiry'
);
document.getElementById('button').addEventListener(
'click', (e) =>
e.target.innerText = 'Checking Inquiry'
);