0

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

2
Contributors
8
Replies
9
Views
6 Years
Discussion Span
Last Post by trebor-pl
0

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?

0

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?

0

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?

0

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.

1

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!

0

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

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.