How To Append A List Of Items To A Textbox Value On Another HTML Page

I'm having one page, choosemerchant where I get the list of merchants. After selecting a list item I want to append that list item value to the textbox id which belongs to a differ

Solution 1:

I don't know if I understand correctly your question and if this will help you
But if you want by clicking on an li element in your choosemerchant page the clicked item text appears inside the texarea on the page recommendmanual
this is the code for choosemerchant page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.ui-li-icon li').click(function() {
        var index = $(this).index();
        var text = $(this).text();
        sessionStorage.setItem("selectedMerchant", text);
        console.log(sessionStorage)
        window.location="recommendmanual.html";
    });     
})
</script>
<ul class="ui-li-icon">
  <li>Merchant 1</li>
  <li>Merchant 2</li>
  <li>Merchant 3</li>
  <li>Merchant 4</li>
</ul>

and this is the code for your recommendmanual page

<script type="text/javascript">
$(document).ready(function(){
    var what=sessionStorage['selectedMerchant']
    $('textarea').val(what)
})
</script>
<textarea name="merchant" cols="100" rows="10"></textarea>

With this solution if you click on one li item in the first page text will appear in the second page textarea.
if i have not understand correctly your question and this solution does not suit your needs, i apologize for making you lose time.

Solution 2:

the second of these two lines:

 ...
 window.location="recommendmanual.html";
 $('#merchant').append(text);
 ....

will not be reached: the browser will immediately start loading "recommendmanual.html" and stop executing the current script.

Solution 3:

one thing append text to #merchant before you redirect to other page i.e., $('#merchant').append(text); this should be before window.location="recommendmanual.html";