jQuery UI Selectable form values

I am using the jQuery UI selection box to create a multiple choice form.
The question and its options are created dynamically from mysql.
Therefore there could be 2 options to choose from or 22.

I want each selection to be entered into the database separately.

As you can see, currently I am inserting the values in 1 textbox, seperating each number via a comma.

What I want is to have a hidden textbox for each option. Then if the selection is selected, the value is inserted into its corresponding textbox.

Code i am currently using below...



jQuery
    $(function() {
        $("#selectable").bind("mousedown", function(e) {
            e.metaKey = true;
        }).selectable({
            stop: function() {
                var result = "";
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
					
                    result += (( index + 1 ) + "," );
                });

				$("input#selectResult").val(result);
            }
        });
    });

Open in new window




HTML

<ul id="selectable">
<?php while($optionRow = mysql_fetch_array($optionResult))
{?>
      <input type="text" id="selectResult" name="<?php echo "qno".$questionID; ?>" value="" />
      <li id="<?php echo $optionRow['questionOptionID'] ?>" class="ui-state-default"><?php echo $optionRow['questionOption'] ?></li>
php } ?>
</ul>

Open in new window

Steve TinsleyAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
 $(function() {
        $("#selectable").bind("mousedown", function(e) {
            e.metaKey = true;
        }).selectable({
            stop: function() {
                $( ".ui-selected", this ).each(function(i, val) {
                    var index = $( "#selectable li" ).index( this );
  		    $("input:hidden.selectResult:eq(" + i + ")").val(index + 1);
                });
            }
        });
    });

Open in new window

With :
<input type="hidden" class="selectResult" name="selectResult[]" />
<input type="hidden" class="selectResult" name="selectResult[]" />
<input type="hidden" class="selectResult" name="selectResult[]" />
<input type="hidden" class="selectResult" name="selectResult[]" />
<input type="hidden" class="selectResult" name="selectResult[]" />
<input type="hidden" class="selectResult" name="selectResult[]" />

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.