Reset some textboxes before deleteRow -calculation issue

Discussion in 'JavaScript' started by jodarecode, Nov 21, 2007.

0
  1. #1
    Ok, this is what I've got:


    Form name: form0
    Lets say 2 textboxes:

    t1_1, t1_2

    Through iteration, I can add textboxes using createElement giving me:

    t2_1, t2_2
    t3_1, t3_2
    t4_1, t4_2
    t5_1, t5_2...so on

    lets say I want to keep the information entered in t1_1, t1_2..
    and reset all newly created textboxes:
    "t2_1, t2_2
    t3_1, t3_2
    t4_1, t4_2
    t5_1, t5_2...so on"

    Here is my example code: you can view the new names of the textboxes by using the view source code link I included.
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>
      Adding new textbox & values
    </title>
    <script type="text/javascript">

    function viewsource() {
    alert(document.body.innerHTML);
    }
    </script>
    <script type="text/javascript">

    function addRowToTable()
    {
    var tbl = document.getElementById('tblSample');
    var frm=document.form0;
    if (!frm.ary) frm.ary=[frm.t1_2];
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);

    // numberd row
    var cellLeft = row.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(textNode);

    // Item row
    var cellRight1 = row.insertCell(1);
    var el1 = document.createElement('input');
    el1.type = 'text';
    el1.name = 't' + iteration + '_1';
    el1.id = 't' + iteration + '_1';
    el1.size = 40;
    cellRight1.appendChild(el1);

    // Price row
    var cellRight2 = row.insertCell(2);
    var el2 = document.createElement('input');
    frm.ary.push(el2);
    el2.type = 'text';
    el2.value = '';
    el2.name = 't' + iteration + '_2';
    el2.id = 't' + iteration + '_2';
    el2.size = 5;
    el2.onkeyup=Calc;
    el2.onblur=Calc;
    cellRight2.appendChild(el2);
    }

    </script>

<script type="text/javascript">


function Calc(){
 var frm=document.form0;
 if (!frm.ary) frm.ary=[frm.t1_2];
 var total=0;
 for (var zxc0=0;zxc0<frm.ary.length;zxc0++){
  if (frm.ary[zxc0].value.length>0&&!isNaN(frm.ary[zxc0].value)) total+=frm.ary[zxc0].value*1;
 }
 frm.sum.value=total;
}

</script>

  </head>
  <body>

<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST'){
$me = strip_tags($_SERVER['php_self']);
?> 

    <form action="none" method="get" name="form0" id="form0">
      <table border="0" id="tblSample" align="center">
        <tr>
          <th colspan="3">
            <br>
            <br>
            <br>
            Adding rows then adding up values entered<br>How do I reset only the newly created textboxes<br>& keep the entered information in the first two textboxes?
            <hr>

            <input type="button" value="Add new textbox" onclick=
            "addRowToTable();">
          </th>
        </tr>
        <tr id="cloneid" >
          <td>
           1 Item/Price
          </td>
          <td>
            <input type="text" name="t1_1" id="t1_1" size="40">

          </td>
          <td>
            <input type="text" name="t1_2" id="t1_2" size="5" value="" onkeyup="Calc();" onblur="Calc();">
          </td>
        </tr>
      </table>
      <table border="0" align="center">
        <tr>
          <td colspan="3" align="center">

            <br>
            <br>
            Total: <input type="text" name="sum" id="sum"><br>
            <input type="submit" value="E-Mail"> <input type="reset" name="reset" value="reset"><br>
            <a href="javascript:viewsource()">view source</a>
                      </td>

        </tr>
      </table> 
    </form><?php

} else {
error_reporting(0);
{$to = "x";
$subject = "php email from customer to me";
$from = $_POST['x'];

$headers = "From: " . $from . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";

foreach($_POST as $key => $val){
  if(preg_match("/t\d+\_1/", $key)){
    $msg .= "<table><tr><td width=\"100\">$val</td>";
  };
  if(preg_match("/t\d+\_2/", $key)){
    $msg .= "<td>$val</td></tr></table>";
  };
}; 



mail($to, $subject, stripslashes($msg), $headers) or die("<p class=\"center\"><strong class=\"red\">ERROR:</strong> Unable To Connect To SMTP Server</p>\n");

echo "<p class=\"center\"><strong class=\"green\">Thank You. Your Order Has Been Processed.</strong></p>\n";

echo "$msg";

}}

?> 
   </body>
</html>
    Code (markup):
    Whats happening is when I delete the textboxes, the first set remains "which is what I want" but the entered values for the deleted textboxes remain added up in the total textbox and will not reset to the values remaining in the first set of text boxes.

    I need to reset the deleted textboxes to default values before deletion.

    example:

    1st set of textboxes (t1_1 & t1_2) value for t1_2 is "5"
    added textboxes:
    (t2_1 & t2_2) lets say value for t2_2 is "5"
    (t3_1 & t3_2) value for t3_2 is "5"
    (t4_1 & t4_2) value for t4_2 is "5"....and so on...

    The total textbox would display "20"
    I delete all except (t1_1 & t1_2) with value for t1_2 still "5"

    The total textbox should display "5" now.
    But it still displays "20" and from here will not reset to even the default if everything is reset "which I dont want to do".
    I want to keep the values in the first set of textboxes [(t1_1 & t1_2) value for t1_2 is "5"].

    I'm ever so getting frustrated and have searched the web for hours upon hours.
    Any help much appreciated.

    This is the closest I've come:
    function removeRowFromTable1()
{
    var tbl = document.getElementById('tblSample');
    var agree = confirm('Warning! All previously entered doorstyle information will be reset!!');
if (agree){
   document.form0.elements["t1_2"].value = "0";
   document.form0.elements["t2_2"].value = "0";

while (tbl.rows.length > 2) {
   tbl.deleteRow(-1);
   Calc()   
}

}    
else
{
	return false ;
}
}
    Code (markup):
    this works as long as I add:
    document.form0.elements["t1_2"].value = "0";
    document.form0.elements["t2_2"].value = "0";
    document.form0.elements["t3_2"].value = "0";
    document.form0.elements["t4_2"].value = "0"; but could be hundreds....!

    So now there must be something wrong with:
    for(var i=0;i<form0.elements.length;i++)
{
  document.form0.elements["t"+i+"_2"].value = "0";
}
    Code (markup):
    Any ideas? anyone?

    Jodarecode
     
    jodarecode, Nov 21, 2007 IP
  2. jodarecode

    jodarecode Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    With help from another forum!!
    function removeRowFromTable1() {
  var tbl = document.getElementById('tblSample');
  var agree = confirm('Warning! All previously entered doorstyle information will be reset!!');
  if (agree){
    for(var i=2;i<document.form0.elements.length;i++) {
      if(document.form0.elements["t"+i+"_2"]) document.form0.elements["t"+i+"_2"].value = "0";
    }
    while (tbl.rows.length > 2) {
      tbl.deleteRow(tbl.rows.length-1);
    }
    Calc();
  } else {
    return false;
  }
}
    Code (markup):
    Works perfect!!
     
    jodarecode, Nov 21, 2007 IP