Add fields testing

Add new fields on click

by toubia95

HTML

<b>Date des actes et ages sur les actes :</b>
<form action="" method="post">
    <div class="input-fields">
    <div class="input-field-1">
    <input type="text" name="Dates" placeholder="jj/mm/aaaa" size="10"> <input type="text" name="Ages" placeholder="age" size="3">
    </div>
</div>
<small><a href="#" class="trigger-add">+ Ajouter un <span class="number">2</span><sup>e</sup> acte</a></small>
<p><input type="submit" value="Serialiser"/></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>

CSS

/* NOTICE 
 * Utiliser jquery map et join 
 * pour récupérer les valeurs 
 * dans un array */

/* marges */
body {padding: 10px;}
[class^="input-field-"] {margin-top: 5px;}

/* liens */
[class^="trigger-"] {text-decoration: none;}
.trigger-add, .trigger-add:hover, .trigger-add:visited {
    color: blue;
}
.trigger-add:hover {text-decoration: underline;}
.trigger-remove {color:grey;}

JavaScript

var i = 1;
var k = 2;
$(".trigger-add").click(function() {
    var j=i+1;
    $('.input-fields').append('<div class=\"input-field-'+j+'\"><input type=\"text\" name=\"Dates" placeholder=\"jj/mm/aaaa\" size=\"10\"> <input type=\"text\" name=\"Ages\" placeholder=\"age\" size=\"3\"> <small><a href=\"#\" class=\"trigger-remove\" title=\"Supprimer cet acte\">x</a></small></div>');
    i=j;
    k=k+1;
    $(".number").text(k);
});
$(".trigger-remove").live("click", function(){
    $(this).parent().parent().remove();
    k=k-1;
    $(".number").text(k);
});

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
    $('form').submit(function() {
        var firstresult = $('form').serializeObject();
        firstresult.Ages.push("1");
        var myresult = JSON.stringify(firstresult);
        $('#result').text(myresult);
        $('#result').append(" Date1 = "+firstresult.Dates[0]);
        
        return false;
    });
});