Jump to content
fredericenko

Save text from input field into php variable without pressing anything

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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";
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...