adding input fields

xml json creator

by James Doyle

HTML

<div id="a">
<input name="a" type="text" id="a" /><input onclick="newField(this,'a',1)" type="submit" id="submit" name="submit" value="&nbsp;+&nbsp;" />
</div>

CSS

body {
    margin: 10px;
}
input {
    padding: 2px;
}
input[type=text] {
    margin: 0 5px 5px 0;
}
input[type=submit] {
    border: 1px solid hsla(200, 100%, 40%, 1);
    color: #fff;
    outline: none;
    background: hsla(200, 100%, 50%, 1);
    border-radius: 10px;
    text-shadow: 1px 1px 0px hsla(200,100%,30%,1);
}

input.depth1 {
    margin-left: 20px;
}
input.depth2 {
    margin-left: 40px;
}
input.depth2 {
    margin-left: 40px;
}
input.depth2 {
    margin-left: 40px;
}
input.depth3 {
    margin-left: 60px;
}

JavaScript

function newField(el,letter, depth) {
    console.log(el.value);
    var fieldname = $('input#a').attr('value');
    var write = "<br /><input class=depth"+depth+" name=" + fieldname + " type='text' id='a' /><input onclick=newField(this,'" + letter + letter + "',"+(depth+1)+") type='submit' id='submit' name='submit' value='&nbsp;+&nbsp;' />";
    $(write).insertAfter(el);
}