button press makes javascript reload page unintentionally

Question

I have a bit of javascript that I want to use to allow the user to enter in infinite options and infinite image URLS.

I have made a jsFiddle

here is the html:

<div class="container-fluid body">


<div class="admin-box">
<form action="http://localhost/MyZone/public_html/index.php/create_option/2" class="form-horizontal" method="post" accept-charset="utf-8"><div style="display:none">
<input type="hidden" name="ci_csrf_token" value="001b4b051689692edec29d09b9837f3a">
</div>    <fieldset>
    <legend>Option Title</legend>
    <div class="control-group">
        <label class="control-label" for="Option title">title</label>
        <div class="controls">
            <input type="text" name="name" id="name" class="span6">
        </div>
    </div>
    <div class="admin-box" id="option_information">
        <fieldset>
        <legend>Option information</legend>
        <div class="control-group">
            <label class="control-label" for="value">Description</label>
            <div class="controls">
                <input type="text" name="value" id="value" class="span6">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="cost_including_vat">Cost including VAT</label>
            <div class="controls">
                <input type="text" name="cost_including_vat" id="cost_including_vat" class="span6">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="vat_of_cost">VAT of cost</label>
            <div class="controls">
                <input type="text" name="vat_of_cost" id="vat_of_cost" class="span6">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="sale_price_including_vat">Sale price including vat</label>
            <div class="controls">
                <input type="text" name="sale_price_including_vat" id="sale_price_including_vat" class="span6">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="vat_of_sale_price">VAT of sale price</label>
            <div class="controls">
                <input type="text" name="vat_of_sale_price" id="vat_of_sale_price" class="span6">
            </div>
        </div>
        <div id="image_addition">

        </div>
        <div class="control-group">
            <button class="controls" id="add_image" value="Add image">Add Image</button>
        </div>
        </fieldset>
    </div>
    <div class="control-group">
            <button class="controls" id="add_option" value="Add option">Add option</button>
    </div>
    <div class="form-actions">
        <br>
        <input type="submit" name="save" class="btn btn-primary" value="Create option">
            or <a href="http://localhost/MyZone/public_html/index.php" class="btn btn-warning">Cancel</a>        </div>
</fieldset>
</form>   

here is the Javascript

var counter_image = 1;
$('#add_image').click(function() 
{
    var newrow = '<div class="control-group">'+
            '<label class="control-label" for="image_name'+counter_image+'">Image '+counter_image+' name</label>'+
            '<div class="controls">' +
            '<input type="text" name="image_name'+counter_image+'" id="image_name'+counter_image+'" class="span6" />'+
            '</div>' +
            '</div>' +
            '<div class="control-group">' +
            '<label class="control-label" for="image_description'+counter_image+'">Image '+counter_image+' message</label>' +
            '<div class="controls">' +
            '<input type="text" name="image_description'+counter_image+'" id="image_description'+counter_image+'" class="span6" />' +
            '</div>' +
            '</div>' +
            '<div class="control-group">' +
            '<label class="control-label" for="image_url'+counter_image+'">Image '+counter_image+' URL</label>' +
            '<div class="controls">' +
            '<input type="url" name="image_url'+counter_image+'" id="image_url'+counter_image+'" class="span6" />' +
            '</div>' +
            '</div>';
    $('#image_addition').append(newrow);
    counter_image++;
    return false;
});

var counter_option = 1;
$('#add_option').click(function() 
{
    var newrow = '<fieldset>' +
        '<legend>Option information</legend>'+
        '<div class="control-group">'+
            '<label class="control-label" for="value">Description</label>'+
            '<div class="controls">'+
                '<input type="text" name="value" id="value" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div class="control-group">'+
            '<label class="control-label" for="cost_including_vat">Cost including VAT</label>'+
            '<div class="controls">'+
                '<input type="text" name="cost_including_vat" id="cost_including_vat" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div class="control-group">'+
            '<label class="control-label" for="vat_of_cost">VAT of cost</label>'+
            '<div class="controls">'+
                '<input type="text" name="vat_of_cost" id="vat_of_cost" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div class="control-group">'+
            '<label class="control-label" for="sale_price_including_vat">Sale price including vat</label>'+
            '<div class="controls">'+
                '<input type="text" name="sale_price_including_vat" id="sale_price_including_vat" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div class="control-group">'+
            '<label class="control-label" for="vat_of_sale_price">VAT of sale price</label>'+
            '<div class="controls">'+
                '<input type="text" name="vat_of_sale_price" id="vat_of_sale_price" class="span6" />'+
            '</div>'+
        '</div>'+
        '<div id="image_addition">'+
        '</div>'+
        '<div class="control-group">'+
            '<button class="controls" id="add_option" value="Add image">Add Image</button>'+
        '</div>'+
        '</fieldset>';
    $('#option_information').append(newrow);
    counter_option++;
    return false;
});

So basically I can keep adding options fine and on the FIRST option I can add infinite images, however, on any of the preceding options (the ones generated) when I press 'Add image' it just reloads the page making me loose everything generated so far?

The idea is that I want to allow someone to enter in as many options and images per option as they want to add then eventually add them to a database.

Thanks

Answer 1

In your callback function you just have to prevent the default action like this:

$("#whatever").click(function(event) {
    event.preventDefault();
    ...
});

Also, from looking at your code, I think you might benefit from looking into a javascript templating engine. They make stuff like this super easy. http://underscorejs.org has a good one wrapped in, and http://handlebarsjs.com/ is also pretty sweet.