0

I have created an add button. When I click on the button, it creates a new card. When I click on the card it will show me an input field in which I can put for example my name.

What I want do is: I dont want to lose changes upon browser refresh. So for example, if I have two cards on the screen and I am editing one I want that when I refresh the page the two cards and the one in editing mode will still be exactly the same.

I already tried some things but it sadly it didn't work. Can you guys help me with this?

HTML

<button class="plus">
  <div class="item">
    <p>+</p>

  </div>
</button>

<div id="newCardHolder">

</div>

<div id="cardPrototype" class="card" style="display:none;">
    <p  class="delete">x</p>
  <span>Title</span>
  <form name="theform" style="display:none;">
    <input class="input-feld" type="text">
    <br>
    <input class="input-feld " type="text">
    <br>
    <input class="speichern"type="button" onClick="new Person()" value="Speichern">
    <input class="abbrechen"type="button" onClick="new abbrechen()" value="Abbrechen">
  </form>
</div>

CSS

/*Input-feld*/
.input-feld {
    font-family: TheSans Swisscom;
    margin: 5px 3px;
    padding: 3px;
    width:250px;
}

.card {
            width:300px;
            margin-right:5px; 
            margin-left:5px; 
            margin-bottom:10px; 
            float: left;
            padding:10px; 
            background-color: #BBBBBB; 
            border: 1px solid #ccc; 
            border-radius:10px;
            position:relative;
}

.delete {
            font-family:'TheSans Swisscom';
            right:12px;
            top:0;
            position:absolute;
}

.speichern{
    font-family:'TheSans Swisscom';
    background-color: greenyellow; 
    border-radius: 5px;
    margin-top: 5px;
    border-color:greenyellow;
}

.abbrechen{
    font-family: "TheSans Swisscom";
    background-color: red;
    border-radius: 5px;
    margin-left: 10px;
    border-color: red;
}    /*kärtchen*/

JavaScript

$(document).ready(function () {
    $('button.plus').on('click', function () {
        var newCard = $('#cardPrototype').clone(true); 
        $(newCard).css('display', 'block').removeAttr('id');
        $('#newCardHolder').append(newCard);
    });

    $("body").on("click", ".card", function () { 
        $(this).find('.input-feld').attr('placeholder', $(this).find('span').text());
        $(this).find('span').hide();
        $(this).find('form').show();
    });


    $('.card').on("click", function () {
        $('.card').find('form').hide();
        $('.card').find('span').show();
    });

/*delete button*/
$("body").on('click', '.card .delete', function() {
    $(this).closest('.card').remove();
});
});

/*Page reloader*/
window.onbeforeunload = function () {
    localStorage.setItem(name, $('#card').val());
    localStorage.setItem(name,$('#input-feld').val());
}
window.location.reload()
Sandro21
  • 211
  • 5
  • 13
  • use jstorage to store the values – Anoop LL Sep 05 '16 at 10:47
  • 1
    Possible duplicate of [Can JavaScript maintain any state after a reload?](http://stackoverflow.com/questions/10807822/can-javascript-maintain-any-state-after-a-reload) – Liam Sep 05 '16 at 10:50
  • @Liam well i tryed it but it dident work for me – Sandro21 Sep 05 '16 at 11:31
  • 1
    What did you try? What didn't work? What errors did you get? The more info you can give, the more you'll get back in return – StudioTime Sep 05 '16 at 11:32
  • well i follow the link to w3schools web storage. To create a button and then it counts how many times i clicked a button. After refreshing the page it gave back the same number as bevor. Well thats fine but thats defenetly not what i am searching for. I wanna that when i refresh the page that the page is still the same as bevor. So if i have created with my button two cards that these two cards are still there when i refresh the page. – Sandro21 Sep 05 '16 at 11:53

0 Answers0