Return PHP data via Javascript function without submitting form

Question

I have a PHP function that accepts two dates and returns the number of business days between them (holidays included, because we pay out on those). Right now, I can call this function within a Javascript function and get a value back if I send the function real dates. For example:

function daycount() {
var days="<?php echo getDays("01/01/2014","01/31/2014"); ?>";
document.write(days);
}

This returns 23, as expected. What I would like to have happen is for the user to be able to put start and end dates in two fields and then feed those field values to the above function, displaying the result without the user having to submit the form. Something like this:

 <label for="startDate">Start</label>
 <input type="text" name="startDate" id="startDate" onFocus="daycount();" />
 <label for="endDate">End</label>
 <input type="text" name="endDate" id="endDate" onFocus="daycount();" />

Is this possible?

Of course it’s possible, f.e. via an AJAX request in the background. — C3roe
– C3roe, Commented Jan 23, 2014 at 21:19
There's no need to use PHP for this - there's plenty of JS date manipulation libraries, include the built-in Date() object which can do this sort of thing for you. — Marc B
– Marc B, Commented Jan 23, 2014 at 21:19

James Craig · Accepted Answer · 2014-01-23 21:31:21Z

2

You don't need PHP for this, as you can do all of this with JavaScript. However if you want to use PHP then you can do it like this with AJAX in jQuery:

Input fields:

<input type="text" name="startDate" id="startDate">
<input type="text" name="endDate" id="endDate">

jQuery:

$('form').submit(function(event) {
    var start = $('#startDate').val();
    var end = $('#endDate').val();

    $.ajax({
        type: 'POST',
        url: 'date.php',
        data: {
            startDate: start,
            endDate: end
        },
        success: function(data) {
            $('#result').text(data);
        }
    });

    event.preventDefault();
});

date.php:

<?php
    // You getDays function here    

    echo getDays($_POST['startDate'], $_POST['endDate']);
?>

answered Jan 23, 2014 at 21:31

James Craig

6,90210 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

Thanks! This works, but only when I click a submit button. It looks like it should be loading my result as soon as I put dates into the two fields, but it's not. What might I be missing?

dev7 · Accepted Answer · 2014-01-23 21:28:40Z

PHP happens on server side, Javascript on client side. That means that your PHP script is happening before the javascript runs. You can not just call PHP functions from a Javascript function because they happen at different times.

The best method of achieving what you are requesting will be using Ajax to communicate between your Javascript scripts and PHP scripts. The other alternative will be posting with a form but that's not very 'web 2.0'...

Ajax request will look something like this (using jQuery):

$.ajax({
url: "script.php",
method:'POST'
})
.success(function( data ) {
  //do your thing here with the returned data 
});

and you main code will look similar to this:

function daycount() {
$.ajax({
    url: "script.php",
    method:'POST',
    data: {var1:'',var2:'', etc etc}
    })
    .success(function( data ) {
      var days = data;//depending on how you return the data from the php script
      document.write(days);
    });
}

Hope this helps!

duke · Accepted Answer · 2014-01-23 21:35:42Z

1

I would do it using jQuery $.post sending two dates to php script which should return answer e.g:

HTML:

<form id='days_form'>
    <input name='date_one' /> - <input name='date_two'/>
    <input type='button' id='sendBtn'>
</form>

<span id='answer'></span>

JavaScript:

$('#sendBtn').click(function{
    $.post('php_script_file.php', $('#days_form').serialize(), function(data){
        $('#answer').html(data);
    });
});

PHP file:

print getDays("$_POST['date_one']", $_POST['date_two']);

answered Jan 23, 2014 at 21:35

duke

374 bronze badges

Comments

HariHaraSudhan · Accepted Answer · 2014-01-23 21:23:14Z

-1

Not in this way. What you must understand is that when the php renders the page from server the javascript part is written as

function daycount() {
var days="23";
document.write(days);
}

This is why its working. After it renders if you want the functionality to work then there are two ways.

First one- if you want it to be done only from backend(php) then you need to make ajax call and get the results.

Second one - If you want it to be done on client side , you should convert business login written in getDays($a,$b); Javascript.

For the javascript date functionality try using moment.js

answered Jan 23, 2014 at 21:23

HariHaraSudhan

1,3703 gold badges15 silver badges24 bronze badges

Collectives™ on Stack Overflow

Return PHP data via Javascript function without submitting form

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related