How to change button name?

learner

Submit is working properly but text is not changing.

<button type="submit" name="applied" class="btn-job theme-btn job-apply" id="apply" onclick="myFunction()">Apply Now</button>

<script>
function myFunction() {
  var x = document.getElementById("apply");
  if (x.innerHTML === "Apply") {
    x.innerHTML = "Applied";
  } else {
    x.innerHTML = "Applied";
  }
}
</script>
Ivar

Submit is working properly

When you submit a page, the browser makes a new request to the server (together with the form data) and the server will then return HTML that will be shown on the page again. In other words, the page is replaced with a new page (presumable with the same HTML in your case) and so any JavaScript that has been executed on the previous page will no longer apply there.

First I would like to recommend you add the event to the form submit, rather than the button click. This way, if someone submits the form in another way (such as pressing the enter button), it will still apply your function.

That being said, in order to solve your problem, you have multiple options.

Change the button text in the response of the HTML

In your PHP you can check if the form has been submitted. I'm going to assume that you use method="POST" on your form, so then it would be something like:

if ($_SERVER['REQUEST_METHOD'] === 'POST') { ?>
    <button type="submit" name="applied" class="btn-job theme-btn job-apply" id="apply" onclick="myFunction()" disabled>Applied</button>
<?php } else { ?>
    <button type="submit" name="applied" class="btn-job theme-btn job-apply" id="apply" onclick="myFunction()">Apply Now</button>
<?php }

Although in the case of a POST request, you might want to remove the form completely to prevent repeated submission.

Submit your form via AJAX

If you submit your form via AJAX, your request will be asynchronous and so your page doesn't refresh. In this case you do need to make sure that you prevent the default submission so you are not still submitting the form itself.

// Make sure to add the apply-form id to the form.
// (Or change it to a different id, but then you need to change it here as well.)
var form = document.getElementById('apply-form');

// Note I'm adding the event listener here, so it is not necessary 
// to add `onclick` or `onsubmit` in the HTML itself.
form.addEventListener('submit', myFunction);

function myFunction(event) {
  event.preventDefault();

  var formData = new FormData(event.currentTarget);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '', true);
  xhr.onload = function() {
    // do something to response if necessary, such as validating 
    // that the submission was successful. (Using xhr.status for example.)
    console.log(this.responseText);
  };
  xhr.send(formData);

  var x = document.getElementById("apply");
  x.innerHTML = "Applied";
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related