如何在同一页面上显示用户输入以及删除选项

Question

Good day programmers. I am very new to jsp/javascript but this site has helped me a lot so far, but i can use some more help or guidance for a problem i am having. I am making a web app for creating and saving recipes. For my "add recipe" process, i have the user enter a recipe name, they are then directed to another page where they can choose an ingredient from a dropdown (populated from a sql db), enter a quantity, and then click a button to ad another ingredient. What i wish to do is have the ingredient selected and the amount displayed to the user on the same page where they are choosing the ingredients. I also want to add a button at the end of the "print out" that allows the user to remove that ingredient.
So far i am thinking that i should use a table and have a row created when the user adds an ingredient, then use the deleterow() method to remove that ingredient if desired. Does anyone think this can work? or have a better solution. PS: i am very new to jsp and javascript. thanks in advance for any assistance rendered.

Answer 1

You can use ajax to achieve this. For that using jQuery will make you writing a lot less number of lines of code. So it will work like this, they have entered the recipe name. Now using onblur on that field input, you load the dropdown of ingredients and give them option of entering quantity and selecting the ingredient with a button to save that data. When they click on the button to save, after it getting saving into the database, you make an ajax call to load the recent added item with a button to delete it and when they click on delete, you make another ajax call to the database to delete it. Here is a guide to ajax on javaScript https://developer.mozilla.org/en-US/docs/AJAX