Solved

jQuery UI Selectable form values

Posted on 2013-02-07
1
417 Views
Last Modified: 2013-02-11
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
Comment
Question by:sjtinsley83
1 Comment
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38866043
 $(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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now