Using jquery json to populate a form from a SELECT

Question

I thought I was doing really well teaching myself JQuery, but then came upon a problem which I needed JSON for, and now I feel like I'm back as a neanderthal, staring in wonder at the incomprehensible shapes on the screen...

Basically, I am creating a form as follows:

<h2>Heroes and Heroines Site Management System - Edit a Site</h2>
<p><label for="eventLocation">Event Location:</label><select name="eventLocation" id="eventLocation">
<option value="5">Buckstone</option>
<option value="18">Sandiways: Begg</option>
<option value="16">Wing Drumble Wood</option>
<option value="17" selected></option>
<option value="19" selected></option>
<option value="20">Pwll Du</option>
<option value="21" selected></option>
<option value="22">Kinver Edge</option>
<option value="23">Sandiways: Lakeview</option>
<option value="24">Gladstone</option>
<option value="25">Cannock Chase</option>
<option value="26" selected></option>
<option value="27">Consall Scout camp</option>
<option value="28">Broadwater</option>
<option value="29">Horley</option>
<option value="30">Blackwell Court</option>
<option value="31">Roddlesworth, Lancs</option>
<option value="32">Root 'n' Branch </option>
</select></p>
<form method="post" action="/heroes-and-heroines-larp-and-lrp-events.php?task=commitLocationEdit">
<p><label for="name">Location Name:</label><input type="text" name="name" id="name" class="wideText"></p>
<p><label for="address">Location Address:</label><textarea name="address" id="address" rows="6" cols="50"></textarea></p>
<p><label for="postcode">Location postcode:</label><input type="text" name="postcode"></p>
<p><label for="directions">Directions to Location:</label><textarea name="directions" rows="10" cols="50"></textarea></p>
<p><label for="locationType">Location Type:</label><select name="locationType"><option value="YHA">YHA</option>
<option value="Hostel">Hostel</option><option value="Campsite">Campsite</option>
<option value="Scout Camp (Building)">Scout Camp (Building)</option><option value="Scout Camp (Camping)">Scout Camp (Camping)</option>
<option value="8 Hour">8 Hour</option><option value="Other">Other</option>
</select></p>
<p><label for="googleMapLink">Google Map Link:</label><textarea name="googleMapLink" rows="6" cols="50" title="To get a Google Maps Link, go to www.maps.google.co.uk, find the location, and then click on the tiny gear icon in the bottom right of the screen. Click 'Share and Embed Map', choose the 'Embed Map' tab, select 'Small Map' and then copy and paste the code into this box"></textarea></p>
<p><label for="notes">Notes:</label><textarea name="notes" rows="10" cols="50"></textarea></p>
<button type="submit" class="eventBookButton">Edit Location</button>
<a href="/heroes-and-heroines-larp-and-lrp-events.php"><input type="button" class="eventBookButton" value="Cancel" /></a>
</form>

which will allow site moderators to edit the locations which we use to run events at in our club. I want them to be able to select a site from the first select field, and for JQuery to then populate all the subsequent fields with the data from our SQL database. I have been using the following JQuery script, which I took from this previous question:Dynamically fill in form values with jQuery

    <script>
    $("#eventLocation").bind("change", function(e){
        $.getJSON("/common/ajaxCalls.php?task=locationEdit&&eventLocation" + $("#eventLocation").val(),
        function(data){
            $.each(data, function(i,item){
                if (item.field == "name") {
                   $("#name").val(item.value);
                } else if (item.field == "address") {
                   $("#address").val(item.value);
                }
            });

        });
    });
</script>

The JQuery script SHOULD send location to the following PHP script when a selection is made, and then populate the form with the information (which is just dummy data at the moment...)

$json = array(array('field' => 'name', 
   'value' => "test Name"), 
   array('field' => 'address', 
   'value' => "Test Address"));
echo json_encode($json);

I've been mashing my head against this all afternoon, and haven't managed to get anywhere... I've watched the queries through Firefox developer, and the script isn't putting any calls out to the PHP script or anything.

Any suggestions?

Thanks!

Seb

Have you tested the php script by itself to see if it is returning json data? — TimSPQR
– TimSPQR, Commented Jul 28, 2014 at 18:06
yeah, you need to make sure the php is functioning first, by hitting the url + GET params directly. — Bosworth99
– Bosworth99, Commented Jul 28, 2014 at 18:07
I misread his comment about it workign correctly, The url string is not constructed properly, you are using two ampersands and 'eventLocation' has no = leaving not file=value — Brett Santore
– Brett Santore, Commented Jul 28, 2014 at 18:15
Hard code the url to '/common/ajaxCalls.php?task=locationEdit&eventLocation=5' , check to make sure that gives a response on the actual php page, and work from there, if that works hard code '$.getJSON' — Brett Santore
– Brett Santore, Commented Jul 28, 2014 at 18:18
You need to move your entire change function to be within $(function(){ ... });. You currently have it after that. — Patrick Q
– Patrick Q, Commented Jul 28, 2014 at 18:29

Patrick Q · Accepted Answer · 2014-07-28 18:39:11Z

0

You currently have a bunch of <script></script> blocks. You should really combine as many of them as you can. Or, even better, extract them to external js files.

The specific issue here is that you are binding your change handler outside of the $(function(){ ... }); code, which means that it is most likely attempting to run before the DOM is fully loaded.

Here's a combination of two of your script blocks that should fix this issue (plus I fixed your ULR problem).

<script>
$(function(){
    $( document ).tooltip();

    $("#eventLocation").bind("change", function(e){
        $.getJSON("/common/ajaxCalls.php?task=locationEdit&eventLocation=" + $("#eventLocation").val(),
        function(data){
            $.each(data, function(i,item){
                if (item.field == "name") {
                    $("#name").val(item.value);
                } else if (item.field == "address") {
                    $("#address").val(item.value);
                }
            });

        });
    });
});
</script>

answered Jul 28, 2014 at 18:39

Patrick Q

6,3942 gold badges28 silver badges34 bronze badges

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

3 Comments

The All Powerful Over a year ago

PERFECT! Thanks Patrick Q! So, for future reference, what I had done wrong (with the exception of the malformed URL issue) was not encapsulate the JQuery within a $function() { ?

Patrick Q Over a year ago

$(function(){ ... }); is the shorthand/equivalent of $(document).ready(function(){ ... });, which means "run the code inside of this function after the DOM is "ready" (rendered). If you don't put your Javascript/jQuery in there, then it will run as soon as it is reached, which may be before the relevant DOM elements have been rendered.

The All Powerful Over a year ago

Thanks for that! Really appreciate your help! I feel like I am one step closer to wrapping my head round JQuery. :)

Collectives™ on Stack Overflow

Using jquery json to populate a form from a SELECT

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related