Showing input text on link click

hey,

I’m not sure if this can be done in PHP, but is there a method where i can initially show one input text box, like the image below, see where it says “Author 1”…

http://www.prima.cse.salford.ac.uk:8080/~ibrarhussain/patent.jpg

I want to be able to click on the “Add more” link and make another textbox appear that says Author 2, with an input text box…

Is this possible?

Thanks

Thanks Anthony,

I am having a go on this page:

http://www.prima.cse.salford.ac.uk:8080/~ibrarhussain/test.html

Ok, couple of problems :smiley:

First thing is, when i click on “Add author” the new line appears below the “Add” button, can i get it to appear directly below the first line Author?

Secondly, it is adding the wrong line as the new line. When you click on “Add author” it adds a new line for “Title”…

It should add a new line for the Author…

Any ideas?

Thanks again

Yup, with some jQuery magic.


<!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>
            Add Another
        </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>

I tried changing the first-child to fifth-child as a guess but that didn’t work, it added the full table again :frowning: