Same PHP function is executing multiple time using JS .submit

Question

I am submitting a form when user clicks on submit button using JQuery. But upon clicking it submits same form multiple times and I've no clue why is this happening. Tried lots of things but failed. Below is the code.

I am adding my PHP, Javascript and HTML code below.

HTML:

<div class="box-body big">
        <form id="pdf-generator" action="<?= $this->base; ?>/companies/generatePdf/" method="post" target="_blank">

            <select id="pdfname" class="form-control" name="pdfname">

                <option value="showfields">---Show Available Fields---</option>
                <option value="29300____test1.pdf">29300____test1.pdf</option>
            </select>
            <input type="hidden" name="fieldPairs" id="fieldPairs" value="" />
        </form>


        <div class="divide-12"></div>
        <button id="genPdfFormButton" type="button" class="btn btn-success pull-right">Generate PDF</button>
        <div class="divide-12"></div>
</div>

JS:

      $('#genPdfFormButton').click(function(){

      var elements = document.getElementsByTagName("input");
      var textAreas = document.getElementsByTagName("textarea");

      var list = "";
      var pair = "";

      document.getElementById("fieldPairs").value = '';
      //all input fields
      for (var i=0; i<elements.length; i++) {
          pair = elements[i].id + "=" + elements[i].value;
          list = (list.length == 0) ? pair : list + "|" + pair;
      }
      //all textareas
      for (var i=0; i<textAreas.length; i++) {
          pair = textAreas[i].id + "=" + textAreas[i].value;
          list = (list.length == 0) ? pair : list + "|" + pair;
      }

      document.getElementById("fieldPairs").value = list;

      $('#pdf-generator').submit();
  });

PHP:

public function generatePdf() {
    $this->log("==>===============[start]=====================", 'debug');
    $this->autoRender = false;

    $pdfName = $this->request->data['pdfname'];

    //get the submitted data
    $formData = $this->processFormData($this->request->data['fieldPairs']);

    if($pdfName == "showfields") { //show only form data fields
        var_dump($formData);
    } else { //generate PDF file

        $this->log("==> gonna call generatePdf <== ", 'debug');
        $pdf = new PdfForm(PDF.$pdfName, $formData);
        $pdf->download();
    }
}

When this code calls the php function, I can see same logs messages multiple times because the function is being called multiple time.

p.s: This issues is not due to clicking on submit button multiple times.

For starters you should never run an action based on request data without cheching the request method! ie check that it's a POST request, maybe fail hard for invalid requests. ps, please always mention your exact CakePHP version (last line in vendor/cakephp/cakephp/VERSION.txt or lib/Cake/VERSION.txt) - thanks! — ndm
– ndm, Commented Sep 24, 2017 at 13:28
my cakephp version is 2.4.6. Initially I though the issue have something to do with JS. But now I realized if I remove pdf = new PdfForm(PDF.$pdfName, $formData); code, it prints log only once. but when this code is there .. it runs multiple times. Any clue ? — ihaider
– ihaider, Commented Sep 24, 2017 at 13:56

vnt · Accepted Answer · 2017-09-24 12:37:26Z

1

you should disable that button each time the user click to submit

$('#genPdfFormButton').click(function(){
    $(this).prop('disabled', 'disabled');
    ...
}

answered Sep 24, 2017 at 12:37

vnt

6116 silver badges13 bronze badges

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

3 Comments

ihaider Over a year ago

this is not the solution coz the issue is not due to clicking form button multiple times.

drmonkeyninja Over a year ago

It would be better to disable the submit button on form submit rather than listening for the click event. If it's important that the form data isn't submitted multiple times this is a good practice. However, it sounds like there is a bug in the OP's code that needs fixing first.

ihaider Over a year ago

in $pdf->download(); there's code that force browser to download file. I am forcing it using headers and one of the header is creating issue. i.e. header("Content-Disposition: attachment; filename={$finalFileName}"); if I remove it or change the file extension from PDF to something else the function doesn't call again and again. Any Clue ?

ihaider · Accepted Answer · 2017-10-09 12:14:42Z

0

So after wasting a lot of time and debugging a lot of code, I fixed the issue. It was due to IDM (Internet Download Manager) extension that is installed in my browsers. I disabled it and everything started working as expected and function is now executing only once.

phew!

answered Oct 9, 2017 at 12:14

ihaider

1,3504 gold badges21 silver badges43 bronze badges

Collectives™ on Stack Overflow

Same PHP function is executing multiple time using JS .submit

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related