javascript - ボタンを押すと JavaScript が意図せずページをリロードする

Question

ユーザーが無限のオプションと無限の画像 URL を入力できるようにするために使用したい JavaScript が少しあります。

ここに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>

ここに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;
});

したがって、基本的にはオプションを追加し続けることができ、最初のオプションでは無限の画像を追加できますが、前のオプション (生成されたもの) のいずれかで [画像の追加] を押すと、ページがリロードされるだけで、生成されたすべてが失われます。遠い？

アイデアは、誰かがオプションごとに追加したいだけ多くのオプションと画像を入力できるようにし、最終的にそれらをデータベースに追加できるようにすることです。

ありがとう

score 6 · Accepted Answer

コールバック関数では、次のようなデフォルトアクションを防止する必要があります。

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

また、あなたのコードを見ると、javascript テンプレートエンジンを調べることで利益が得られると思います。彼らはこのようなことをとても簡単にします。http://underscorejs.orgには優れたものが含まれており、 http://handlebarsjs.com/も非常に優れています。

score 3 · Accepted Answer

変化する：

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

に：

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

ボタンがフォームを送信しないようにします。詳細については、type 属性を参照してください。

ハンドラー内でフォームの送信をキャンセルすることもできます。click

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

もちろん、挿入した HTML<button>タグも更新する必要があります。発生する問題の 1 つは、作成した新しいボタン.clickにハンドラーがバインドされないことです。これを回避する 1 つの方法は、代わりにバインディングを使用することです。.live

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

これは更新された Fiddleです。

アドバイス:同じものを複数回使用することは推奨されないため、のclass代わりにを使用します。基本的に、次のように変更します。idid

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

に：

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

そしてそれをバインドします：

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

UI が複雑すぎる場合は、Knockout.jsなどの MVVM 型パターンをチェックインすることをお勧めします。MVVM 型パターンは、すべてをモデルにバインドすることで非常に簡単に実行できます。モデルに項目を追加するだけで、新しい UI が自動的に作成されます。

score 1 · Accepted Answer

ID「add_option」で複数の要素を作成しています。それは適切ではありません。一部のブラウザでは動作する場合があります。

さらに、元の HTML にある場合、そのボタンに「クリック」ハンドラーをアタッチしています。

しかし、HTML と別のボタンを追加するときは、クリックハンドラーを配置しません。.append()これは、新しい HTML で呼び出した直後に行う必要があることです。

ボタンの通常の役割は、フォームを送信することです。フォームを送信するとサーバーにコンテンツが送信され、サーバーは表示されるコンテンツを送り返します。

ヒント：

あなたが望むのは、javascript 内で ajax を介してフォームの内容を送信する方法です。これは気弱な人向けではありません。最近の HTML5 の変更によりかなり簡単になったため、ウェブ上には相反する情報がたくさんありますが、古い情報はすべてまだ出回っています。どれが JavaScript オブジェクトクラスであるかを調べ、FormDataそれをデータとして jQuery に渡す必要があり$.ajax()ます。その例を調べて、ajax 呼び出しに適した他のプロパティを取得してください。

javascript - ボタンを押すと JavaScript が意図せずページをリロードする

3 に答える 3

Related

Reference