Dynamic dropdowns with jquery and php

Question

i need to know how to keep the states of each dynamically created dropdowns via jquery.

My scenario is like this, i have an option to user to select a date and based on selected date a dropdown is generated. lets say user generated 2 dats and below 2 dropdowns are dynamically generated with the help of jquery.

<select id="dd1">
  <option value="option1">option 1</option>
  <option value="option2">option 2</option>
  <option value="option3">option 3</option>
</select>

<select id="dd2">
  <option value="option5">option 5</option>
  <option value="option8">option 8</option>
  <option value="option9">option 9</option>
</select>

What i am concerned about is, since these are dyamically created ones i need to keep the same when a form is submitted with erros. so i have done that part but i cannot understand how to get the previously selected values when form/page is submitted with errors ?

for example, in dd, if user has selected option 1 and when the form is submitted with erros it should generate the same dropdown and select it the last selected value which is option 1 for dd1

any quickly reply is highly appreciated. its a store stopper now.

My yii code is like below.

<?php echo CHtml::activeLabelEx($cssAtapsClient, 'outgoing_call_dates'); ?>

And there is a calender in a popup which sets the value of above text box and loads the dynamic dropdowns as highlighted.

enter image description here

Each dynamically added dropdown has a naming convention like below. (select name='CSSAtapsClient[client_time_window][0]')

CSSAtapsClient[client_time_window][0]
CSSAtapsClient[client_time_window][1]
CSSAtapsClient[client_time_window][2]
CSSAtapsClient[client_time_window][3]

Wondering how to save the data via PHP ?

Alex Art. · Accepted Answer · 2013-09-30 05:47:36Z

1

You could save those selected options into some temp variables on form submit event and if everything went OK you could clean them up in success handler if not, just select those options in error handler.

var firstOption;
var secondOption
$("#form").submit(function() {
    firstOption = //your first selection;
    secondOption = //your second selection;
    $.ajax({
     type: "POST",
      url: //your url,
      data: $(this).serialize(),
      success: function() {
        // callback code here
        firstOption = null;
        secondSelection = null;
       },
      error: function(){
         //set your options states from your variables
      }
    });
  });

You could also save those generated Dropdowns content :

var firstDDcontent =$('#firstDropdown').html()

So you could restore it later.

edited Sep 30, 2013 at 5:47

answered Sep 30, 2013 at 5:41

Alex Art.

8,7813 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dev1234 Over a year ago

tnx but how do i handle it without ajax ? is it a best practice to use ajax in a situation like this?

Alex Art. Over a year ago

Well ajax is my preferred way to deal with those kind of situations. There are couple of articles that describe ajax pros and cons so you could decide if it suits you in this particular case. You could read about some of them here: jtechniques.com/web/ajax/disadvantages-with-AJAX

Collectives™ on Stack Overflow

Dynamic dropdowns with jquery and php

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related