Html Combo Box With Php

Hi There

I have found a lot of help with this but no one is doing it the way i want.

Im Creating a area on the internet where our mechanics can look at invoices they have done for certain vehicles.

What i want to be able to do is populate the combo box with items generated from our database.

now here is the problem. I would like to have my HTML pages and my PHP script separate from each other so i wold like to have invoices.html and invoices.php and the php file will have all the functions that i want to use with the invoices HTML page

Everyone ive seen online has the scrips on the webpage, if possible i would to call a function to get the details

Many thanks for any help:)

Ian

A simple solution would be to use jQuery to retrieve the data via AJAX/JSON and then populate your <select> box.

Hi tr333

Many thanks for the reply, I'm very new to this and i'd rather (if at all possible) try and keep this as simple as possible. to this end i would prefer to keep all script and the html separatel (i can execpt this my not be advised)
the better way in fact would be to have the HTML in the php Page.

when the user first navigates too the page i would like them to have a Text box for searching then a button that when clicked populates the DropDown List then the user selects from the dropdown list and clicks submit and a list of invoices for that vehicle is shown.

regards

Ian

Ht tr333

Many thanks for all you help on this, I managed to get it working how i want, Thanks to you :). What id like to know if its possible to have the bit of javascript from the example in a java file seperate from the HTML File

Code:

---

<Script type="text/javascript">
        function GetVehicles(){
                $(function(){
                        var regpart=document.getElementsByName('serstr')[0].value
                        var items="<option value='0'></option>";
                        $.getJSON("refreshvehicles.php?a="+regpart,function(data){
                                var item="";
                                $.each(data,function(index,item){
                                        items+="<option value='"+item.VehicleId+"'>"+item.Vehicle+"</option>";
                                });
                                $("#a1_vehicle").html(items);
                        });
                });
        }
</script>

---

this is the javascript ive got on my html page its using jquery so when i tried to put it in its own little file it doesn't work. FYI i have added the whole script in to a function called get vehicles so i can call it from a button

Code:

---

<input onclick="GetVehicles()" type='button' name='Filter' value='Filter'/><br>

---

what id llike to do now is get rid on the javascript from the HTML page if poss?

Ian

your problem is with the "$(function(){". That's equivalent to .ready(), so the code inside that anonymous function will run after the document has finished loading. You will want to have your function outside of a .ready() event handler. If you were setting up the event binding for the button with javascript, you would do it inside a docready handler, but that's not required if you're setting it directly on the button tag itself.

You can add the javascript code (without script tags) to a separate .js file and include it in your page with <script src="path/to/mycode.js"></script>. No need for the type="" attribute as there is only one type of script used in html these days. Check out the HTML5 Boilerplate for some best-practices on HTML.

I would also change the $.getJSON call to this:

JavaScript Code:

$.getJSON("refreshvehicles.php", { "a": regpart }, function(data){

The $.getJSON method accepts a "data" object as the second argument, whose values get appended to the url in correct querystring format.