To select the value of an item in an <li> element and share it in an input box on one form, and then pass it to another form, you can follow the steps below:

1. In your EJS file, modify the <li> element to include an input box with a unique ID for each item. For example:

ejs
 
 
Copy code
   <ul>
     <% items.forEach((item, index) => { %>
       <li>
         <input type="text" id="item-input-<%= index %>" value="<%= item %>" readonly>
         <button onclick="selectAndSubmit('<%= index %>')">Select</button>
       </li>
     <% }) %>
   </ul>

In this example, we have added an input box with the readonly attribute, which displays the item's value. The input box has a unique ID item-input-<%= index %> where <%= index %> corresponds to the index of the item in the items array. Additionally, we have added a button with an onclick event that calls the selectAndSubmit function and passes the index.

1. In your JavaScript code, define the selectAndSubmit function that will be called when the button is clicked. This function will select the value from the input box, populate it in a form field, and submit the form. For example:

javascript
 
 
Copy code
   function selectAndSubmit(index) {
     const selectedValue = document.getElementById(`item-input-${index}`).value;
     document.getElementById('input-field').value = selectedValue;
     document.getElementById('form').submit();
   }

In this code snippet, the selectAndSubmit function receives the index as a parameter. It uses the index to get the value from the input box with the corresponding ID. Then, it sets the value of an input field on another form (identified by its ID, input-field) with the selected value. Finally, it submits that form (identified by its ID, form).

1. Ensure that your receiving form has an input field with the ID specified in the selectAndSubmit function (e.g., input-field), and the form has an ID specified as well (e.g., form).

html
 
 
Copy code
   <form id="form" action="/another-form-endpoint" method="POST">
     <input type="text" id="input-field" name="selected-item" readonly>
     <button type="submit">Submit</button>
   </form>

In this example, we have an input field with the ID input-field that will receive the selected item value. The form has an ID form and an action and method specified.

1. In your Node.js server, create a route that handles the submission of the second form and retrieves the selected item value. For example:

javascript
 
 
Copy code
   app.post('/another-form-endpoint', (req, res) => {
     const selectedItem = req.body['selected-item'];
     // Do something with the selected item value

     // Redirect or render another page
   });

In this code snippet, we handle the POST request to the /another-form-endpoint route. We retrieve the selected item value from the request body using the input field's name attribute, selected-item. You can then perform further actions or redirect/render another page based on this value.

That's it! You have successfully selected the value of an item in an <li> element, shared it with an input box on one form, and passed it to another form using Node.js and EJS.