it-swarm.dev

كيف إعادة تحميل الصفحة الحالية دون فقدان أي بيانات النموذج؟

هل يمكنني إعادة تحميل الصفحة الحالية دون فقدان أي بيانات النموذج؟ انا إستعملت..

window.location = window.location.href;

و

window.location.reload(true);

ولكن لا يمكن الحصول على هذين الأمرين في وقت سابق من شكل دتس بالنسبة لي. ما المشكله ؟ عند تحديث المتصفح يدويًا ، فلا بأس بذلك (لا أفقد أي بيانات نموذجية). يرجى توجيه لي كيف لمعرفة ذلك.

إليكم الكود الكامل ...

<div class="form-actions">
        <form>
            <table cellpadding = "5" cellspacing ="10">
                <tr class="control-group">
                    <td style="width: 100px;">
                        <div>Name:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputName" placeholder="Name" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Email:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input class="span3" placeholder="[email protected]" id= "inputEmail" type="email" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Phone:&nbsp;</div>
                    </td>
                    <td>
                        <input type="text" id="inputPhone" placeholder="phone number">
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Subject:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputSubject" placeholder="Subject" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td colspan ="2">
                        <div>
                            <div>Detail:&nbsp;</div>
                            <div class="controls">
                                <textarea id="inputDetail"></textarea>
                            </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                    <div>
                        <label style="font-weight: bold;" class="checkbox"> <input id="confirmCheck" value="" type="checkbox">
                                I Agree to the Personal information handling policy
                        </label>
                    </div>
                    <div id = "alert_placeholder"></div>
                        <div class="acceptment">
                            [Personal information handling policy]<br> <br>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div align="center">
                            <button id="btnConfirm" class="btn btn-primary">Confirm</button>
                            <input type="reset" style="width: 65px; height: 27px;" id="btnReset" class="btn">
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>

وفي ملف JS الخاص بي ..

function bind() {
$('#btnConfirm').click(function(e) {
    if ($('#confirmCheck').is(":checked")) {
        getConfirmationForSendFAQ();
    }
    else {
        e.preventDefault();
        showalert("You should accept \"Personal Information Policy\" !", "alert-error");
    }
});};function getConfirmationForSendFAQ() {
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var phone = $('#inputPhone').val();
    var subject = $('#inputSubject').val();
    var detail = $('#inputDetail').val();

    $('.form-actions').empty();
    html = [];
    html.Push("<table cellpadding ='8' class = 'submitInfo'");
    html.Push("<tr>");
    html.Push("<td class = 'title'>Name:</div>");
    html.Push("<td class = 'value'>"+ name +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td class = 'title'>Email Address:</div>");
    html.Push("<td class = 'value'>"+ email +"</td>");
    html.Push("</tr>");

    if (phone.trim().length > 0) {
        html.Push("<tr>");
        html.Push("<td class = 'title'>Phone No:</div>");
        html.Push("<td class = 'value'>"+ phone +"</td>");
        html.Push("</tr>");
    }

    html.Push("<tr>");
    html.Push("<td class = 'title'>Subject:</div>");
    html.Push("<td class = 'value'>"+ subject +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td class = 'title'>Detail Info:</div>");
    html.Push("<td class = 'value'>"+ detail +"</td>");
    html.Push("</tr>");

    html.Push("<tr>");
    html.Push("<td colspan='2'><div align = 'center'>");
    html.Push("<button id='btnSend' class='btn btn-primary' style='width: 65px;'>Send</button>");
    html.Push("<button id='btnReturn' class='btn btn-inverse' style='width: 65px; height: 27px; margin-left: 5px;'>Return</button>");
    html.Push("</div></td></tr>");

    html.Push("</table>");
    $('.form-actions').append(html.join(''));
    $('#btnReturn').click(function(e) {
        // HERE I WANT TO KNOW HOW TO DO.....
    });
    $('#btnSend').click(function(e) {
        alert("Doom");
    });}
52
Cataclysm

يمكنك استخدام آليات التخزين المحلية المختلفة لتخزين هذه البيانات في المستعرض مثل Web Storage و IndexedDB و WebSQL (مهملة) و File API (مهملة ومتاحة فقط في Chrome) (و UserData with IE).

أبسط وأكثرها دعمًا هو WebStorage حيث لديك مساحة تخزين ثابتة (localStorage) أو قائمة على الجلسة (sessionStorage) والتي هي في الذاكرة حتى تغلق المتصفح. كلاهما يشتركان في نفس واجهة برمجة التطبيقات.

يمكنك على سبيل المثال (المبسطة) القيام بشيء من هذا القبيل عندما تكون الصفحة على وشك إعادة التحميل:

window.onbeforeunload = function() {
    localStorage.setItem("name", $('#inputName').val());
    localStorage.setItem("email", $('#inputEmail').val());
    localStorage.setItem("phone", $('#inputPhone').val());
    localStorage.setItem("subject", $('#inputSubject').val());
    localStorage.setItem("detail", $('#inputDetail').val());
    // ...
}

تخزين الويب يعمل بشكل متزامن حتى هذا قد يعمل هنا. اختياريا ، يمكنك تخزين البيانات لكل حدث طمس على العناصر التي يتم إدخال البيانات بها.

عند تحميل الصفحة ، يمكنك التحقق من:

window.onload = function() {

    var name = localStorage.getItem("name");
    if (name !== null) $('#inputName').val("name");

    // ...
}

getItem بإرجاع null إذا كانت البيانات غير موجودة.

استخدم sessionStorage بدلاً من localStorage إذا كنت تريد تخزين مؤقت فقط.

52
user1693593

لقد قمت بتعديل رمز K3N للعمل من أجل غرضي ، وأضفت بعض التعليقات لمساعدة الآخرين على معرفة كيفية عمل sessionStorage.

<script>
    // Run on page load
    window.onload = function() {

        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('name') == "name") {
            return;
        }

        // If values are not blank, restore them to the fields
        var name = sessionStorage.getItem('name');
        if (name !== null) $('#inputName').val(name);

        var email = sessionStorage.getItem('email');
        if (email !== null) $('#inputEmail').val(email);

        var subject= sessionStorage.getItem('subject');
        if (subject!== null) $('#inputSubject').val(subject);

        var message= sessionStorage.getItem('message');
        if (message!== null) $('#inputMessage').val(message);
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("name", $('#inputName').val());
        sessionStorage.setItem("email", $('#inputEmail').val());
        sessionStorage.setItem("subject", $('#inputSubject').val());
        sessionStorage.setItem("message", $('#inputMessage').val());
    }
</script>
20
Doug Wilhelm

تجد هذا على جيثب. أنشئت خصيصا لذلك.

https://Gist.github.com/zaus/4717416

7
Rajan Rawal

كانت هذه الإجابة مفيدة للغاية بالنسبة لي ، وتقي عليك التنقل في كل حقل يدويًا:

استخدام jQuery لتخزين حالة النموذج المعقد

6
Julian K
window.location.reload() // without passing true as argument

يعمل لدي.

4
Naveen Agarwal

أتفق مع HTML5 التخزين المحلي. هذا مثال على الكود

3
dikkini

كما ذكر بعض الإجابات ، localStorage هو خيار جيد ويمكنك بالتأكيد القيام به بنفسك ، ولكن إذا كنت تبحث عن خيار مصقول ، فهناك بالفعل مشروع على GitHub يقوم بهذا garlic.js .

3
nickytonline

عادةً ما أرسل النموذج الخاص بي تلقائيًا إلى الخادم وأعد تحميل الصفحة باستخدام الوسائط المملوءة. استبدل وسيطات العنصر النائب بالمعاملات التي تلقاها الخادم.

3
moutonjr

يجب عليك إرسال البيانات وإعادة تحميل الصفحة (نموذج التقديم من جانب الخادم مع البيانات) ، لن يؤدي مجرد إعادة التحميل إلى الحفاظ على البيانات. إنه فقط متصفحك قد يكون في ذاكرة التخزين المؤقت لبيانات النماذج عند التحديث اليدوي (وليس نفسه عبر المتصفحات).

2
Dileep

يمكنك استخدام localStorage ( http://www.w3schools.com/html/html5_webstorage.asp ) لحفظ القيم قبل تحديث الصفحة.

2
paka

يمكنك استخدام مكتبة كتبت ، FormPersistence.js والتي تعالج تسلسل النموذج (de) عن طريق حفظ القيم في التخزين المحلي/تخزين الجلسة. يشبه هذا النهج المرتبط في إجابة أخرى لكنه لا يتطلب jQuery ولا يحفظ كلمات مرور النص العادي في تخزين الويب.

let myForm = document.getElementById('my-form')
FormPersistence.persist(myForm, true)

تحدد المعلمة الثانية الاختيارية لكل دالة FormPersistence ما إذا كنت تريد استخدام التخزين المحلي (false) أو تخزين الجلسة (true). في حالتك ، من المحتمل أن يكون تخزين الجلسة أكثر ملاءمة.

سيتم مسح بيانات النموذج بشكل افتراضي من التخزين عند الإرسال ، إلا إذا مررت false كمعلمة ثالثة. إذا كان لديك وظائف خاصة للتعامل مع القيم (مثل إدراج عنصر) ، فيمكنك اجتياز تلك المعلمة الرابعة. انظر مستودع للحصول على وثائق كاملة.

1
FThompson

تسجيل مستمع حدث لحدث keyup:

document.getElementById("input").addEventListener("keyup", function(e){
  var someVarName = input.value;
  sessionStorage.setItem("someVarKey", someVarName);
  input.value = sessionStorage.getItem("someVarKey");
});
0
Himanshu Agrawal