?
Solved

jQuery Replaces Entire Form Instead Of Single Value

Posted on 2011-10-01
3
Medium Priority
?
360 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 46

Accepted Solution

by:
Chris Stanyon earned 1000 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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

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.

Join & Write a Comment

This article discusses how to implement server side field validation and display customized error messages to the client.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

579 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