PHP code doesnt work together with JS function on "onclick"

Question

i have a button in which i want it to perform 2 task; php and js. The php part : generate different text everytime the button is pressed. The js part : disabling the button for 5 secs and then enabling it back.

HTML

 <button onclick = "disable();"  class=btnGenerate type="submit" id="submit" name="submit" >GENERATE</button>

PHP

if(isset($_POST['submit'])){
$num=mt_rand(1,10);
$result=mysqli_query($con,"SELECT * from quote_table where id=$num");
$row = $result->fetch_assoc();}

JS

 <script>
function disable(){
  document.getElementById("submit").disabled = true;
  setTimeout(function() { enable(); }, 5000);    }

function enable(){
  document.getElementById("submit").disabled = false;
}</script>

The PHP part only works when i delete the "onclick = "disable();" on the html but it doest seem to work when i add it. Can a button carry out PHP and JS at a single click ? Thanks in advance.

@SantoshSuryawanshi — That shouldn't make any difference whatsoever. type="submit" is the default and nothing is explicitly testing for the attribute. — Quentin
– Quentin, Commented Jun 6, 2018 at 15:13
I don't understand your intent with this code. If you are submitting a form: 1. disabled inputs won't be added to the form data passed to the server and 2. the page will reload, rendering the enable() function pointless. You also should be using addEventListener() to handle events on a form element rather than putting javascript inline. — Jonathan Eltgroth
– Jonathan Eltgroth, Commented Jun 6, 2018 at 15:21
my intent on using the button is for, when the user pressed the button, the php code will execute and get text from the database to be displayed on the page,, at the same time after each click, the button will be disable for 5 seconds by the js ,, @JonathanEltgroth — Grey
– Grey, Commented Jun 6, 2018 at 15:29

Quentin · Accepted Answer · 2018-06-06 15:09:19Z

1

A disabled button can't be a successful control.

Don't depend on the name/value of the submit button being submitted in the form data if you are going to disable it.

Replace isset($_POST['submit']) with some other condition.

answered Jun 6, 2018 at 15:09

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Grey Over a year ago

so what can i use as another condition, so that when the button is pressed the php code will execute along with the js.

Quentin Over a year ago

You could test if it was a POST request and not a GET request. You could test if some other data in the form was present. You could just have the code to generate the form and the code to process the form submission in different PHP programs. The list goes on.

Jonathan Eltgroth Over a year ago

@DanialWafiy, I think you're misunderstanding how PHP and JS work. PHP and JS do not work with each other. They're separate code that run in separate environments, PHP on the server, JS in the browser. They cannot run simultaneously.

Quentin Over a year ago

@JonathanEltgroth — It's a submit button. Clicking it submits a form. That triggers an HTTP request. That causes the server to run some PHP.

Jonathan Eltgroth Over a year ago

Yeah, I got that, but it seems he's asking why the javascript isn't working in-conjunction with the PHP, like he wants to submit the form and still have the js on the page function, even though he's not using an ajax request. It's not possible. Once the form is submitted, the javascript is no longer valid because the browser is about to accept a new request and regenerate a fresh page.

|

Jonathan Eltgroth · Accepted Answer · 2018-06-06 15:50:25Z

If you trigger a form submission, unless you're using AJAX the page will simply reload, rendering the enable() method moot unless you're using it to re-enable the button on fail condition or on successful return of data via AJAX.

It's sounds to me like you're trying to get data via request to the server, without reloading the page, and then re-enable the submit button after the data is returned. In that case you need to use AJAX.

HTML

<form action="/" method="post" id="form">
  <button class=btnGenerate type="submit" id="submit" name="submit" >GENERATE</button>
</form>

JS

<script>
document.getElementById('submit').addEventListener('click', function(event){
  event.preventDefault(); // prevents browser from submitting form
  var form = document.getElementById('form');
  var submit = document.getElementById('submit');
  // using JQuery ajax
  $.ajax(form.action, {
    data: form.serialize(),
    beforeSend: function() { // runs before ajax call made
      // disable submit button
      submit.disabled = true;
    },
    success: function(response) {
      console.log(response);
      // deal your return data here
    },
    error: function(error) {
      console.log(error);
      // deal with error
    },
    complete: function() { // runs when ajax call fully complete
      // renable submit button
      submit.disabled = false;
    }
  });
});
</script>

Collectives™ on Stack Overflow

PHP code doesnt work together with JS function on "onclick"

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related