Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jQuery Replaces Entire Form Instead Of Single Value

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

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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 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

604 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