Member Avatar for jeremygb

Hello fellow programmers. I'm in a need of community assistance :)

I have a php form with three dropdowns that has jquery function that loads .txt files and builds two dynamic dropdowns realted to first choice.

First user choses option (hardcoded in script) - normal dropdown. Then the script takes control of other choices.

Script is here. Details of my question are below

<script type="text/javascript">
$(function() {

$("#text-one").change(function() {

$.get("/textdata2/podgrupa/" + $(this).val() + ".txt", function(data) {
  $('#text-two').html('<select onChange="load_subcategory(this.value)" name="podkategorija">'+data+'</select>');
    if($("#text-two select").val()!='base'){
        $.get("/textdata2/podkategorija/" + $("#text-two select").val() + ".txt", function(data) {
          $('#text-three').html('<select name="podgrupa">'+data+'</select>');
        }).fail(function() { 
            alert("Missing file: /textdata2/podkategorija/" + $("#text-two select").val() + ".txt");
            $("#text-three").html('<select name="podgrupa"><option>Odaberite rubriku</option></select>') ;
        });
    }else
        $("#text-three").html('<select name="podgrupa"><option>Odaberite rubriku</option></select>');

});


});
});

function load_subcategory(val){
    $.get("/textdata2/podkategorija/" + val + ".txt", function(data) {
      $('#text-three').html('<select name="podgrupa">'+data+'</select>');
    }).fail(function() { 
            alert("Missing file: /textdata2/podkategorija/" + val + ".txt");
            $("#text-three").html('<select name="podgrupa"><option>Odaberite rubriku</option></select>') 
        });

}
</script>

example of one txt file from podgrupa folder

<option value="360">Iznajmljivanje</option>
<option value="361">Unajmljivanje</option>
<option value="456">Cimeri</option>

example of one txt file from podkategorija folder (that is related by value to choice in dropdown that looks into podgrupa folder)

<option value="120">regija 051</option>                    
<option value="121">regija 052</option>                    
<option value="122">ostalo</option>

When form posts data that user had choose, it writes values from tags. With these values jquery script knows which choice is connected to other.

For example: If user had chose: Rooms (from first hardcoded dropdown - code is 155 in option value), then script automaticaly loads second dropdown with choices from txt file (podgrupa), then user choses from those choices (for example Cimeri - 456) in second dropdown (podgrupa), and script loads third dropdown value (podkategorija) related to choice from second. User then choses value from that 3rd dropdown (for example regija 052 - 121)

After form submission, these values would be written by php: 155, 456, 121.

However, I need it to write different values for second(456) and third(121) choice. - For second it needs to write value "3" and for third value "2" if user has chosen those choices from example. As you can see those different values are the same as position of choice in txt file.

Can something like that be achived with ? Maybe with additional ID? Or maybe these values (456, 121) sholud be the ID, and value sholud be order in txt file (1,2,3...)

Hope you understand what I want to achieve :)

Can I maybe add ID to option (in all files, manually) and use that to replace option value with option ID before writing it file or sending to email?

  • 2 Contributors
  • 1 Reply
  • 1K Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by paulkd

Dani AI

Generated

Short answer: use a hidden field (or one hidden field per select) and set it to the option position (index) in JavaScript before the form is submitted — this is exactly the simple idea suggested, but with a few practical details for your dynamic selects.

Keep the visible selects for the UI, but remove/rename their name attributes (or give them harmless names) so they do not collide with submission. Add hidden inputs that carry the values the server should receive (order numbers). Update those hidden inputs on every change and once more on submit so programmatic changes are captured.

Example (conceptual) — update the order (1-based) of the selected option and handle a leading placeholder option:

<input type="hidden" id="podgrupa_order" name="podgrupa" value="">
<input type="hidden" id="podkategorija_order" name="podkategorija" value="">
// when a dynamic select changes, compute visibleIndex and write 1-based order
$('#text-two, #text-three').on('change', 'select', function () {
  var sel = $(this);
  var idx = sel.find('option').index(sel.find('option:selected')); // 0-based
  var placeholderFirst = sel.find('option:first').text().match(/Odaberite|Select/i);
  var order = placeholderFirst ? idx : idx + 1;
  if (this.id === '...') $('#podgrupa_order').val(order); // wire to correct hidden id
});
$('form').on('submit', function () {
  $('#text-two select, #text-three select').trigger('change');
});

Alternatives: add a data-order attribute to each <option> in your .txt files or swap attributes so value is the order and store the original id in data-id. If you prefer server-side, read the same .txt, parse its options and map the chosen value to its line/position (PHP: parse HTML or use a simple line-scan) — this avoids touching client files.

Member Avatar for paulkd

If I understand correctly, you are populating a select based on the value chosen from a previous select. When all 3 options are chosen you want the value of the first select and the index (rather than value) of the options chosen for the remaining selects to be submitted.

You could use a hidden form field <input name="idlist" type="hidden" value=""> which will be updated by JavaScript (jQuery) as each option is chosen. e.g. <input name="idlist" type="hidden" value="155,3,2>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.