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

Posted 2023-05-09

【中文标题】单击提交按钮时如何传递单击按钮的值？

【英文标题】：How pass a clicked button's value when submit button is clicked?

【发布时间】：2019-07-22 13:03:38

【问题描述】：

我有一个带有多个按钮和一个提交按钮的 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”。

【问题讨论】：

你需要一些 AJAX。

使用按钮作为单选元素？样式单选按钮的标签看起来像一个按钮。

【参考方案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>

【讨论】：

非常感谢。我会试试这个。

嗨。它不工作。我已经在提交按钮的页面中有另一个 ajax 代码。我不确定如何将其附加到该代码中。

嗨。它不工作。我将表单方法更改为 GET，但在 URL 中看不到按钮值。