I am not sure if what I am trying to do can be done, but basically I want to add/edit/delete information in a text area from inputs.

I know how to add from inputs to text area but I am struggling with the edit and delete.

<script language="javascript" type="text/javascript">
function addtext() {
	var newtext = document.AddProduct.extran.value + ":" + document.AddProduct.extrav.value + "|";
	var newfields = document.AddProduct.extran.value + ":" + document.AddProduct.extrav.value + "|";
	document.AddProduct.extraf.value += newtext;
	document.getElementById("fields") += newfields
function removetext()
	var re = new regExp("(^|,)\\s?user3","gi");
	document.getElementById('extraf').innerHTML = document.getElementById('extraf').innerHTML.replace(re,"");

<form method="post" enctype="multipart/form-data" action="process-forms.php" name="AddProduct" class="admin_form">

        	<dt><label for="Addfield">Custom Field(s) :</label></dt>
            <dd>Name: <input size="10px" type="text" name="extran" id="extran" value=""> Value:<input size="10px" type="text" name="extrav" id="extrav" value=""></dd>
	        <dd><textarea name="extraf"></textarea>
			<input type="button" value="Add New Text" onClick="addtext(AddProduct);"><br/>
            <input type="button" value="Remove Text" onClick="removetext();">
        <div name="fields" id="fields">here</div>

Currently if you click add, it adds the 2 input fields in to the text area separated by : and then ended by | so I can determine new lines, the first input will be "name" the second will be the "value".

What I would like to do is be able to edit and delete these from the text area if possible?

Hope some one can point me in the right direction?


9 Years
Discussion Span
Last Post by abxyij


You are going to run into problems trying to accumulate your input data in a textarea. It will go in OK but it will be hard to designate which entry within the accumulated string is to be edited/deleted. I'm not saying it's impossibel but you are making a rod for your own back.

I think you might sensibly revise your strategy. How about this .....

  1. Start off the dialog with a row of your two input fields plus a "Delete" button, with an "Add" button underneath, all in FORM_1.
  2. At each click the "Add" button inserts (above itself) a further row comprising two more input fields plus "Delete" button.
  3. Each "Delte" button deletes its own row.
  4. The input fields in each row remain available for editing (hence no "Edit" button is necessary).
  5. Also have a FORM_2 containing a "Submit" button (assuming you need to submit the form) and a hidden input field (or textarea if you prefer).
  6. On submission of FORM_2, a script gathers all the input field values from FORM_1 and formats them into the hidden field (as per your xxx : yyy | rules). By putting this hidden field in a different form, all the individual input fields are automatically not submitted because they are in the other form.



Is there any way you can use the input filed values in a "template" and then to be shown into the textarea.

On the original example drewj mentioned I want to know if I can have something like this.

Hello {Name}, you are {Value} years old.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.