CODEWITHSUNDEEP
javascriptphpjqueryforms
Chris
Chris

Reputation: 545

Return PHP data via Javascript function without submitting form

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?

Upvotes: 0

Views: 1159

Answers (4)

duke
duke

Reputation: 37

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']);

Upvotes: 1

James Craig
James Craig

Reputation: 6854

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']);
?>

Upvotes: 2

dev7
dev7

Reputation: 6369

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!

Upvotes: 1

HariHaraSudhan
HariHaraSudhan

Reputation: 1360

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

Upvotes: -1

Related Questions