javascript - 表示されてから約ミリ秒でdivの内容が消える

Question

HTML:

<form id='pool_play'>
    <?php           
        $PLAYERS = 8;
        for ($i=1; $i <= $PLAYERS; $i++) { 
            print $i . ' <input type="text" class="initial_players" autofocus> <br/>';
        }
    ?>
    <br>
    <button type="submit" class="random"> Randomize bracket</button>
</form>
<p class="debug"></p>

js:

$("#pool_play").submit(function(event) {
    var participants = $('.initial_players').map(function() {
        return $(this).val();
    }).get();

    for (var i = 0; i < participants.length; i++) {
        $('p.debug').append(participants[i] + " ");
    }
});

私が基本的にやろうとしているのは、フォーム#pool_playが送信されたときに、入力ボックスの内容を.debug段落タグに出力することです。何が起こるかというと、数ミリ秒間表示されてから消えます。私の推測では、ページが送信されると、古いデータ (入力さ.debugれた後の段落の内容を意味する) が破棄されます。チップ？

Answer 1

を使用してページが送信されないようにすることができますevent.preventDefault()

$("#pool_play").submit(function(event) {
    var participants = $('.initial_players').map(function() {
        return $(this).val();
    }).get();

    for (var i = 0; i < participants.length; i++) {
        $('p.debug').append(participants[i] + " ");
    }
    event.preventDefault();//stops submit
});