display data from one div in another using onclick (jQuery/HTML)

Not quite sure how to describe this, but here I go.

A user will add information to a form. Upon Submit, the data will populate one of twenty divs. Subsequently, when the user comes back to this page, they may click on a div and display this information in the same form they used to input the data in the first place, allowing them to edit it.

I'm looking for a solution that, whe开发者_运维百科n the user uses a trigger event, the div of the twenty they click on returns the data from that div to the form. So, if I click on div 5, it returns the data from 'div_5' and displays it to the input form.

For this, jQuery and HTML, please.

Here's a link to the page: Click on 'Buzz' when you get there.site.

I haven't tested this, and i'm going to assume that your input field has an id called inputBox. you could register the following onclick handler for each div to put that div's value in the input box. This example will assume that this is the onclick handler for the fifth div which has an id of div5

$("#inputBox").val($("#div5").text())

It should be as simple as this, but as a disclaimer, I didn't actually test the code snippet in this answer.

The following code is tested and works on your site in Firefox (via console):

( function( global )
{
    var $ = global.jQuery;

    $( function()
    {
        var $TargetForm = $( 'div.add_buzz_item form' ).eq( 0 ),
            /*
             * EXTREME inefficiencies on the next 4 lines due to lack of specificity in your markup
             */
            $TitleInput = $TargetForm.find( 'div:contains("Title:")' ).next().find( 'input' ),
            $ImageInput = $TargetForm.find( 'div:contains("Image:")' ).next().find( 'input' ),
            $LinkInput = $TargetForm.find( 'div:contains("Link:")' ).next().find( 'input' ),
            $DescriptionInput = $TargetForm.find( 'div:contains("Description:")' ).next().find( 'textarea' );

        $( 'div.site_buzz_scroll' ).delegate( 'div.buzz_block', 'click', function()
        {
            var $BuzzItem = $( this );

            $TitleInput.val( $BuzzItem.find( 'div.buzz_title' ).html() );
            $ImageInput.val( $BuzzItem.find( 'div.buzz_icon img' ).attr( 'src' ) );
            $LinkInput.val( $BuzzItem.find( 'div.buzz_link' ).html() );
            $DescriptionInput.val( $BuzzItem.find( 'div.buzz_desc' ).html() );
        } );
    } );
}( window ) );

You would do yourself a huge favor if you, at the very least, uniquely named your form fields so that they could be more easily found and targeted. The code would be smaller and would run more efficiently. That said, I made this run as efficiently as possible. I used .delegate() so that you could add 'buzz_blocks' to the DOM dynamically without rebinding them.