javascript - 不允许我在同一个按钮上提交和点击

Question

所以我遇到的问题是，当我单击我的按钮时，它希望它提交 php 表单并运行 javascript 函数。相反，它会在第一次点击时提交表单，然后我必须再次点击才能让它运行 javascript 函数。有没有一种方法可以让它们一键运行？

我希望用户能够选择一个单选按钮，单击该按钮并让该按钮一键打印出我的 pdf，而不是两次。

我很感激这方面的任何帮助。

<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;";
  }
 }
}
?>

标签： javascriptphphtml

Answer 1

您的函数实际上正在执行，但有一个错误，导致它的某些部分无法执行。

<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>