Javascript textarea problem

Question

trebor-pl

13 Years Ago

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

javascript

2 Contributors
8 Replies
250 Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by trebor-pl

morteza_ipo 0 Junior Poster in Training

13 Years Ago

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

morteza_ipo 0 Junior Poster in Training

13 Years Ago

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!

Reply to this topic

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.

trebor-pl · Answer 1 · 2011-01-09T17:04:02+00:00

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?

morteza_ipo 0 Junior Poster in Training · Answer 2 · 2011-01-09T21:54:16+00:00

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?

trebor-pl · Answer 3 · 2011-01-09T22:30:17+00:00

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?

morteza_ipo 0 Junior Poster in Training · Answer 4 · 2011-01-09T22:41:14+00:00

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

trebor-pl · Answer 5 · 2011-01-10T02:09:21+00:00

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.

trebor-pl · Answer 6 · 2011-01-12T07:49:38+00:00

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