How to have a drop down table populate based on another field selection

JavaScript
1

Very new coder here with something well out of my area of knowledge. I only have a very basic level of understanding of PHP and MySQL. To do what I want though, I believe can only be done with javascript/ajax/jquery – however I am not familiar at all with them.

Currently I have a form I have created to collect the data I enter and insert it into my database via PHP.

However, I don’t want to have multiple submit buttons.

I have one table (tagTypes) that has all the types of tags (tags_id) that I want to use in my fantasy miniature gallery database. These tags include such things as “environment”, “equipment”, “genus”, “species”, “sex”.

I also have a table (tags) that contains the tags and matches them to a tag type (2 columns, 1 for the “tags_name” and 1 for the “tags_id”. Both of these columns are primary key columns. Tag_names contains such values as “male”, “female” (associated with “sex”), “waterborne”, “airborne” (associated with “environment”), and etc.

I also have a table (miniTags) where I create a tag and associate it with a miniature (mini_id) from my miniatures table (minis).

When I wish to add a new tag for a miniature, I select the miniature id (mini_id) of the miniature I wish to add tags to, and then display a form. This form has 2 entry fields - one for tags_id and one for tags_name.

On the first entry field, I entered the tags_id (environment/equipment/genus/species/sex), then I want to be able to select from the list of available tags associated with that specific tag_id, on the second entry field. In example, if I select “sex” as the tags_id, then I want to be able to select from (male/female) which are the associated tags_names to tags_id.

Is this something I can do with javascript/ajax/jquery? Can someone please point me in the direction of a tutorial or code example out there that will show me what needs to be done. (Please keep in mind, all my code for doing queries is in PHP – so I need a way to transition between the two).

2

IMHO it is wise to think long and hard in the planning stage. UX has become a profession in its own right. I am far from being an expert but to the best of my abilities I like to put together forms that are as easy as possible for users to do right and as difficult as possible to make mistakes.

The first thing I would do is put things together so that the process will not be broken if JavaScript fails for whatever reason. Then I would use JavaScript to add the polish.

For example I would have a page with a form that takes only the first “filter” and submits, a backend script that validates / filters the supplied input and sends the user to the next form.

Once that was working I would use JavaScript to “get” the form element, add an event handler, prevent default, and use AJAX instead of the submit. eg. much abbreviated pseudocode:

first_filter_input.addEventListener('onchange', some_function)
3

I’m still at ground zero with this. I have no knowledge in this area. I have been trying to find resources, but nothing is too clear. I found a good video and I want to try the example in the video.

This first hang up I have is that I guess I have to download jquery, which I understand is a library file?

In this example, it looks like he references a file called: jquery.min.js which is in a folder called js.

Please let me know if this would be correct.
I have gone to the https://jquery.com/download/ website.
I have downloaded the jquery-3.4.1.min.js file and placed it in a folder called “js” on my root directory.

Is this all that is needed to get started?

I also notice a reference to: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Does it matter whether I link to there, versus saving file and just referencing <script src="js/jquery.min.js"></script>

Is there a “better” choice? Is it better to link it remotely, or store it locally?

4

You need to add a link to it in your html file, something like

<script src="../jquery-1.11.1.js"></script>

obviously substituting the correct name and path.

I’m not sure there’s a definitive “better” - your browser will probably cache it once it’s been referenced the first time anyway, so download times only play a part the first time. If you host it, you can be sure that it will never change, but then I think if you reference it on the hosting site older versions aren’t changed or removed.

You could also have a look through this very similar post, which isn’t quite the same, but could be easily modified to do what you want: Filter Dropdown menu item by value

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.