?
Solved

jQuery Replaces Entire Form Instead Of Single Value

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

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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 create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

621 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