CODEWITHSUNDEEP
javascriptjqueryforms
Will
Will

Reputation: 389

jQuery - update 2 or more form fields with the same data

Ok so it sounds confusing... but in essence what im trying to do should make sense.

I am using jquery tabs. In these tabs I have some lists and some form fields.

so...

Tab a = list a with some form fields... Tab b = list b with formfields... and so on.

BUT... one of these tabs is an ALL tab. and it contains ListA and List B etc etc.

So my question is this.

If a user updates TAB A (list A) How can I get TAB C (all lists) to update with the same value?

Hope that makes sense.

Thanks in advance W

Upvotes: 1

Views: 84

Answers (1)

Jason Sperske
Jason Sperske

Reputation: 30426

Here is an example of tabs with one input and a tab with all of them. A change to any of the inputs is automatically (on the keyup event) sent to the copy (even if you make the change on the 'All' tab (demo):

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a>
        </li>
        <li><a href="#tabs-2">Proin dolor</a>
        </li>
        <li><a href="#tabs-3">Aenean lacinia</a>
        </li>
        <li><a href="#tabs-4">All</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>
            A:<input name='A' />
        </p>
    </div>
    <div id="tabs-2">
        <p>
            B:<input name='B' />
        </p>
    </div>
    <div id="tabs-3">
        <p>
            C:<input name='C' />
        </p>
    </div>
    <div id="tabs-4">
        <p>
            A:<input name='A' /><br/>
            B:<input name='B' /><br/>
            C:<input name='C' /><br/>
        </p>
    </div>
</div>
<script>
$(function () {
    $("#tabs").tabs();
    $('input[name=A],input[name=B],input[name=C]').on('keyup change', function() {
        $('input[name='+$(this).attr('name')+']').val($(this).val());
    })
});
</script>

Upvotes: 2

Related Questions