5

I'm trying to add the exact same element found below using javascript. I've tried all the solutions found here, I even tried to echo the element with php echo but no luck. There is no need to change any input names, or anything like that, simply on click of that button, add another row to the table, and that's it.

Here's the element:

<tr>
<td><input type="text" name="links"></td>
<td><input type="text" name="keywords"></td> 
<td><input type="text" name="violationtype"></td>   
<td><input type="submit" id="last" class="button" value="Add another line" onclick:"addField();"></td>          
</tr>

I'm up for anything really, however, I'd like javascript as I kept my system without any external reference (such as jquery) but at this point I'm open to any suggestions. I tried doing it with the following code:

function addFields() {
    var number = document.getElementById("last").value;
    var html = '<tr>' +
    '<td><input type="text" name="links"></td>' +
    '<td><input type="text" name="keywords"></td>' +
    '<td><input type="text" name="violationtype"></td>' +
    '<td><input type="submit" id="last" class="button" value="Add another line" name="line" onclick:"addField();"></td>';
    number.appendChild(html);
}

But it doesn't seem to do anything. I assume I should handle the code knowing which input is last in a better way than id="last" but I have no clue how to do it.

Improve this question
2
  • 1
    you should have onclick= not : Commented Oct 5, 2013 at 16:29
  • At first glance, onclick:"addField();" should be onclick="addFields();". Commented Oct 5, 2013 at 16:32

3 Answers 3

Reset to default
11

You may achieve same thing using following

HTML:

<table id="tbl">
    <tr>
        <td><input type="text" name="links" /></td>
        <td><input type="text" name="keywords" /></td> 
        <td><input type="text" name="violationtype" /></td>   
        <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>          
    </tr>
</table>

JS:

function addField(n)
{
    var tr = n.parentNode.parentNode.cloneNode(true);
    document.getElementById('tbl').appendChild(tr);
}

Also, remove the id from input, because an ID must be unique and remember you are using same names for all of your inputs, here, so, names should be named as links[] , keywords[] and violationtype[] to use them as array, but not sure what is your case.

An Example.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

this is amazing o.o 4 lines of code and they work! I've added it and it works perfect
9

A complete working example - http://jsfiddle.net/QmHdL/

Table can be created like this

<table id="myTable">
    <tr>
        <td><input type="text" name="links"></td>
        <td><input type="text" name="keywords"></td>
        <td><input type="text" name="violationtype"></td>
        <td><input type="button" class="button" value="Add another line" onclick="addField();"></td>
    </tr>
</table>

Now, addField has to be implemented like this

    function addField (argument) {
        var myTable = document.getElementById("myTable");
        var currentIndex = myTable.rows.length;
        var currentRow = myTable.insertRow(-1);

        var linksBox = document.createElement("input");
        linksBox.setAttribute("name", "links" + currentIndex);

        var keywordsBox = document.createElement("input");
        keywordsBox.setAttribute("name", "keywords" + currentIndex);

        var violationsBox = document.createElement("input");
        violationsBox.setAttribute("name", "violationtype" + currentIndex);

        var addRowBox = document.createElement("input");
        addRowBox.setAttribute("type", "button");
        addRowBox.setAttribute("value", "Add another line");
        addRowBox.setAttribute("onclick", "addField();");
        addRowBox.setAttribute("class", "button");

        var currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(linksBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(keywordsBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(violationsBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(addRowBox);
    }
Improve this answer

6 Comments

This is what should be used but I believe you can eliminate the currentIndex when you create a new element with the same name unless he's sending it via GET (I just don't know what the result would be honestly). But the $_POST global is an array that will expand with deltas if repeated inputs are sent.
@Deryck Thats true. But not sure, how he is implementing it. :(
@thefourtheye very badly I assume, considering I need foreach inside foreach inside foreach to parse all that data, but this works, thank you! Could I add a class to those inputs as well? Like linksBox.setAttribute("class","standard"); added under the first setatrribute line?
@SamFisher Yup. You can add. :)
Wicked =) I'm going to use the clone version at this specific instance, however, I do need it in a different place to generate the html, so this one comes very handy as well. Thanks again!
|
1

There are a few problems here..

The onclick: should be onclick=

Then you're appending to the element with id 'last' which is an input element - you can't append to that. Give your table an ID and append to that instead if you want to add a row, otherwise create some other element - div/span with an ID and append to that if the whle table is to bee created from scratch

Then - you can't append HTML like that; you need to either create an new table row element and append that or use [element].innerHTML += [your new row HTML].

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.