Tag: onchange
Nabin Nepal (Starx) forms jquery onchange option select
March 28, 2012

Jquery form onchange select values changing

Question by Malyo

MalyoMalyo

I’m looking for best solution to this problem. I have a simple shop logical problem. There are 2 select elements, size and color. I want to make them dependent, on data (now it’s example data, but later it’s gonna be from database) – size will decide which color options will be visible for customer (hiding not necessary ones).

First problem is that when i make change event, and i wanna hide the default shown element on document ready, it’s still visible (i’d have to change color to different than open dropdown again and it won’t be visible then).

Second is that i’m looking for most flexible solution, since i have doubts about mine. Here’s the code:

       var rozmiar = new Array("S", "M", "L", "XL", "XXL");
   var kolor = new Array("Czerwony", "Niebieski", "Zielony", "Biały", "Czarny");
   var opcje = new Array( rozmiar, kolor);

        $(document).ready(function(){
        $('.form1').change(function(){
                $('.form2 option').show();

                var selectSelector = function(z){
                    selectSelector = $('select.form2 option[value='+kolor[z]+']').hide();
                };

                wybranyRozmiar = $(this).val();
                    if(wybranyRozmiar == rozmiar[0]){
                        selectSelector(0);
                    }
                    if(wybranyRozmiar == rozmiar[1]){
                        selectSelector(1);
                    }
                    if(wybranyRozmiar == rozmiar[2]){
                        selectSelector(2);
                    }
                    if(wybranyRozmiar == rozmiar[3]){
                        selectSelector(3);
                    }
                    if(wybranyRozmiar == rozmiar[4]){
                        selectSelector(4);
                    }
            });
        });

Answer by Starx

StarxStarx

I am answering the only part I understand.

Instead of using multiple if statements you can use switch

switch(selectsize) {
   case rozmiar[1]:
       $('select.form2 option[value='+color[2]+']').hide();
       break;
   //case <another>"
       //break;
}
Nabin Nepal (Starx) ajax jquery onchange
December 3, 2010

jQuery Load form elements through ajax, from onchange event of drop down box

Question by miojamo

miojamomiojamo

I have dropdown and need to dynamical load form elements based on statement

<select name="type" id="type">
   <option value="1">input</option>
   <option value="2">text</option>
</select>

case 1 load some form elements (inout etc..)
case 2 clear these elements
…

Thanks

Answer by andres descalzo

andres descalzoandres descalzo

try this:

$(function() {

  $('#type').bind('change', function(ev) {

     var value = $(this).val();

     $.ajax({
        ...
        data: {valueType: value, html: encodeURIComponent($("#addhtml").html())},
        ...
     });

  });


});

Answer by Starx

StarxStarx

We may want to try this also

$("#type").change(function() {
    $.post(
        "yourRequestHandlingPage.php",
        { 
          param: $(this).val();
        },
        function(data) {
            //supposing data holds the html output of dynamically creawted form element
            $(".myformcontent").append(data); //add the elements at the end of the form elemetn
        }
});
...

Please fill the form - I will response as fast as I can!