10

I have two input fields and I want to post the same data to two different php files, depending on whatever button is clicked.

In my case the data is going into foo.php only, but not into excel.php.

I want the data to go to excel.php, if second button is pressed.

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
  • 7,472
  • 6
  • 48
  • 66
Sarah Mandana
  • 1,474
  • 17
  • 43

3 Answers3

10

You can change the action attribute when the button is clicked as follow:

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

And set the next data-* attributes to your buttons:

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

You can see how it works here.

Related links:


Clarification for OP:

The $( function() {} ); block —equivalent to $(document).ready( function() {} );— specify a function to execute when the DOM is fully loaded; you should put inside all your code which interact with the elements of the DOM.

Community
  • 1
  • 1
tomloprod
  • 7,472
  • 6
  • 48
  • 66
  • 1
    this is a really clean solution it can be used with more than two actions. ty @tomloprod – dparoli Apr 05 '17 at 21:04
  • 1
    @dparoli ;-) The best thing here would be to add a `class` to the buttons to capture the click event. In this way you can use all the buttons (actions) as you need. – tomloprod Apr 05 '17 at 21:05
  • 1
    I thought the same thing the first time I saw the solution :-) anyway its even cleaner now. I'll add to my library. – dparoli Apr 05 '17 at 21:28
2

It can be done in your way by next script and little change in second form declaration

for second form you should set id:

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

And you should add the next script:

$("#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;
});
Kancho Iliev
  • 701
  • 5
  • 13
  • I've done it as close as the try of the user asking that question. Any way I think the @tomloprod's way is better or at least much beautiful. At all if we will use script, then no mater to be used 2 forms. – Kancho Iliev May 16 '15 at 07:55
  • But have you removed the second form and added the fields #from and #to - You have to get his code, add to his form the fields #from & #to from your sample and the result is whole form code. – Kancho Iliev May 16 '15 at 08:05
-2

That happens because you have one form with action="foo.php". It doesn't matter which button you click it will always send the data to the action of the form in this case "foo.php".
Solution:
Seperate the inputs into two forms and set the action of the second form to "excel.php". Then it should work. Hope it helped you.

Edit: Saw the second form in the last second. In this case you just have to take the input of "to" or "from" down to the second form.

alphaClass
  • 37
  • 1
  • 6