Develop Reference

How to add dropdown menus dynamically based on previous selection?

Assume that I have a hierarchy of categories/subcategories such as:
Books
Fiction
Cooking
Seafood
Pizza
IT
HTML
JavaScript
ReactJS
NodeJS
As you have noticed, we have an unknown depth of categories where ReactJS have a depth of 3, but Fiction have a depth of 1
I am trying to create a form that includes a dropdown menu of root categories (Books, Clothes, Candies, ...etc). Whenever the user clicks on a root category (assume it is Books). Another dropdown will appear with the subcategories (Fiction, Cooking and IT). After that, when the user clicks on IT, another dropdown menu will appear below which will be HTML and JavaScript. Finally, when the user clicks on JavaScript, the final dropdown menu will appear which will contain ReactJS and NodeJS.
Please note that:
The user can choose any level and procceed. I mean he can choose Books and submit the form, or click NodeJS and submit the form.
I want to give the user the ability to rollback. I mean that maybe the user clicks on Books > IT > HTML > JavaScript > NodeJS. He can go to the second dropdown menu (Fiction, Cooking and IT), and then choose Cooking. In this case, all the drop menus below the second dropdown menu will be deleted and we will have a new drop menu which contains Seafood and Pizza.
When we submit the form, only the final dropdown menu value will be sent to the server.
I am not that strong in Frontend, I have already built and tested the Backend which receives the category/subcategory id and then returns all of the subcategories underneath it.
My questions are:
Is my approach good? (You can suggest better approaches)
If my approach is good, how to implement it in Vanilla JavaScript?
Here is a minimal code:
<div id="myDiv">
<select name="category">
<option value="">Please select a category...</option>
<!-- Some for-loop that is getting the main categories successfully -->
</select>
</div>
<script>
const request = new Request(
'Here is the URL to the controller that already gives me the subcategories successfully', {
method: 'POST',
body: JSON.stringify({parent: 1}), // 1 is the id of the parent category that we want to get its subcategories
}
);
fetch(request).then(function (response) {
return response.json();
}).then(function (json) {
for (const i in json) {
console.log(json[i]['name']); // This line prints the subcategories names successfully
}
});
</script>
It is not necessarily to give me the full code, I only need some guidelines.

How to do delayed select option generation

I have some web pages which display a number of (up to several dozen) work items.
Each work item is a form consisting of several fields, two of which are large selects (one about 350 items and the other about 650 options) which are always identical other than the initially selected item.
The page can be pretty slow to load. Some of this may be due to the 24KB + 52KB of html for each copy of those selects, and I'm betting a fair amount of it is the time for the browser to build what is essentially the same huge chunk of (mostly of no interest) DOM over and over again.
What I'm thinking might be better is to just keep a master copy of the options for each in an array and just start each select out with only a single option (the initially selected value), For example:
<form ...>
<input ...>
<select class='dept_select' id='dept' name='dept' size='1'>
<option value='12345' selected>Department of Banking and Finance
</select>
<select class='approver_select' id='approver' name='approver' size='1'>
<option value='jpflat' selected>J. Pierpont Flathead
</select>
</form>
and then when the user clicks on the one selectbox they are interested in, build the rest of it from the array. Is this at all sensible, and if it might be, is there some clever and succinct way to do this in jQuery or am I going to have to invent it from whole cloth and raw JavaScript? FWIW, there's no real correlation between the selects (e.g., like selecting a state limits the valid choices for selecting a city).

I'm not going to post code so far. I recommend to re-build your concept a bit to get to a simpler structure:
A user can only edit one item at a time. There's no need to generate "a couple of dozen forms", as long as no edit action is taken.
render the items as a simple two-dimensional array with rows and fields, preferable in a JSON
built the table of items dynamically in the client by use of jQuery
if the user wants to edit an item, open a div layer, render a form into it by the use of the above array. Of course with just one single set of these dropdowns.
consider to load these dropdowns on request by AJAX or use some "combo box" features like in jQuery ui (below).
on "save" submit the form and close the div layer
There are certain containers and dialogs ready-to-use in jQuery ui to achieve this. The result will be
more generic code
less html overhead
better usability even

Well, turns out it wasn't as hard as I was imagining it...
<form ...>
<select id="ts" name="ts" size="1" class="tsc">
<option value="12345" selected>This is the initial value</option>
</select>
</form>
and:
var arr = [
{V:'alpha',T:'One'},
{V:'bravo',T:'Two'},
{V:'charlie',T:'Three'}
];
$(function() {
$( '.tsc' ).mousedown(function() {
var sel = $(this);
sel.unbind('mousedown');
$(arr).each(function() {
sel.append($('<option>')
.attr('value', this.V)
.text(this.T));
});
});
});
jQuery rocks.

How to reference page when I select option value?

I use php code to create one shopping cart. When I click in product page, Since the database have more products that use php code to create product page.
Now, I can ten product in one page. But I need a select box to change product quantity in one page. How can I do for it?
This is my code.
Select Box code.
$content .= "<span style=\"margin-left:50px;color:#BE1E2D;font-size:14px;font-weight:bold;\">show
<select name=\"show_num_select\">
<option value=\"10\">10</option>
<option value=\"20\">20</option>
<option value=\"30\">30</option>
<option value=\"50\">50</option>
<option value=\"100\">100</option>
</select>
item each page</span>";
Read select box value.
$show_num_select = isset($_GET['show_num_select'])?$_GET['show_num_select']:"10";
Create product page. n is product type. Product::count_all is a function.
if(empty($_GET['n'])){
$page = !empty($_GET['page'])? (int)$_GET['page']:1;
$per_page = $show_num_select;
$total_count = Product::count_all(true);
if(empty($_GET['page']) || (int)$_GET['page'] > ceil($total_count / $per_page) ){
$page = 1;
}

Keep a count of current items shown and use it to improve the fetch by querying only for items apart from the ones already rendered. Using ajax fetch the next set of items and render that section. Just a suggestion to avoid fetching all items.
Avoiding page refresh will be good from users point of view.

I don't see where you read the data from the database or another data source. If you use an SQL related data source, use something like:
SELECT id, product_title FROM product LIMIT :start,:end
Where ":start" is the current page number (times) $per_page and ":end" is just $per_page.

Populate form fields with selected value of previously selected form fields

I am doing a holiday booking form using RS Form with Joomla whereby I want answers from previous questions to automatically populate the answer for other questions so that, for example, the answer to 'what airline is person 1 travelling on?' automatically populates the answer to 'what airline is person 2 travelling on?'.
I am able to do this for simple text fields when a check box (id=samedetails20 in code below) is checked. When checked, the following works:
<script type="text/javascript">
function repeat(f) {
if(f.samedetails20.checked == true) {
f.airline2.value = f.airline1.value;
f.Airport2.value = f.Airport1.value;
f.flightno2.value = f.flightno1.value;
f.airlinereturn2.value = f.airlinereturn1.value;
}
}
</script>
HTML
<input type="text" value="" size="20" name="form[airline2]" id="airline2" class="rsform-input-box">`
However, the form also includes a drop down list to select arrival/departure times and a pop up calendar for arrival/departure dates. I do not know how to get the values from these to automatically populate the other fields.
I have tried to use selectedIndex and options but this does not work or I am doing something wrong e.g.
f.DepartureTime2.value = f.DepartureTime1.options[f.DepartureTime1.selectedIndex].value;
Sample HTML
<select name="form[DepartureTime2][]" id="DepartureTime2" class="rsform-select-box"><option value="00">00</option><option value="01">01</option>
<option value="02">02</option><option value="03">03</option>
etc.
I also have no idea how to do this for the pop-up calendar:
Sample HTML:
<input id="txtcal9_1" name="form[dateofdeparture1]" type="text" class="txtCal rsform-calendar-box" value="Departure date"> (Departure Date is a default value until date is selected)
Any help much appreciated.

Javascript is client-side only. No values are sent to the server, and JS must work with only what it's got on the client machine (that is, what it's received from the server).
This means that when the new page is sent after a page reload (like a refresh or form submit or new window), Javascript is sent fresh values. The old ones are gone, unless your browser ( = client side) remembers what you typed in an <input> box for some reason.
So, no, you can't do this in just Javascript. You'll need something server-side like PHP or ASP or JSP to receive your values server-side, process them, and send them back to the client for Javascript to use.

need to display other field on live status of other field

When a user selects a state from a state drop-down, it will display a list of high-schools in a drop-down field.
I am able to display the high schools once the user selects a state, but I am having trouble when the user submits the form w/o selecting a high school. If they do not select a high school, it will not display the form.
That is not really the problem, that is one of the ways the form can fail validation, which brings me to my question.
When the user fails validation, it will display the same form with the fields filled in the info they inputted before submitting the form.
The state drop-down is pre selected with the state they selected, but the high school drop down is no where to be seen. If I unselect the state drop-down, then re-select a state, then the high school list will display.
I am using a bind change on the #state field.
How can I display the high school field w/o having to wait for a click or change on the state field?
<select name="state" id="state">
<option></option>
<option value="NY">NY</option>
<option value="TX">TX</option>
</select>
<select name="high_school" id="high_school">
<option></option>
<option value="Bayside High">Bayside High</option>
<option value="Ridgemont High">Ridgement High</option>
</select>
$("#high_school").hide();
$('#state').bind('change', function() {
$("#high_school").show();
});
I assume I'll need to keep an eye on #state on load

Your are right, about keeping an eye on #state on load.
//check to see if something in #state is selected, if not hide #high_school
if($("#state").val() == '') {
$("#high_school").hide();
}
$('#state').bind('change', function() {
$("#high_school").show();
});
see: http://jsfiddle.net/89K5G/
Try choosing #state, and refresh the frame :)