Pass an input string to different jsp page base on button clicked using nested form

Question

I'm trying to pass a trackingNo to jsp page based on which button is pressed. I created 2 buttons, addnew and search . The addnew is supposed to get the input trackingNo from the input field and pass it to tracking.jsp if it is pressed, and the search is supposed to get the input trackingNo from the input field and pass it to a home_student_result.jsp.

I'm not sure what is the correct way to do it, so I tried using a nested form with "add" id in one form and "srch" id in another. After running it, only the top form works. The inner form doesn't work. Can anyone please help me, or suggest a better way to do it please?

 <div>
    <form id="add" method="post" action="tracking.jsp">
        <i class="fas fa-search"></i>
        <form id="srch" method="post" action="home_student_result.jsp">
            <input name="target" type="input" placeholder = "Search..." class = "text_search"/>
        </form>
    </form>
</div>
<button class="button_search" onclick="document.getElementById('add').submit()">
        Add New
</button>
<button class="button_search" onclick = "document.getElementById('srch').submit();">
    Search
</button>

Answer 1

You can use only one form and click of button you can change the action value to particular value depending on button click and then submit your form .

Demo Code :

 function submit(value) { console.log(value) //if value is add if (value == "add") { //change action of form document.getElementById('forms').action = 'tracking.jsp' document.getElementById('forms').submit(); //submit } else { document.getElementById('forms').action = 'home_student_result.jsp' document.getElementById('forms').submit(); } }

 <div> <.--add id to form--> <form id="forms" method="post" action="tracking.jsp"> <i class="fas fa-search"></i> <input name="target" type="input" placeholder="Search..." class="text_search" /> </form> </div> <.--add function with parameter(value of button) --> <button class="button_search" value="add" onclick="submit(this.value)"> Add New </button> <button class="button_search" value="srch" onclick="submit(this.value)"> Search </button>

Answer 2

You can keep both the forms independently and set the value of 'target' field using javascript. something like below.I've added id attributes to your code to work with vanilla javascript.

    <div>
    <form id="add" method="post" action="tracking.jsp">
        <i class="fas fa-search"></i>
        <input id="addText" type="input" placeholder = "add text"/>
        <button class="button_search" onclick="addToSearch()">
        Add New
        </button>
    </form>
    <form id="srch" method="post" action="home_student_result.jsp">
        <input name="target" id="searchValue" type="input" placeholder = "Search..." class = "text_search"/>
        <button class="button_search" onclick = "document.getElementById('srch').submit();">
        Search
        </button>
    </form>
</div>
            
<script>
    function addToSearch(){
     var textValue = document.getElementById('addText').value;
     document.getElementById('searchValue').value = textValue;
    }
</script>