Member Avatar for trebor-pl

Hi, Im new to here.

I have a problem with some JS for my website.
I made JS to enter text from input boxes in form to a read only text area. However it overites the text instead of putting it below (thats what I want it to do, put it below previous after clicking the add button). I tried few things that didn't work so I erased it from the code. Maybe one og you will know.

HTML code:

<tr>
                                	<td>
                                    	Kod Produktu:
                                    </td>
                                    <td>
                                    	<input type="text" id="ip1" />
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                    	Opis:
                                    </td>
                                    <td>
                                    	<input type="text" id="ip2" />
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                    	Ilość:
                                    </td>
                                    <td>
                                    	<input type="text" id="ip3" />
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                    	Cena:
                                    </td>
                                    <td>
                                    	<input type="text" id="ip4" />
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                    	<input type="button" value="Dodaj"
                                        onclick="populateTextArea(); " />
                                    </td>
                                    <td>
                                    	<input type="button" value="Zresetuj" 
                                        onclick="resetOnlyThese()" />
                                    </td>
                                </tr>
                                <tr>
                                	<td colspan="2">
                                    	<textarea type="text" readonly="readonly" name="display" id="display" cols="70" rows="10" tabindex="4">
                                        </textarea>
                                    </td>
                                </tr>

JS code:

function populateTextArea()
{
  var output = new Array();
  var fieldID = 1;

  while (fieldObj = document.order['ip'+fieldID]) 
  {
    if (fieldObj.length) 
	{
      for (var j=0; j<fieldObj.length; j++) 
	  {
          output[output.length] = fieldObj[j].value;
      }
	  
    } 
	else 
	{
        output[output.length] = fieldObj.value;		
    }

    fieldID++;
  }

  document.getElementById('display').value = output.join(' | ');
}

Thanks for any future help

Please give your code completely!
What is order,fieldObj,... variables in your code?

Member Avatar for trebor-pl

Please give your code completely!
What is order,fieldObj,... variables in your code?

There is no more code in javascript, i thought i js you can create variables without specifying VAR.

However there is more code in HTLM, do you want it?

Try it:

<html>
<head>
<script language="javascript">
function send()
{
document.getElementById('text_content').value =
  'Text1:' + document.getElementById('text1').value+'\n'
+ 'Text2:' + document.getElementById('text2').value+'\n'
+ 'Text3:' + document.getElementById('text3').value+'\n'
+ 'Text4:' + document.getElementById('text4').value+'\n';
document.forms['form1'].submit();
}
</script>
</head>
<body>
    <?php
    if($_POST)
    {
        echo $_POST['text_content'];
    }
    ?>
    <form name="form1" action="" method="post">
        <input type="hidden" id="div_content" name="div_content" />
        <input type="text" name="text1" id="text1" />
        <input type="text" name="text2" id="text2" />
        <input type="text" name="text3" id="text3" />
        <input type="text" name="text4" id="text4" />
        <input type="button" onclick="send()" value="Send" />
        <textarea rows="10" name="text_content" id="text_content"></textarea>
    </form>
</body>
</html>

You want this?

Member Avatar for trebor-pl

thank you for interest M0rteza, its close however, when i enterstuff again to text 1,2,3 & 4 it gest overwritten, but i want it to be placed below, do you know how to do this?

means you want to send text 1,2,3,4 value into textarea?

Member Avatar for trebor-pl

yes, constantly. Its like a product list, text 1 is product, text 2 is description, text 3 is quantity and text 4 is price. So i want the user to enter these, at least once. If they want more products then they enter it again and its displayed in textarea, so that each product is under previous one.

Ok, I see.

Try it.

<html>
<head>
<script language="javascript">

function send()
{

var tarea = document.getElementById('text_content').value.split('\n');

document.getElementById('text_content').value="";

var text_name1 = tarea[0].substr(0,7); //product
var text_name2 = tarea[1].substr(0,11); //description
var text_name3 = tarea[2].substr(0,8); //quantity
var text_name4 = tarea[3].substr(0,5); //price

var value_text1 = tarea[0].substr(8,tarea[0].length-1);
var value_text2 = tarea[1].substr(12,tarea[1].length-1);
var value_text3 = tarea[2].substr(9,tarea[2].length-1);
var value_text4 = tarea[3].substr(6,tarea[3].length-1);

document.getElementById('text_content').value += 
text_name1 +":"+ value_text1 +" , "+ document.getElementById('text1').value+"\n"+
text_name2 +":"+ value_text2 +" , "+ document.getElementById('text2').value+"\n"+
text_name3 +":"+ value_text3 +" , "+ document.getElementById('text3').value+"\n"+
text_name4 +":"+ value_text4 +" , "+ document.getElementById('text4').value;

}
</script>
</head>
<body>
    <form name="form1" action="" method="post">
        <input type="hidden" id="div_content" name="div_content" />
        <input type="text" name="text1" id="text1" />
        <input type="text" name="text2" id="text2" />
        <input type="text" name="text3" id="text3" />
        <input type="text" name="text4" id="text4" />
        <input type="button" onclick="send()" value="Send" /><br>
        <textarea rows="10" dir="ltr" cols="80" readonly="readonly" name="text_content" id="text_content">product:
description:
quantity:
price:</textarea>
    </form>
</body>
</html>

This code dose not work on opera browser correctly!
But with firefox have no any problem!

Member Avatar for trebor-pl

M0rteza thank you, so much for your great help, yes the script works fine, thanks so much again.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.