Jquery trigger click then fill in input

Question

I have a table row that when clicked should trigger a click event on page that opens a div. once this div is open, i need #poId to be populated with given id.

    $('tr').click(function(){
            var id = $(this).attr('id');
            $('#purchase\\.exist').trigger('click');
            //What goes here?               
    });

the page that results from the click is:

  <input type='text' id='poId' name='poId'>

basically i need to know what i can use to fill poId with click automatically. in layman's terms

$('tr').click(function(){
        var id = $(this).attr('id');
        //Open page as a result of trigger
        //paste the variable id in the poId input              
});

Added fiddle:

This fiddle is completely stripped down but the idea is a user clicks on the word question. a table appears with two rows. when a user click on the table row, the purchase div is opened and the input needs to be populated with the id of the tr clicked.

Fiddle

I know there are other ways to do this without trigger, but opening the div actually entails a bunch of other things (ajax functions and such) before the div is opened, so just simply opening the purchase div wont work

Answer 1

To populate poId with the value of the ID of the tr that was clicked on (which I think is what you're asking):

 $('tr').click(function(){
        $("#poId").val(this.id);
        $('#purchase').trigger('click');
});

(I am assuming that "#purchase\\.exist" was a typo of some sort?)

Answer 2

 $(function() { $('.hide').hide(); $('tr').click(function() { var id = $(this).attr('id'); $('#poId').val(id); // the second argument is an array of parameters that will be passed to the function $('#purchase').trigger('click', [id]); }); // the first argument of function `click` receives is the event, the next are the arguments passed from the trigger $('li').click(function(e, id) { var liID = $(this).attr('id'); var div = $('#div_' + liID) div.show(); div.find('input').val(id) }); }); 

 li:hover { cursor: pointer; } tr:hover { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li id='purchase'>Purchase</li> <li id='question'>Question</li> </ul> <div id='div_purchase' class='hide'> <input type='text' id='poID' name='poID'> </div> <div id='div_question' class='hide'> <table id='myTable'> <tr id='12345'> <th>12345</th> </tr> <tr id='45678'> <th>45678</th> </tr> </table> </div>