Solved

jQuery Replaces Entire Form Instead Of Single Value

Posted on 2011-10-01
3
317 Views
Last Modified: 2012-08-14
Hi, new to JavaScript never needed it but I do now. I would really appreciate a little assistance as I learn.

I want to change "value" for a hidden form input when its related <li> is selected. Instead the entire form is replaced with the text I want to go in the value of a hidden object. Spent hours on this so it's time for a little nudge in the right direction. I tried using ol and li to point towards the value="" but not getting anywhere. Right now I have alert in use as part of troubleshooting only, when done that will be removed.

This script is my choice instead of checkboxes. I need something larger that is clear and can be clicked quickly. So I'm happy with true and false for the values. An issue I have with this is that it must behave the same way if the user selects many at once or holds CTRL etc.

What have I done wrong?

The Selectable <li> list is replaced with the text "hiddenvaluetest". The script I'm working from can be found here http://jqueryui.com/demos/selectable/#default

Thank you
<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {

    $( "#selectable" ).selectable({
       selected: function(event, ui) {

       }
    });

    $( "#selectable" ).bind( "selectableselected", function(event, ui) {
       var selectedval = $(this).html($("input#hiddentestid'").val());
            alert(selectedval);
    });

});
</script>

<ol id="selectable">
    <li class="ui-widget-content">Item 1 <input type="hidden" name="hiddentest" id="hiddentestid" value="hiddenvaluetest" /> </li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
</ol>

<!-- change values to true when the related li item is selected -->
<form id="myformid" name="myformname">
    <hidden id="hiddeninput_id1" name="hiddeninput_name1" value="false" />
    <hidden id="hiddeninput_id2" name="hiddeninput_name2" value="false" />
    <hidden id="hiddeninput_id3" name="hiddeninput_name3" value="false" />
</form>

Open in new window

0
Comment
Question by:Ryan Bayne
  • 2
3 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 36897123
You're using 2 different methods to bind the event. You only need one.

The ui argument in the selected function is the item that was selected. If you are going to grab a value from an input within the LI's, then you'll need one within each LI


$( "#selectable" ).selectable({
   selected: function(event, ui) {
      var selectedval = $(ui.selected).children('input').val();
      alert(selectedval);
   }
});

Open in new window

0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36897268
Great.

So we read the user interface, the item that has been selected, we look at children which requires the method of putting the input inside the li and gets "input" only in there then gets the "value" for that input.

ui.selected).children('input').val()

Thanks a lot.
<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {

    //#hiddentestid
    $( "#selectable" ).selectable({
       selected: function(event, ui) {
          var selectedval = $(ui.selected).children('input').val();
          alert(selectedval);
       }
    });

});
</script>

<!-- change values to true when the related li item is selected -->
<form id="myformid" name="myformname">
    <ol id="selectable">
        <li class="ui-widget-content">Item 1 <input type="hidden" name="hiddentest1" id="hiddentestid1" value="hiddenvaluetest1" /> </li>
        <li class="ui-widget-content">Item 2 <input type="hidden" name="hiddentest2" id="hiddentestid2" value="hiddenvaluetest2" /> </li>
        <li class="ui-widget-content">Item 3 <input type="hidden" name="hiddentest3" id="hiddentestid3" value="hiddenvaluetest3" /> </li>
    </ol>
</form>

Open in new window

0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 36897790
Continuing help on this here...

http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_27375627.html

I just don't know enough yet and it's the whole item list thing thats throwing me off. The idea of using it in a similar way to a standard html form input that has a basic state.

Anyway any help there would be so welcome.
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

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

911 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