Showing input text on link click


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”…

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 Anthony,

I am having a go on this page:

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"
<html xmlns="">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src=""></script>
        <link rel="stylesheet" type="text/css" href="" />
        <link rel="stylesheet" type="text/css" href="" />
        <link rel="stylesheet" type="text/css" href="" />
            Add Another
        <style type="text/css">
                padding: 20px;
        <div id="site-container">
            <form action="" method="post">
                <table id="invoice">
                                <input type="text" name="lines[1][name]" />
                                <input type="text" name="lines[1][description]" />
                <input type="button" id="add-line" value="Add another line?" /> <input type="submit" value="Submit" />
        <script type="text/javascript">
                    $('#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);

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