Question

I am using the autocomplete widget on my form which is basically providing a depart city text input field and a return text input field.

I would like to show in one div the Depart From, and Arrive At and in a second div the return information which would be the same. (i.e. Depart Toronto to Barrie and the Return, Barrie to Toronto).

My jQuery is working fine to display the information the first time but I can’t get the information to show again reversed.

My form: (only displaying part)

<div class="ui-widget">
    <p>
        <label for="tags">Depart From:</label>
        <input type="text" class="departCity" id="tags" size="30" />
    </p>
</div>
<div class="ui-widget">
    <p>
        <label for="tags2">To:</label>
        <input type="text" class="destination" id="tags2" size="30" />
    </p>
</div>

My code is:

$(function() {
    $('input[type="text"]').blur(function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
    });
});​

And html:

<div id="trip">
    <p><strong><span id="tags_display"></span> - <span id="tags2_display"></span></strong></p>
</div>
<div id="returnTrip">
    <p><strong><span id="displayTags2"></span></strong></p>
</div>

As I said, the first part in the “trip” div displays fine but I would like to clone/duplicate it in the second.

I tried this and some other variations but can’t get it to display a second time. My form data is not going anywhere, it will only be displayed.

function open() {
    $('#displayTags2').html($('#tags2_display').clone());
}
open();​

Thanks in advance for any help.

Answer 1

You need a way to call the copying function that you have (what you have called open()).

You could create a button to add the trips to the list:

HTML

<div class="ui-widget">
    <p>
        <label for="tags">Depart From:</label>
        <input type="text" class="departCity" id="tags" size="30" />
    </p>
</div>

<div class="ui-widget">
    <p>
        <label for="tags2">To:</label>
        <input type="text" class="destination" id="tags2" size="30" />
    </p>
</div>

<div id="trip">
    <p><strong><span id="tags_display"></span> - <span id="tags2_display"></span></strong></p> 
</div>

<button class="copyTrip">Copy trip</button>

<div id="returnTrip">
    <p><strong><span id="displayTags2"></span></strong></p>
</div>
​

Javascript

$(function() {
    $('.copyTrip').on('click', function open() {
        $('#displayTags2').append($('#trip').clone());
    });

    $('input[type="text"]').on('change', function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
    });
});​

Demo

Edit 1

So you just want to copy the destination value and put it in a hidden div? Easy.

I would copy the $('#tags2').val() each time it’s changed, and just hide the returnTrip div unless your return trip checkbox is checked.

Javascript

$(function() {

    $('input[type="text"]').on('change', function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
        $('#displayTags2').html($('#tags2').val());
    });

});​

Demo