Send same inputs to different actions with one form - php

Question

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>

Answer 1

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:
You can read more about the data-* attributes here: http://www.w3schools.com/tags/att_global_data.asp
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.

Answer 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;
});

Answer 3

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.