单击提交按钮时如何传递单击按钮的值？

Question

我有一个带有多个按钮和一个提交按钮的 HTML 表单。我正在尝试传递在单击提交按钮之前单击的按钮的值。该程序的主要功能是在相应的表中上传一个与按钮同名的 csv 文件，即表的名称与按钮的值相同。所以传入的值会在后续php页面的mysql查询中使用。

我用这样的php post方法试过了：

if(isset($_POST['submit'])){
$_POST['buttonname'];
} 

index.php

<form id="upload_csv" method="GET" enctype="multipart/form-data">

<button type="button" id="button1" name = "button1" 
value="role">Role</button>
<button type="button" id="button2" name = "button1" 
value="report">Report</button>
<button type="button" id="button3" name = "button3">Brand</button>

  <!-- uploading the csv file here -->
 <input type="file" name="employee_file" style="margin-top:15px;" /> 

 <input type = "submit" value="submit" name="submit">
 </form>


<!-- ajax code to upload csv -->

  <script>
  $(document).ready(function(){  
  $('#button1,#button2,#button3').click(function(){
  $('#upload_csv').on("submit", function(e){  
   e.preventDefault(); 

            $.ajax({  
                 url:"import.php",  
                 method:"POST",  
                 data:new FormData(this),  
                 contentType:false,         
                 cache:false,                
                 processData:false,          
                 success: function(data){  

                          alert("Data updated successfully");  

                 }  
            })  
       });
           });
   });

</script>

因此，首先，提交按钮只有在其中一个按钮被点击时才应该发布。如果单击按钮然后单击提交按钮，则单击按钮的值将传递到下一页。例如，如果单击第一个按钮，则应传递值“role”。

Answer 1

您可以使用ajax和jquery，即：按钮的onclick获取它的值，然后提交的onclick使用ajax将点击的按钮值传递给php页面。例如：

//on click of button get value
$("button").on("click", function() {

  //getting  button click value
  var value = $(this).val();
  console.log(value);
  $("input[name='submit']").click(function(e) {
    e.preventDefault();
    console.log(value);
    //calling ajax
    $.ajax({
      type: "POST",
      url: "yourphppage",
      data: {
        'value': value //<-passing value to php
      },
      success: function(response) {
        //display something 
        alert(response);
      },
      error: function(jqXHR) {

        alert("There was a problem");
      }
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form method="post">
  <button type="button" id="button1" name="button1" value="role">Role</button>
  <button type="button" id="button2" name="button1" value="report">Report</button>
  <button type="button" id="button3" name="button3" value="brand">Brand</button>

  <input type="submit" value="submit" name="submit">
</form>

然后是get value php 页面中的按钮，如下所示：

if(isset($_POST['value'])){
echo $_POST['value'];
} 

更新1：

---

尝试如下所示，我使用 append 将键/值附加到 formData。即：

$(document).ready(function() {
  $('button').click(function() {
    //getting  button click value
    var value = $(this).val();
     console.log(value);
    $('#upload_csv').on("submit", function(e) {
      e.preventDefault();
     
      //creating object for form
      var formData = new FormData();
      //appenfing data for button value
      formData.append('values', value);
      //append file
      
      formData.append('files', $('input[type=file]')[0].files[0]);



      $.ajax({
        url: "import.php",
        method: "POST",
        data: formData,
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {

          alert("Data updated successfully");

        }
      })
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="upload_csv" method="GET" enctype="multipart/form-data">

  <button type="button" id="button1" name="button1" value="role">Role</button>
  <button type="button" id="button2" name="button1" value="report">Report</button>
  <button type="button" id="button3" name="button3" value="brand">Brand</button>

  <!-- uploading the csv file here -->
  <input type="file" name="employee_file" style="margin-top:15px;" id="myFileInput" />

  <input type="submit" value="submit" name="submit">
</form>