Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with dynamic form input/update problems

    Hello-
    I'm trying to develop a form to dynamically input data into a table named tblRates_balance. I'm attempting to modify the code found here http://blog.calendarscripts.info/dyn...s-with-jquery/.

    Here is the table layout:

    ID | depratecat | MinBalance | InterestRate | APY | suborder
    inputted rows

    ID is auto-increment.
    The form fields for depratecat are visible in my code only for testing; normally the user would not be able to change this value. The value of depratecat would come from a POST value from a previous page and should be the same for all rows inputted or edited in this instance. For testing I'm declaring the value as 14.

    The problems:
    The "Add row" script function does not work and the code won't insert new data thru form; nothing happens. When I click "Add row" in Chrome I get the following error:
    Uncaught TypeError: Cannot read property 'value' of undefined Line 52


    Editing or deleting pre-existing rows seems to work.

    Below is my complete test code. Any help would be greatly appreciated.

    PHP Code:
    <?php
    error_reporting
    (E_ALL); 
    // Connect to the DB
    $link mysqli_connect("lmy_connection stuff") or die("Error " mysqli_error($link));
    $new_depratecat='14';  // for testing

    // store in the DB 
    if(!empty($_POST['ok'])) {    
        
    // first delete the records marked for deletion. Why? Because we don't want to process them in the code below
        
    if( !empty($_POST['delete_IDs']) and is_array($_POST['delete_IDs'])) {
            
    // you can optimize below into a single query, but let's keep it simple and clear for now:
            
    foreach($_POST['delete_IDs'] as $ID) {
                
    $sql "DELETE FROM tblRates_balance WHERE ID=$ID";
                
    $link->query($sql);
            }
        }

        
    // now, to edit the existing data, we have to select all the records in a variable.
        
    $sql="SELECT * FROM tblRates_balance WHERE depratecat='$new_depratecat' ORDER BY suborder";
        
    $result $link->query($sql);
        
        
    // now edit them
        
    while($rates mysqli_fetch_array($result)) {
        
            
    // remember how we constructed the field names above? This was with the IDea to access the values easy now
        
    $sql "UPDATE tblRates_balance SET depratecat='".$_POST['depratecat'.$rates['ID']]."', 
            MinBalance='"
    .$_POST['MinBalance'.$rates['ID']]."', 
            InterestRate='"
    .$_POST['InterestRate'.$rates['ID']]."',
            APY='"
    .$_POST['APY'.$rates['ID']]."',
            suborder='"
    .$_POST['suborder'.$rates['ID']]."'
            WHERE ID='$rates[ID]'"
    ;
        
            
            
    $link->query($sql);
        
            
        }
        
    // (feel free to optimize this so query is executed only when a rate is actually changed)
        
        // adding new 
        
    if(!empty($_POST['$depratecat'])) {
        
            foreach(
    $_POST['depratecat'] as $cnt => $depratecat) {
            echo 
    $cnt;
                
    $sql "INSERT INTO tblRates_balance (depratecat, MinBalance, Interst_Rate, APY, suborder) VALUES ('$new_depratecat','".$_POST['MinBalance'][$cnt]."', '".$_POST['InterestRate'][$cnt]."', '".$_POST['APY'][$cnt]."','".$_POST['suborder'][$cnt]." );";
                
    $link->query($sql);
            }
        }    
    }

    // select existing rates here
    $sql="SELECT * FROM tblRates_balance where depratecat='$new_depratecat' ORDER BY ID";
    $result $link->query($sql);
    ?>

    <html>
    <head>
        <title>Simple example of dynamically adding rows with jQuery</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        
    </head>

    <body>

    <div style="width:90%;margin:auto;">
        <h1>Simple example of dynamically adding rows with jQuery </h1>
        
    <form method="POST" ID="newrate">
        <div ID="itemRows">
        Dep_rate_cat:<input type="text" name="depratecat" size="30" value="<?php echo $new_depratecat?>"/> 
        Minimum Balance: <input type="text" name="MinBalance" size="30" /> 
        Interest Rate: <input type="text" name="InterestRate" /> 
        APY: <input type="text" name="APY" /> 
         Order: <input type="text" name="suborder" size="2"/> 
        

       <input onClick="addRow(this.form);" type="button" value="Add row" /> (This row will not be saved unless you click on "Add row" first)

        <?php
        
    // Next section does updating. let's assume you have the rate data from the DB in variable called $rates
        
        
    while($rates mysqli_fetch_array($result)): ?>
            <p ID="oldRow<?=$rates['ID']?>">
           <?php echo $rates['ID']; ?>
            Dep_rate_cat:<input type="text" name="depratecat<?=$rates['ID']?>" size="4" value="<?=$rates['depratecat']?>" />
            Minimum Balance: <input type="text" name="MinBalance<?=$rates['ID']?>" value="<?=$rates['MinBalance']?>" />
             Interest Rate: <input type="text" name="InterestRate<?=$rates['ID']?>" value="<?=$rates['InterestRate']?>" /> 
            
             APY: <input type="text" name="APY<?=$rates['ID']?>" value="<?=$rates['APY']?>" />
              Order: <input type="text" name="suborder<?=$rates['ID']?>" value="<?=$rates['suborder']?>" />
             <input type="checkbox" name="delete_IDs[]" value="<?=$rates['ID']?>"> Mark to delete</p>
            <?php endwhile;?>
        
        </div>
        
        <p><input type="submit" name="ok" value="Save Changes"></p>
        </form>
    </div>

    <script language="Javascript" type="text/javascript">
    function myFunction(field, data){
      if (typeof document.getElementsByName("+field+")[0] != 'undefined'){
      document.getElementsByName("+field+")[0].value=data;
     }
    }
    var rowNum = 0;


    function addRow(frm) {
        rowNum ++;
        var row = '<p ID="rowNum'+rowNum+'">Cat:<input type="text" name="depratecat[]" value="'+frm.add_depratecat.value+'">Minimum Balance:<input type="text" name="MinBalance[]" value="'+frm.add_MinBalance.value+'">Interest Rate:<input type="text" name="InterestRate[]" value="'+frm.add_InterestRate.value+'">APY:<input type="text" name="APY[]" value="'+frm.add_APY.value+'">Order:<input type="text" name="suborder[]" value="'+frm.add_suborder.value+'"><input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
        jQuery('#itemRows').append(row);
        frm.add_depratecat.value = '14';
        frm.add_MinBalance.value = '';
        frm.add_InterestRate.value = '';
        frm.add_APY.value = '';
        frm.add_suborder.value = '';
    }

    function removeRow(rnum) {
        jQuery('#rowNum'+rnum).remove();
    }

    </script>
    </body>    
    </html>
    Last edited by Inigoesdr; 12-23-2013 at 08:33 PM.

  • #2
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    2,958
    Thanks
    2
    Thanked 304 Times in 296 Posts
    In the original name="add_xxxxxxx" attributes in the first set of from fields, the add_ part of the name was being used in the javascript code. Easiest fix would be to use name="add_depratecat", name="add_MinBalance", ...
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks for your suggestions. I've made the corrections but my form still does not work.
    Here are the errors I'm getting in Chrome:
    Uncaught TypeError:
    Cannot read property 'value' of undefined dynamictest4.html.php:54
    addRow dynamictest4.html.php:54
    onclick dynamictest4.html.php:26

    Any other ideas?

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    oops!

    Sorry, my apologies, I had a typo, your suggestion does work..thanks. I am getting the "add row" to work, but my insert statement is still not working. Any more ideas?

  • #5
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    2,958
    Thanks
    2
    Thanked 304 Times in 296 Posts
    The $ in the following is incorrect - if(!empty($_POST['$depratecat'])) {

    That's not a php variable. It's a form field name - $_POST['depratecat']
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Doh!

    I missed that, thanks. I'm still having a problem with the insert. When I enter new data and click "Add Row" the new row with its data appears below as it should, but when I click on "Save Changes" the new row disappears and no data is inserted. I'm not getting any PHP errors in the browser and there are no errors in the Developer tools console. Any additional help would be great. Thanks for all your help.

  • #7
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    2,958
    Thanks
    2
    Thanked 304 Times in 296 Posts
    What debugging have you done?

    Does your echo $cnt; show the 0 1 2 3.... for each of the dynamically added form fields?

    Have you echoed the $sql query statement to see if it is what you expect?

    Do you have any mysqli error checking logic to test if the insert query is running without any error?
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Nothing

    Thanks for your answer. I tried adding echo statements as you suggested. Nothing is returned by echo $cnt or $sql in the INSERT. I've checked the error_log file and there are no PHP errors. I'm just getting more confused after working on this for 2 days. Any other ideas would be appreciated.

  • #9
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    2,958
    Thanks
    2
    Thanked 304 Times in 296 Posts
    Your code outputs the 0 1 2..., and gets to the point of running the insert query when I tried it with the changes mentioned so far (you do have one syntax error in the query, a missing single-quote.)

    Your form likely has a problem (my testing doesn't have any of the edit form fields, only the new/insert form fields.)

    What does adding the following show after you have submitted the form -

    echo '<pre>',print_r($_POST,true),'</pre>';
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Result of submit

    Here is what I get after the form submit:

    Array
    (
    [add_depratecat] => Array
    (
    [0] => 14
    )

    [add_MinBalance] => Array
    (
    [0] => 20000
    )

    [add_InterestRate] => Array
    (
    [0] => 322
    )

    [add_APY] => Array
    (
    [0] => 02
    )

    [add_suborder] => Array
    (
    [0] => 20
    )

    [depratecat26] => 14
    [MinBalance26] => 1010
    [InterestRate26] => 47
    [APY26] => 55
    [suborder26] => 1
    [ok] => Save Changes
    )

  • #11
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    2,958
    Thanks
    2
    Thanked 304 Times in 296 Posts
    Only the form name=" " attributes for the first set of form fields, right after the - <div ID="itemRows"> have the add_. The form fields in the javascript function don't.
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Confused again, sorry

    I thought I was supposed to add the add_ to the script? Did I add in the wrong places? Here's my complete code again as it stands now:

    <?php
    error_reporting(E_ALL);
    // Connect to the DB
    $link = mysqli_connect(myconnection") or die("Error " . mysqli_error($link));
    $new_depratecat='14';

    // store in the DB
    if(!empty($_POST['ok'])) {
    // first delete the records marked for deletion. Why? Because we don't want to process them in the code below
    if( !empty($_POST['delete_IDs']) and is_array($_POST['delete_IDs'])) {
    // you can optimize below into a single query, but let's keep it simple and clear for now:
    foreach($_POST['delete_IDs'] as $ID) {
    $sql = "DELETE FROM tblRates_balance WHERE ID=$ID";
    $link->query($sql);
    }
    }

    // now, to edit the existing data, we have to select all the records in a variable.
    $sql="SELECT * FROM tblRates_balance WHERE depratecat='$new_depratecat' ORDER BY suborder";
    $result = $link->query($sql);

    // now edit them
    while($rates = mysqli_fetch_array($result)) {

    // remember how we constructed the field names above? This was with the IDea to access the values easy now
    $sql = "UPDATE tblRates_balance SET depratecat='".$_POST['depratecat'.$rates['ID']]."',
    MinBalance='".$_POST['MinBalance'.$rates['ID']]."',
    InterestRate='".$_POST['InterestRate'.$rates['ID']]."',
    APY='".$_POST['APY'.$rates['ID']]."',
    suborder='".$_POST['suborder'.$rates['ID']]."'
    WHERE ID='$rates[ID]'";


    $link->query($sql);


    }
    // (feel free to optimize this so query is executed only when a rate is actually changed)

    // adding new
    if(!empty($_POST['depratecat'])) {
    echo $_POST['depratecat'];

    foreach($_POST['depratecat'] as $cnt => $depratecat) {
    echo $cnt;

    $sql = "INSERT INTO tblRates_balance (depratecat, MinBalance, Interst_Rate, APY, suborder) VALUES ('$depratecat','".$_POST['MinBalance'][$cnt]."', '".$_POST['InterestRate'][$cnt]."', '".$_POST['APY'][$cnt]."','".$_POST['suborder'][$cnt]."');";

    $link->query($sql);
    echo '<pre>',print_r($_POST,true),'</pre>';

    }
    }
    }


    // select existing rates here
    $sql="SELECT * FROM tblRates_balance where depratecat='$new_depratecat' ORDER BY ID";
    $result = $link->query($sql);
    ?>

    <html>
    <head>
    <title>dynamically adding rows with jQuery</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    </head>

    <body>

    <div style="width:90%;margin:auto;">
    <h1>11Simple example of dynamically adding rows with jQuery </h1>

    <form method="POST" ID="newrate">

    <div ID="itemRows">
    Dep_rate_cat:<input type="text" name="add_depratecat" size="30" value="<?php echo $new_depratecat; ?>"/>
    Minimum Balance: <input type="text" name="add_MinBalance" size="30" />
    Interest Rate: <input type="text" name="add_InterestRate" />
    APY: <input type="text" name="add_APY" />
    Order: <input type="text" name="add_suborder" size="2"/>


    <input onClick="addRow(this.form);" type="button" value="Add row" /> (This row will not be saved unless you click on "Add row" first)

    <?php
    // Next section does updating. let's assume you have the rate data from the DB in variable called $rates

    while($rates = mysqli_fetch_array($result)): ?>
    <p ID="oldRow<?=$rates['ID']?>">
    <?php echo $rates['ID']; ?>
    Dep_rate_cat:<input type="text" name="depratecat<?=$rates['ID']?>" size="4" value="<?=$rates['depratecat']?>" />
    Minimum Balance: <input type="text" name="MinBalance<?=$rates['ID']?>" value="<?=$rates['MinBalance']?>" />
    Interest Rate: <input type="text" name="InterestRate<?=$rates['ID']?>" value="<?=$rates['InterestRate']?>" />

    APY: <input type="text" name="APY<?=$rates['ID']?>" value="<?=$rates['APY']?>" />
    Order: <input type="text" name="suborder<?=$rates['ID']?>" value="<?=$rates['suborder']?>" />
    <input type="checkbox" name="delete_IDs[]" value="<?=$rates['ID']?>"> Mark to delete</p>
    <?php endwhile;?>

    </div>

    <p><input type="submit" name="ok" value="Save Changes"></p>

    </form>
    <?
    echo '<pre>',print_r($_POST,true),'</pre>';
    ?>
    </div>

    <script language="Javascript" type="text/javascript">

    var rowNum = 0;


    function addRow(frm) {
    rowNum ++;
    var row = '<p ID="rowNum'+rowNum+'">Dep_rate_cat:<input type="text" name="add_depratecat[]" value="'+frm.add_depratecat.value+'">Minimum Balance:<input type="text" name="add_MinBalance[]" value="'+frm.add_MinBalance.value+'">Interest Rate:<input type="text" name="add_InterestRate[]" value="'+frm.add_InterestRate.value+'">APY:<input type="text" name="add_APY[]" value="'+frm.add_APY.value+'">Order:<input type="text" name="add_suborder[]" value="'+frm.add_suborder.value+'"><input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_depratecat.value = '';
    frm.add_MinBalance.value = '';
    frm.add_InterestRate.value = '';
    frm.add_APY.value = '';
    frm.add_suborder.value = '';
    }

    function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
    }

    </script>
    </body>
    </html>

  • #13
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    2,958
    Thanks
    2
    Thanked 304 Times in 296 Posts
    Go back to your original (at the start of this thread) function addRow(frm) { .... } code.
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #14
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Returned to earlier code

    I repalaced the addRow with the block from my earlier code. The INSERT still is not working. The print_r now shows this, don't know why:
    Array
    (
    [add_depratecat] => 14
    [add_MinBalance] =>
    [add_InterestRate] =>
    [add_APY] =>
    [add_suborder] =>
    [depratecat26] => 14
    [MinBalance26] => 1010
    [InterestRate26] => 47
    [APY26] => 55
    [suborder26] => 1
    [depratecat] => Array
    (
    [0] => 14
    )

    [MinBalance] => Array
    (
    [0] => 2000
    )

    [InterestRate] => Array
    (
    [0] => 200
    )

    [APY] => Array
    (
    [0] => 200
    )

    [suborder] => Array
    (
    [0] => 20
    )

    [ok] => Save Changes
    )

  • #15
    New Coder
    Join Date
    Dec 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Also after change..

    After adding the original addrow block the addrow function no longer works.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •