Update content of div using javascript/jquery/php

Question

I am currently making a webpage where I want the user to view different database results depending on which result they pick. The results will either be picked through a button, or by a query typed in by hand into a textarea.

I have the connection to the database and everything set up in an external PHP script which I am currently linking in to my site using "require". Within this PHP script I have a "query" variable.

I would like for this variable to be dependent on whatever value is entered by the user.

I suppose this should be doable using some sort of $query = $POST['entry'] and some kind of Ajax call in a javascript? I just don't know how this whole thing should be fitted together.

If we assume that my menu and container looks something like this, where getData.php is where the $query variable is and what returns the database data.

<div id="menu">
    <textarea class="queryText" name="queryText" placeholder="Enter the query..."></textarea>
    <input class="menuButt" type="button" value="Submit" onclick="JavaScript:ChangeDivVal();"/>

</div>
<div id="container">
    <?php
        require 'getData.php';
    ?>
</div>

Here is a picture if that helps my explanation of what I want to do.

I'm very grateful for any help I could possibly get!

//Ambrose

Ajax is what you want; jQuery makes it slightly easier to do but it's easy enough just using javascript. I'm just headed to work right now but if you still need help in a couple of hours I'll throw an example together for you — SteJ
– SteJ, Commented Jul 29, 2015 at 14:16

luba · Accepted Answer · 2015-07-31 11:17:51Z

1

There are neat and simple mechanisms to pass the input of your textarea (the query string) to php and return the database output back to javascript. From there you then can easily attach it to any dom node you wish.

I personally do stuff with jQuery since its so handy. You might wanna use the load function for your simple purpose:

$( document ).ready(function() {
    $('#querySubmitButton').click(function (evt)
    {
        evt.preventDefault(); // stops the submit taking place
        var myQuery = $('#queryText').val(); // get the query value

        // load data received from php script into the dom container
        $('#container').load('getData.php', { query:myQuery, anotherVar:null });
    });
});

The load function simply loads everything the desired script outputs into the given domnode. You can add as many parameters as you want in the second argument and could even use a callback to perform some more js after loading. For details see http://api.jquery.com/load/.

Oh and by the way I changed your html to this:

<div id="menu">
    <textarea id="queryText" name="queryText" placeholder="Enter the query..."></textarea>
    <input id="querySubmitButton" type="button" value="Submit"/>
</div>
<div id="container"></div>

In your getData.php (which I assume produces plain html) you can then use php's $_POST var to get the query.

$query = $_POST['query'];

edited Jul 31, 2015 at 11:17

answered Jul 29, 2015 at 14:29

luba

1224 bronze badges

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

2 Comments

Ambrose Over a year ago

Thank you. I needed to add: $(document).ready(function(){ } Surrounding the JQuery, but other than that it worked great. Thank you!

luba Over a year ago

Yeah of course. I only gave you the naked click function itself since i didn't know the rest of your page setup. I added it now to the post. Glad it was helpful ;)

Collectives™ on Stack Overflow

Update content of div using javascript/jquery/php

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related