Onclick Echo Multiple Times

Hi, just a quick one, I want the user to have the option to edd extra fields when required, this is working by using the code below, but only once, I want a field to echo out every time they click the button.

How could and should this be done?

if (isset($_POST['extra'])) {
	echo '
	<!-- BOF Product Info -->
<div class="productInfo">

<div class="prodContain">
<span class="fontField bold">Product Description</span>
<input type="text" name="" value="" class="prodName" style="width: 280px" />
</div>

<div class="prodContain">
<span class="fontField bold">Serial Number</span>
<input type="text" name="" value="" class="prodName" style="width: 110px" />
</div>

<div class="prodContain">
<span class="fontField bold">Stock Number</span>
<input type="text" name="" value="" class="prodName" style="width: 110px" />
</div>

<div class="prodContain">
<span class="fontField bold">Quantity</span>
<input type="text" name="" value="" class="prodName" style="width: 50px;" />
</div>

<div class="prodContain">
<span class="fontField bold">Item Price</span>
<input type="text" name="" value="" class="prodName" style="width: 70px;" /></div>
</div>
<!-- EOF Product Info -->
	';
	}
?>
<div style="float: left;"><input type="submit" value="Extra Row" name="extra" id="subBtn" /></div>

So I basically need to know how to get the above code to echo everytime the button is clicked, not just once.

Here, this should help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssbase/base-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssfonts/fonts-min.css" />
        <title>
            Demo
        </title>
        <style type="text/css">
            #site-container{
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div id="site-container">
            <form action="" method="post">
                <table id="invoice">
                    <thead>
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Description
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="text" name="lines[1][name]" />
                            </td>
                            <td>
                                <input type="text" name="lines[1][description]" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <input type="button" id="add-line" value="Add another line?" /> <input type="submit" value="Submit" />
            </form>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#add-line').click(function(){
                    $('#invoice > tbody > tr:first-child').clone().appendTo('#invoice > tbody').find('input').each(function(index, input){
                        $(input).attr('name', function(index, attr){
                            return attr.replace('[1]', '[' + $('#invoice > tbody').find('tr').size() + ']');
                        }).attr('value', null);
                    });
                });
            });
        </script>
    </body>
</html>


Hi, thanks for your message dude. Is there not a way to echo the fields depending on the URL using $_GET? So my user would enter how many products to be added and will then take them to fill out the details.

Not sure how I can multiply a variable though!?:shifty:

Like this?

index.php?items=6


<?php
$items = isset($_GET['items']) && ((int)$_GET['items'] > 0) ? (int)$_GET['items'] : 1 ;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssbase/base-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssfonts/fonts-min.css" />
        <title>
            Demo
        </title>
        <style type="text/css">
            #site-container{
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div id="site-container">
            <form action="" method="post">
                <table id="invoice">
                    <thead>
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Description
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach(range(0, $items) as $num): ?>
                          <tr>
                              <td>
                                  <input type="text" name="lines[<?php echo $num; ?>][name]" />
                              </td>
                              <td>
                                  <input type="text" name="lines[<?php echo $num; ?>][description]" />
                              </td>
                          </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <input type="submit" value="Submit" />
            </form>
        </div>
    </body>
</html>

Hey dude, that’s perfect, exactly the thing that I wanted, you got it spot on. Nice one.

Don’t quite fully understand what’s happening in the code below, I like to understand the workings of things :slight_smile: It’s the && ((int)$_GET[‘items’] > 0) I’m not really getting.

$items = isset($_GET['items']) && ((int)$_GET['items'] > 0) ? (int)$_GET['items'] : 1 ;

Hi Anthony, just a quick question, now that I have dynamically generated fields depending on the URL, how can I enter these into the database in the mysql_query? I’m guessing listing each name of the field in the mysql_query isn’t an ideal solution to this.

Appreciate your help dude :smiley:

Hey no worries, sorry, I’m a bit rushed here. :slight_smile:


<?php
if(true === is_array($_POST['lines'])){
  foreach($_POST['lines'] as $num => $line){
    #do stuff
    $name = $line['name']
    $desc = $line['description'];
  }
}

Hey Anthony, apologies for resurrecting an old’ish post - only just had chance to take a look at this.Not sure your last post is meant for what my problem is - now that I have various fields depending on the URL, how can I enter these values into the database, for example sometimes there may only be two fields required to enter and other times there could be twenty.

I guess I could list each name of each field in the mysql_query but then I would be entering empty fields to the database if only a few fields are required.

Hope I’ve explained ok, tough to figure out! :smiley: