Solved

jQuery Replaces Entire Form Instead Of Single Value

Posted on 2011-10-01
3
335 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Suggested Solutions

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
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.

738 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