Text Boxes in Graphical View

[roselotus]

I am doing a web development project.

I have a product page which has 2 buttons. By pressing one button, a text box gets displayed and the user types in the value and after saving it the text box should disappear. When the user clicks the button again, the text box gets displayed and the user can
type a new value(like text1, text2...).

There is second button, when it is clicked it displays the text box with the value that the user typed in the text boxes(text1,text2...). when we click the second button, it should display text1, text2... in a graphical view and the user can edit or delete the text boxes and rearrange the text boxes and save the online work in his webpage for future use.

I am a learner in web development.It would be very helpful if anybody could help me with code.
I am doing in Html, Css, Javascript, Php and Mysql.

[centered_effect]

I am pretty sure you can make a quick and simple mockup using HTML/Javascript only and using localStorage to help you save sample data. What code do you have now?

If you don't have any code....
Basically, for HTML, you have your two buttons and a test form - say 1 textarea or input to keep it simple. In Javascript, add event listeners after you assigned the element variables - 1 to the show the form (SET), 1 to show the form and get the data from the localstorage(GET), and 1 more to listen for a submit/save button when the form is done so you can save the data and hide the form again.

Psuedo code would be:
doc.formName.textAreaName.style.display = 'none';
buttonOne.onclick - txtAreaName.style.display = 'block'; localstorageclear();
buttonTwo.onclick - txtAreaName.style.display = 'block';txtAreaName.val = localstorage.get('item');
doc.formName.onsubmission = if something is there, process input, then add it to the local storage. close the textArea

[roselotus]

The one and only thing which I am totally confused is that how can you make a graphical line from text1 to text2 to text3... and if the userwant to delete the text, he can delete for example text2 and now the text1 will have a graphical like with text3 and so on. i do not know how to do this.
This might be very simple code but as a learner, i do not have any knowledge how to do this.
if you have any idea about this, can you help me?

[centered_effect]

I'm confused, can you elaborate what you mean by a graphical line or have text boxes as graphics?

Based on the original posting and my post above, a basic html mockup could look like this:

<button id="btnOne">Set</button>
<button id="btnTwo">Get</button>
<div id="txtBox">
	<form name="testForm">
		<textarea name="setText"></textarea>
		<input type="submit" value="Submit">
	</form>
</div>

[roselotus]

I am attaching the pdf. Pls take a look at it.

when we click the first button, the text area appears and the user types the value and when we submit, the text box disappears and when the first button is again clicked, the text box appears. When we click the second button, the values that are typed in the text boxes gets saved in another text boxes(first typed value gets saved in text box1, second one in text box 2...) and the text boxes should have a graphical view(line from text 1 to text 2 to text 3...). When the user do not want a text box (say, text box 2), the user will delete the text box2 and now the order(graphical line should be from text1 to text 3... like that).

[centered_effect]

Ok, so where is the code that you need help with? I am sure you already started, if you didn't have anything previously.