不允许我在同一按钮上进行提交和单击

Question

So the Issue I am having is that when I click my button, it expect it to submit the php form AND run the javascript function. Instead, it will submit the form on the first click, and then I have to click again in order to get it to run the javascript function. Is there a way I can have them both run with one click?

I want the user to be able to select a radio button, click the button and get the button to print out my pdf all in one click, not two.

I appreciate any help on this.

 <script> function generate(e) { //e.preventDefault(); Call this to prevent form submission try{ alert("Your Report will now download."); var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; //January is 0! var yyyy = today.getFullYear(); if(dd<10) { dd = '0'+dd } if(mm<10) { mm = '0'+mm } today = mm + '/' + dd + '/' + yyyy; var doc = new jsPDF('p', 'pt'); var res = doc.autoTableHtmlToJson(document.getElementById("outputTable")); var textDesc = "<?php echo $desciption; ?>"; var header = function(data) { doc.setFontSize(18); doc.setTextColor(40); doc.setFontStyle('normal'); //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50); doc.text("Workday / Active Directory Sync Report", data.settings.margin.left, 65); }; doc.setFontSize(12); doc.text(20, 30, today); doc.setFontSize(12); doc.text(40, 80, textDesc); var options = { beforePageContent: header, margin: { top: 100 }}; doc.autoTable(res.columns, res.data, options); doc.save("table.pdf"); } catch(err){ alert("Error: "+err.message); } } </script> 

 <form action="/Reports2.php" method="post" style="padding-left: 30px;"> <input type="radio" name="Time" id="1" value="1" > Today<br> <input type="radio" name="Time" id="2" value="2" > This Week<br> <input type="radio" name="Time" id="3" value="3" > This Month<br> <input type="radio" name="Time" id="4" value="4" > All-to-Date<br><br> <button onclick="generate(event)" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="cmd" input type="submit" style="width: 300px; height: 80px; margin-left: 60px; margin-top: 50px; margin-bottom: 100px; background-color: #00a5ff; color: white;"><h4><b> Generate Report </b></h4></button> </form> 

<?php

$today = date("Y-m-d");
$monday = date( 'Y-m-d', strtotime( 'monday this week' ) );
$friday = date( 'Y-m-d', strtotime( 'friday this week' ) );
$minus30 = date( 'Y-m-d', strtotime( '-30 days') );

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["Time"])) {
  $genderErr = "Time is required";
} else {
  $Time = ($_POST["Time"]);

  if($Time == "1")
  {
    $desciption = "All Changes Report for: " . $today;
    $query = "SELECT * FROM updates WHERE LastUpdated = '$today';";
  }
  elseif ($Time == "2") {
    $desciption = "All Changes Report for: " . $monday . " to " . $friday;
    $query = "SELECT * FROM updates WHERE LastUpdated >= '$monday' AND LastUpdated <= '$friday';";
  }
  elseif ($Time == "3") {
    $desciption = "All Changes Report for: " . $minus30 . " to " . $today;
    $query = "SELECT * FROM updates WHERE LastUpdated = '$today' AND LastUpdated >= '$minus30';";
  }
  elseif ($Time == "4") {
    $desciption = "Report for all records";
    $query = "SELECT * FROM updates;";
  }
  else {
    $repTitle = "Example Report";
    $query = "SELECT * FROM updates;";
  }
 }
}
?>

Answer 1

Your function actually is being executed, but there is an error, which is causing some parts of it to not execute.

 <form action="/Reports2.php" method="post" style="padding-left: 30px;" id="form"> <input type="radio" name="Time" id="1" value="1" > Today<br> <input type="radio" name="Time" id="2" value="2" > This Week<br> <input type="radio" name="Time" id="3" value="3" > This Month<br> <input type="radio" name="Time" id="4" value="4" > All-to-Date<br><br> <button onclick="generate(event)" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="cmd" input type="submit" style="width: 300px; height: 80px; margin-left: 60px; margin-top: 50px; margin-bottom: 100px; background-color: #00a5ff; color: white;"><h4><b> Generate Report </b></h4></button> </form> <script> function generate(e) { //e.preventDefault(); Call this to prevent form submission try{ alert("Function generate called"); var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; //January is 0! var yyyy = today.getFullYear(); if(dd<10) { dd = '0'+dd } if(mm<10) { mm = '0'+mm } today = mm + '/' + dd + '/' + yyyy; var doc = new jsPDF('p', 'pt'); var res = doc.autoTableHtmlToJson(document.getElementById("outputTable")); var textDesc = "<?php echo $desciption; ?>"; var header = function(data) { doc.setFontSize(18); doc.setTextColor(40); doc.setFontStyle('normal'); //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50); doc.text("Workday / Active Directory Sync Report", data.settings.margin.left, 65); }; doc.setFontSize(12); doc.text(20, 30, today); doc.setFontSize(12); doc.text(40, 80, textDesc); var options = { beforePageContent: header, margin: { top: 100 }}; doc.autoTable(res.columns, res.data, options); doc.save("table.pdf"); } catch(err){ alert("Error: "+err.message); } } </script>