JQuery append text to text field

Sorry folks, still being thick on JQuery. Had great help creating a selectable ul li list like this

$(document).ready(function(){

    $('.selectoption li').not(':first').hide();

    $('.prev, .next').click(function() {
        // Determine the direction
        var dir = $(this).hasClass('prev') ? 'prev' : 'next';
        // Get the li that is currently visible
        var current = $('.selectoption li:visible');

        // Get the element that should be shown next according to direction
        var next = dir == 'prev' ? current.prev('li') : current.next('li');

        // If there's no more in that direction, select first/last
        if(next.size() == 0) {
            next = dir == 'prev' ? $('.selectoption li:first') : $('.selectoption li:first');
        }

        // Hide them all..
        $('.selectoption li').hide();
        // And show the new one
        next.show();

        return false;
    });

});  

But how can I then append the value of the selected li into a text field so it can be used within a form - cannot use Ajax etc. on this occassion as the li list is outside the form.

Also, if I have say 3 or 4 of these ul li's on a page how do I wrap the above code in a way that the next / prev button only wotk with the ul li that they apply to.

Thanks in advance

Answers


I think I understand what you're asking here, but I could be wrong. Assuming I do, I would add classes or IDs to represent a linkage between the elements. For instance:

<input type="hidden" name="degree" id="degree" />
<div id="degree_selectable_control" class="selectable_control">
    <a href="#" class="prev">Prev</a> |
    <a href="#" class="next">Next</a>
</div>
<ul id="degreee_selectable" class="selectable">
    <li>Associates</li>
    <li>Bachelor's</li>
    <li>Graduate</li>
    <li>Other</li>
</ul>

<input type="hidden" name="salary" id="salary" />
<div id="salary_selectable_control" class="selectable_control">
    <a href="#" class="prev">Prev</a> |
    <a href="#" class="next">Next</a>
</div>
<ul id="salary_selectable" class="selectable">
    <li>> $20,000</li>
    <li>$20,000 - $35,000</li>
    <li>$35,000 - $50,000</li>
    <li>< $50,000</li>
</ul>

Then you could refactor your existing JavaScript into something like:

$(document).ready(function(){
    // init the selectables
    $('.selectable').each(function(){
        $(this).find('li').not(':first').hide();
    });
    // assign the handlers for each control
    $('.selectable_control').each(function(){
        var field_id = this.id.replace(/_selectable_control$/, ''),
            $selectable = $('#' + field_id + '_selectable'),
            $field = $('#' + field_id);

        $(this).find('.prev, .next').click(function(){
            // Determine the direction
            var dir = $(this).hasClass('prev') ? 'prev' : 'next';
            // Get the li that is currently visible
            var current = $selectable.find('li:visible');

            // Get the element that should be shown next according to direction
            var next = dir == 'prev' ? current.prev('li') : current.next('li');

            // If there's no more in that direction, select first/last
            if(next.length === 0) {
                next = dir == 'prev' ? $selectable.find('li:last') : $selectable.find('li:first');
            }

            // Hide them all..
            $selectable.find('li').hide();
            // And show the new one
            next.show();
            // And update the corresponding field
            $field.val( next.text() );

            return false;
        });
    });
});

The end result is that you're grouping the control blocks, selectables, and fields, allowing for you to store the selected values as desired.


I'm not sure I completely understand what you're looking for, but I'll address this in a more general sense:

$("li").click(function(){
  // Place LI text as value of <input type="text" name='fname' />
  $(":input[name='fname']").val($(this).text());
});

To make your code more restrictive with regards to which UL it addresses in its selectors:

<ul>
  <li class="selectOption">Ignore Me</li>
</ul>
<ul>
  <li class="selectOption">Include Me</li>
</ul>

We could use the following:

$("ul:eq(1) .selectOption").click(function(){
  // only the LI in the second UL will trigger this
});

Note that we're dealing with a zero-based index, hence the use of "1" to address the second unordered-list.


Need Your Help

How to edit an entire column for all rows asp:GridView

c# asp.net

So I have google'd and searched stackoverflow, and now my brain is overloaded. I am a novice at asp.net, but getting the hang of it.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.