Jump to content

Save text from input field into php variable without pressing anything


fredericenko

Recommended Posts

I am using Jquery-ui's Date picker to pick what date I want. But now I need to store that date I type/pick from DatePicker into php variable. I tried doing this myself but it didn't work, It wasn't being saved in variable without pressing a button. Do I need to use Ajax? If yes, can you help me with that?

Thank you.

 

<script>

$( function() {
$( "#datepicker" ).datepicker();
} );
</script>

 

 

<input type="text" id="datepicker" name="datepicker" placeholder="Search by date" />

Link to comment
Share on other sites

Yes, same page. I need that variable so I can filter out table rows from DB tables (mysql). (You know, SELECT * FROM table WHERE $id_text ...) And I wanted to make it instant, so when somebody write down or picks a date, it will instantly filter those tables. For that I need that value (text) from input text box to be stored in php variable.

Link to comment
Share on other sites

You will have to make duplicate of required code externally, it will produce filtered results from database then it should produce the html results to return back to main page at a specific location.

 

It would be triggered to send to external page by onchange event applied to text input, this would send value to external page via get or post requests much like those used for form, the external page will read the post/get value for processing database data and producing html output.

 

So

1 create external page to read get/post, process value output html etc.

2 apply onchange event to send value to external php page see Ajax tutorial.

  • Like 1
Link to comment
Share on other sites

Example html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>datepicker.html</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#datepicker").datepicker();

                $("#datepicker").change(function() {

                    var datepicker_value = $(this).val();
                    $.get("datepicker-result.php?datepicker=" + datepicker_value, function(data, status) {
                        $("#result").html("Data: " + data + "\nStatus: " + status);
                    });
                });

            });


        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div>Date: <input type="text" id="datepicker"></div>
        <hr>
        <h3> Result from external php page, that retrieved by JavaScript a value and sent by get to that external page</h3>
        <div id="result">Nowt selected yet!</div>
    </body>
</html>

datepicker-result.php

<?php

$datapicker_value = "";

if (isset($_GET['datepicker'])) {
    $datapicker_value = $_GET['datepicker'];
}

if (!empty($datapicker_value)) {
// select filter process using value from $GET[''] goes here
    echo "retrieved " . $datapicker_value . " and returned with thanks. <br>";
} else {
    echo "no info found";
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...