HTML Data into textarea

Question

Makara 0 Light Poster

8 Years Ago

Hello guys. I have a challenge here. I have a form that I want it to submit its information to a textarea below it and not in a database. How can I go about it. or To copy the information in the form before submitting. here is the code;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<p><span style="color: #ff0000;"><strong>NB://</strong></span><span> <strong><span style="color: #ff0000;">We are ONLY Supplying Cakes within Nairobi and Ongata Rongai Branches</span></strong></span></p>
<p><span><span>Choose the</span></span><span> <span style="color: #ff0000;"><strong>Tuskys Branch</strong></span> </span><span><span>you would wish to collect your Cake and Make a deposit through the</span> </span><span style="color: #ff0000;"><strong>Branch Till Number</strong></span><span> <span>Listed</span></span></p>
<p> </p>
<script language="javascript" type="text/javascript">
function addtext() {
    var newtext = document.payment_form.inputtext.value;
    if (document.payment_form.placement[1].checked) {
        document.payment_form.outputtext.value = "";
        }
    document.payment_form.outputtext.value += newtext;
}
</script>
<form name="payment_form">
<table style="width: 500px;" border="0">
<tbody>
<tr>
<td><label>Deposit Amount</label></td>
<td><input id="Amount" type="text" name="Amount" /></td>
</tr>
<tr>
<td><label>Tuskys Branch</label></td>
<td><select id="21" class="dropdown jsn-input-fluid  " name="21">
<option value="">- Select Value - Till Numbers</option>
<option class="jsn-column-item" value="Magic Nrb       -       373128">Magic Nrb - 373128</option>
<option class="jsn-column-item" value="Thigiri             -        373133">Thigiri - 373133</option>
<option class="jsn-column-item" value="Haile Selasie   -       373121">Haile Selasie - 373121</option>
<option class="jsn-column-item" value="LungaLunga    -       373127">LungaLunga - 373127</option>
<option class="jsn-column-item" value="Eastlands        -        373122">Eastlands - 373122</option>
<option class="jsn-column-item" value="Ruai                 -       373146">Ruai - 373146</option>
<option class="jsn-column-item" value="Adams             -        373119">Adams - 373119</option>
<option class="jsn-column-item" value="Hakati              -        373125">Hakati - 373125</option>
<option class="jsn-column-item" value="Uthiru               -        373145">Uthiru - 373145</option>
<option class="jsn-column-item" value="Tom Mboya     -        373129">Tom Mboya - 373129</option>
<option class="jsn-column-item" value="Ongata             -        373137">Ongata - 373137</option>
<option class="jsn-column-item" value="T-Mall              -        373132">T-Mall - 373132</option>
<option class="jsn-column-item" value="City Stadium    -        373149">City Stadium - 373149</option>
<option class="jsn-column-item" value="Chap Chap      -        373107">Chap Chap - 373107</option>
<option class="jsn-column-item" value="Road A            -         373151">Road A - 373151</option>
<option class="jsn-column-item" value="Chap Ongata   -        373140">Chap Ongata - 373140</option>
<option class="jsn-column-item" value="Ruaka              -        373152">Ruaka - 373152</option>
<option class="jsn-column-item" value="Imara               -        373126">Imara - 373126</option>
<option class="jsn-column-item" value="Beba Beba       -        373120">Beba Beba - 373120</option>
<option class="jsn-column-item" value="Express            -        373123">Express - 373123</option>
<option class="jsn-column-item" value="Grennspan       -        373125">Grennspan - 373125</option>
<option class="jsn-column-item" value="Libra                 -        373143">Libra - 373143</option>
<option class="jsn-column-item" value="AthiRiver           -        373109">AthiRiver - 373109</option>
<option class="jsn-column-item" value="Pioneer             -        373131">Pioneer - 373131</option>
<option class="jsn-column-item" value="K-Avenue          -        978202">K-Avenue - 978202</option>
<option class="jsn-column-item" value="Embakasi          -        373104">Embakasi - 373104</option>
<option class="jsn-column-item" value="OTC                  -        373130">OTC - 373130</option>
</select></td>
</tr>
<tr>
<td><label>Transaction ID</label></td>
<td><input id="tid" type="text" name="tid" /></td>
</tr>
<tr>
<td><label>Collection Date</label></td>
<td><input id="date" type="date" name="date" /></td>
</tr>
<tr>
<td><input type="submit" value="Add"  onClick="addtext();"></td>
<td><textarea name="outputtext"></textarea></td>
</tr>
</tbody>
</table>


</form>

<body>
</body>
</html>

html-css

2 Contributors
1 Reply
244 Views
7 Hours Discussion Span
Latest Post 8 Years Ago Latest Post by ryantroop

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.

ryantroop 177 Practically a Master Poster · Answer 1 · 2016-02-11T16:35:34+00:00

Any HTML form has all of the values acessable through javascript. In your particular case, you have a form with the name "payment_form" so you can do something like this...

<script>
var Form = document.querySelectorAll("form[name='payment_form']");
var TextArea = document.querySelectorAll("textarea[name='outputtext']");
for (var i = 0; i < Form.elements.length; i++)
  TextArea.value = TextArea.value + Form.elements[i].value + "\n\r";

</script>

Or something similar.. basically iterating through the form object's "elements" or values and adding them to another element on the page. Note, though, you will likely have to move the text area OUT of the form, or do some checking within the for loop to make sure you are not trying to write the contents of the text area to itself, or you will be a sad coder :( -- you can also just not do it through a loop and only put the relevant data into the text area by hand (Form.elements["inputName"].value)

Is this what you are asking?

However, this data will not persist. It will only be around as long as the page is not closed. Also, the data would never reach the server and you would never know it ever existed.

NOTE: if the \n does not make a newline, you can always use the HTMLEntities version instead (
 and )