CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
sMyles
sMyles

Reputation: 2666

How to use jQuery to update input box or label with multiple variables

I'm trying to learn jQuery and have a question which may be pretty simple to someone familiar with it already.

Application: Using PHP with jQuery and Bootstrap Toggle Buttons (http://www.larentis.eu/bootstrap_toggle_buttons/) to create a dynamic link address depending on which toggle buttons the user has turned "on".

Right now i'm using form to POST the toggle button states which once the page reloads it then pulls those POST variables and attaches them to the link.

What I would like to do is to have jQuery automatically change the link on the page when the user toggles the button instead of having to use form post.

What I would like to be able to do is in layman's terms explanation each time the toggle button is toggled:

$link = "http://www.mydomain.com/students.php?view="

if jQuery toggle-button-1 = on then add "name"
if jQuery toggle-button-2 = on then add "id"
if jQuery toggle-button-3 = on then add "address"

// If toggle-button-1 and toggle-button-2 were on and toggle-button-3 was off
// then $views would equal
$views = "name,id"

// On the webpage it would then display

http://www.mydomain.com/students.php?view=name,id

// If the person toggled toggle-button-1 to off, the link would display:

http://www.mydomain.com/students.php?view=id

I hope i've explained this so you can understand it...it's really simple what i'm trying to do and I know how to do this in PHP but i feel like i've been searching around online for something that should be simple and I just can't seem to wrap my head around it.

If anybody could please help me out or point me in the right direction I would greatly appreciate it!

Thanks!!

Upvotes: 0

Views: 333

Answers (2)

Shmiddty
Shmiddty

Reputation: 13967

http://jsfiddle.net/CvsbD/

HTML

<input type="checkbox" class="items" id="one" data-view="name" />
<input type="checkbox" class="items" id="two" data-view="id" />
<input type="checkbox" class="items" id="three" data-view="address" />

<input type="text" id="output" />

JS

$("body").on('change', '.items', function(){
    // filter down to items that are checked
    var items = $('.items').filter(function(){
        return this.checked;
    });
    // map data values to an array
    items = items.map(function (){
        return $(this).data('view');
    }).get();

    // join the array with a comma separator 
    $("#output").val(items.join(','));
});​

Do note that binding a delegate to the document body is not generally the best way to go. You'll want to use a more direct ancestor of your checkboxes, or you can bind the change event to the checkboxes themselves.

This can be further simplified (forgot about :checked) like so:

$("body").on('change', '.items', function(){
    // filter down to items that are checked, and get their data-view value.
    var items = $('.items:checked').map(function(){
        return $(this).data('view');
    }).get();

    // join the array with a comma separator 
    $("#output").val(items.join(','));
});​

Upvotes: 1

Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

Here is my example on jsFiddle

HMTL

<input type="checkbox" name="name" value="name" id="name" /> name<br />
<input type="checkbox" name="id" value="id" id="id" /> id<br />
<input type="checkbox" name="address" value="address" id="address" /> address<br />
Link: <input type="text" name="url" value="" id="url" />

JavaScript

$(function() {
    var link = "http://jsfiddle.net/mouse0270/chnyy/"
    $('input[type=checkbox]').change(function () {
        var viewItems = "";
        $('input[type=checkbox]:checked').each(function () {
            viewItems += ','+$(this).val();
        });
        $('#url').val(link+'?view='+viewItems.substring(1));                  
    });         
});​

Upvotes: 2

Related Questions