• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 502
  • Last Modified:

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

0
Steve Tinsley
Asked:
Steve Tinsley
1 Solution
 
leakim971PluritechnicianCommented:
 $(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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now