Problem: The current div disappears when the task inside it is done

here is my HTML:

<form action="index.php" method='post'>
<div class="task-btn">
    <button class="task-info" name="update-animal" onclick="show('update')">Update</button>
    <button class="task-info" name="add-animal" onclick="show('add')">Add</button>
    <button class="task-info" name="dlt-animal" onclick="show('delete')">delete</button>
</div>
<?php if($template == 1): ?>
    <div id="update">
    </div>
<?php endif; ?>
<?php if($template == 2): ?>
    <div id="add">
    </div>
<?php endif; ?>
<?php if($template == 3): ?>
    <div id="delete">
    </div>
<?php endif; ?>

Here is my php:

$template = 0;
if (isset($_POST['update-animal'])) {
$template = 1;
}
if (isset($_POST['add-animal'])) {
$template = 2;
}
if (isset($_POST['dlt-animal'])) {
$template = 3;
}

here is my Javascript:

 var update = document.getElementById('update');
var add = document.getElementById('add');
var dlt = document.getElementById('delete');


function show(element) {
    if(element == 'update'){
        update.style.display = 'block';
        add.style.display = 'none';
        dlt.style.display = 'none';
    }
    else if(element == 'add'){
        add.style.display = 'block';
        update.style.display = 'none';
        dlt.style.display = 'none';
    }
    else if(element == 'delete'){
        dlt.style.display = 'block';
        update.style.display = 'none';
        add.style.display = 'none';
    }
}

What i want is to click on the tasks-button and display the respective template. The problem is when I update/add/delete some data from my Database it refresh the page so it will display just the three button and not the content of the div you were on. If you need the php for the add div to see what’s going on, just tell me I will send it.

Answer

Ok, Got your problem. You don’t want to refresh the page after the task done. So into the onclick before the function name add return. The function should return false to the onclick. That means in HTML part change your button part code with this:

<button class="task-info" name="update-animal" onclick="return show('update')">Update</button>
<button class="task-info" name="add-animal" onclick="return show('add')">Add</button>
<button class="task-info" name="dlt-animal" onclick="return show('delete')">delete</button>

Then in javascript function just add return false; end of function like this:

function show(element) {
 if(element == 'update'){
        update.style.display = 'block';
        add.style.display = 'none';
        dlt.style.display = 'none';
    }
    else if(element == 'add'){
        add.style.display = 'block';
        update.style.display = 'none';
        dlt.style.display = 'none';
    }
    else if(element == 'delete'){
        dlt.style.display = 'block';
        update.style.display = 'none';
        add.style.display = 'none';
    }
return false;
}