Getting input of form for usage in php page

Question

I'm using the below jquery code for creating new entry in my form upon click on a button.

 <script type="text/javascript">
    $(document).ready(function() {
        $('#btnAdd').click(function() {
            var num     = $('.clonedInput').length;
            var newNum  = new Number(num + 1);

            var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

            newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
            $('#input' + num).after(newElem);
            $('#btnDel').attr('disabled','');

            if (newNum == 3)
                $('#btnAdd').attr('disabled','disabled');
        });

        $('#btnDel').click(function() {
            var num = $('.clonedInput').length;

            $('#input' + num).remove();
            $('#btnAdd').attr('disabled','');

            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });


        $('#btnDel').attr('disabled','disabled');
    });
</script>

my html code is

<form id="entry" method="post" action="collect.php">
<div id="input1" style="border: solid 2px #000; width: 80%; margin-bottom:4px;" class="clonedInput">
<table>
<tr>
<td><img src="arrow.gif"/></td>
<td>
    <table>
        <tr>
            <td><b>I/P: </b></td>
            <td><input type="text" name="ipname" id="name1" /></td>

            <td><b>Console I/P: </b></td>
            <td><input type="text" name="consolename" id="name1" /></td>

            <td><b>Console Port: </b></td>
            <td><input type="text" name="portname" id="name1" /></td>

            <td><b>Rack Number: </b></td>
            <td><input type="text" name="rackname" id="name1" /></td>
        </tr>
        <tr>
            <td><b>Serial Number: </b></td>
            <td><input type="text" name="serialname" id="name1" /></td>

            <td><b>Login Machine: (must get dropdown from db)</b></td>
            <td><select name="logmacname">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
            </select></td>

            <td><b>Machine Username: </b></td>
            <td><select name="usermac" >
            <option value="">Select:</option>
            <option value="cisco">cisco</option>
            <option value="lab">lab</option>
            </select></td>

            <td><b>Machine Password: </b></td>
            <td><select name="macpass" >
            <option value="">Select:</option>
            <option value="cisco">cisco</option>
            <option value="lab">lab</option>
            </select></td>
        </tr>  
    </table>
</td>
</tr>
</table>            
</div>

<div>
    <input type="button" id="btnAdd" value="add another entry" />
    <input type="button" id="btnDel" value="remove entry" />
</div>
<input type="submit" value="Click to submit!">
</form>

I now need to send this form to my collect.php for db storage. I know I can access the form values using $_POST and use isset() function for checking them but how can I access each entry from the form and use it. Only my div is getting updated with new names but input fields have same name. Can someone help me over come this problem.

Answer 1

First of all you can only have one unique ID per element, while you have id="name1" for all elements, so either change the ID for each element, or remove it or change it to class="name1".

In your example there is no form tag, i don't know if it is because you omitted it from your example or because it does not exist, anyway you need a form tag around the wrapping div:

<form action="collect.php" method="post">
...
</form>

You also need a submit button:

<input type="submit" value="Submit"/>

and then once the submit button is clicked , your collect.php will be automatically called and then you can access the parameters from the post array:

$ipName = $_POST['ipname'];
$consolename = $_POST['consolename'];
...