jquery - button press makes javascript reload page unintentionally - Stack Overflow

admin管理员组

文章数量:1400040

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

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

• javascript
• jquery
• html

Share Improve this question Follow asked Oct 10, 2013 at 16:35 bubblebathbubblebath 99944 gold badges2020 silver badges4646 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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 has a good one wrapped in, and http://handlebarsjs./ is also pretty sweet.

Change:

 <button class="controls" id="add_option" value="Add option">

To:

 <button type="button" class="controls" id="add_option" value="Add option">

To prevent the button from submitting the form. See the type attribute for more information.

You can also cancel the form submission within your click handler:

$('#add_option').click(function(e) 
{
   e.preventDefault(); // Cancel form submit
   // Rest of code
});

You'll also, of course, need to update your injected HTML <button> tag as well. One issue you'll run into is your .click handler will not bind to the new buttons you create. One way around that is to use the .live binding instead:

$('#add_option').live('click', function()
{
   // Old code here
});

Here's an updated Fiddle.

Advice: I would use a class instead of an id, since using the same id more than once is not remended. Basically, change:

<button type="button" class="controls" id="add_option" value="Add option">

to:

<button type="button" class="controls add_option" value="Add option">

And bind it with:

$('.add_option').live('click', function()

If your UI gets too plicated, you might want to check into a MVVM type pattern such as Knockout.js, which can do all this stuff very easily by binding everything to a model. You would just add an item to a model and it would create the new UI automatically.

You are creating multiple elements with the id "add_option". That's not proper. It might work in some browsers.

Further, you are attaching a 'click' handler to that button, when its the one in the original HTML.

But when you add more HTML and another button, you don't put a click handler on it. Its something you would need to do right after you call .append() with the new HTML.

The normal job of a button is to submit the form it is in. Submitting form will send stuff to the server and the server will send content back that will be displayed.

HINT:

What you may want is a way to submit the form content via ajax within javascript. This is not for the faint of heart. There is a lot of conflicting information on the web because recent HTML5 changes have made it pretty easy but all the old info is still floating around. You will need to find out about FormData which is a javascript object class and pass that to jQuery's $.ajax() as the data. Be sure to look up examples of that to get the other properties right for the ajax call.

本文标签： jquerybutton press makes javascript reload page unintentionallyStack Overflow