【问题标题】:Send same inputs to different actions with one form使用一种形式将相同的输入发送到不同的操作
【发布时间】:2015-07-28 04:06:27
【问题描述】:

我有两个输入字段,我想将相同的数据发布到两个不同的 php 文件,具体取决于单击的按钮。

在我的例子中,数据只进入foo.php,而不是excel.php

如果按下第二个按钮,我希望数据转到 excel.php。


JS

$(function() {

  $("#from").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onClose: function(selectedDate) {
      $("#to").datepicker("option", "minDate", selectedDate);
    }
  });

  $("#to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onClose: function(selectedDate) {
      $("#from").datepicker("option", "maxDate", selectedDate);
    }
  });

});

HTML

<form action="foo.php" method="post">
     <label for="from">From</label>
     <input type="text" id="from" name="from" />

     <label for="to">to</label>
     <input type="text" id="to" name="to" /> <br>

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

<form action="excel.php" method="post">
     <input type="submit" value="Download Excel file">
</form>

【问题讨论】:

  • 为什么会有两个单独的表格?
  • 是的@tomloprod 它不起作用

标签: php jquery html form-submit


【解决方案1】:

您可以在单击按钮时更改action 属性,如下所示:

$(function() { 
    $( ".actionable" ).click( function() {
        $('#myForm').attr('action', $(this).data("action"));
        $('#myForm').submit();
    });
});

并将下一个data-* 属性设置为您的按钮:

<form name="form" id="myForm" method="post">
    <input type="submit" class="actionable" value="Viewchart" data-action="foo.php"/>
    <input type="submit" class="actionable" value="Excel" data-action="excel.php"/>
</form>

你可以看到它是如何工作的here


相关链接:


对 OP 的说明:

$( function() {} ); 块 — 相当于 $(document).ready( function() {} ); — 指定在 DOM 完全加载时执行的函数;您应该将所有与 DOM 元素交互的代码放入其中。

【讨论】:

  • 这是一个非常干净的解决方案,它可以用于两个以上的操作。 ty @tomloprod
  • @dparoli ;-) 这里最好的办法是在按钮上添加一个class 来捕获点击事件。通过这种方式,您可以根据需要使用所有按钮(操作)。
  • 我第一次看到解决方案时也是这么想的 :-) 反正现在它更干净了。我将添加到我的库中。
【解决方案2】:

可以通过下一个脚本以您的方式完成,并且在第二个表单声明中几乎没有变化

对于第二种形式,您应该设置 id:

<form id="form2" action="excel.php" method="post">

你应该添加下一个脚本:

$("#form2").submit( function(eventObj){
$(this).append('<input type="hidden" name="from" value="'+$("#from").val()+'" /> ');  
$(this).append('<input type="hidden" name="to" value="'+$("#to").val()+'" /> ');               
return true;
});

【讨论】:

  • 我已经完成了与用户提出该问题的尝试一样接近。无论如何,我认为@tomloprod 的方式更好或至少更漂亮。如果我们将使用脚本,那么无论使用2种形式。
  • 但是您是否删除了第二个表单并添加了字段#from 和#to - 您必须获取他的代码,将您的示例中的字段#from 和#to 添加到他的表单中,结果是整个表单代码。
【解决方案3】:

这是因为您有一个带有 action="foo.php" 的表单。您单击哪个按钮并不重要,它总是将数据发送到表单的操作,在这种情况下为“foo.php”。
解决方案:
将输入分成两个表单,并将第二个表单的操作设置为“excel.php”。然后它应该工作。希望对你有所帮助。

编辑:在最后一秒看到第二个表格。在这种情况下,您只需将“to”或“from”输入到第二种形式。

【讨论】:

  • 但是我只想要一个表格,我不需要显示两个表格
猜你喜欢
  • 2016-10-06
  • 2020-12-06
  • 1970-01-01
  • 2020-08-27
  • 2017-07-09
  • 2022-08-03
  • 1970-01-01
  • 2010-09-29
  • 1970-01-01
相关资源
最近更新 更多