إعادة تعيين نموذج متعدد المراحل باستخدام jQuery

StackOverflow https://stackoverflow.com/questions/680241

  •  22-08-2019
  •  | 
  •  

سؤال

لدي نموذج به زر إعادة تعيين قياسي مشفر على النحو التالي:

<input type="reset" class="button standard" value="Clear" />

المشكلة هي أن النموذج المذكور من النوع متعدد المراحل، لذلك إذا قام المستخدم بملء مرحلة ثم عاد لاحقًا، فلن يتم إعادة تعيين القيم "المتذكرة" للحقول المختلفة عند النقر فوق الزر "مسح".

أعتقد أن إرفاق وظيفة jQuery للتكرار فوق جميع الحقول ومسحها "يدويًا" من شأنه أن يفي بالغرض.أنا أستخدم jQuery بالفعل داخل النموذج، ولكني بدأت للتو في الوصول إلى السرعة ولذلك لست متأكدًا من كيفية القيام بذلك، بخلاف الإشارة إلى كل حقل على حدة حسب المعرف، وهو ما لا يبدو فعالاً للغاية.

تيا للحصول على أي مساعدة.

هل كانت مفيدة؟

المحلول

تم التحديث في مارس 2012.

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

للعلم، إجابة تيتي خاطئة لأنها ليست ما طلبه الملصق الأصلي - من الصحيح أنه من الممكن إعادة تعيين نموذج باستخدام طريقة إعادة التعيين الأصلية، ولكن هذا السؤال يحاول مسح نموذج من التذكر القيم التي ستبقى في النموذج إذا قمت بإعادة تعيينها بهذه الطريقة.ولهذا السبب هناك حاجة إلى إعادة التعيين "اليدوي".أفترض أن معظم الأشخاص انتهى بهم الأمر إلى هذا السؤال من خلال بحث Google ويبحثون حقًا عن طريقة إعادة الضبط ()، ولكنها لا تعمل مع الحالة المحددة التي يتحدث عنها OP.

لي إبداعي الجواب كان هذا:

// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');

والذي قد ينجح في الكثير من الحالات، بما في ذلك OP، ولكن كما هو موضح في التعليقات وفي الإجابات الأخرى، سيؤدي إلى مسح عناصر الاختيار/مربع الاختيار من أي سمات قيمة.

أكثر صحيح الإجابة (ولكنها ليست مثالية) هي:

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

باستخدام :text, :radio, ، إلخ.تعتبر المحددات في حد ذاتها ممارسة سيئة بواسطة jQuery حيث ينتهي بهم الأمر بالتقييم *:text مما يجعلها تستغرق وقتًا أطول بكثير مما ينبغي.أفضّل أسلوب القائمة البيضاء وأتمنى لو استخدمته في إجابتي الأصلية.على أية حال، من خلال تحديد input جزء من المحدد، بالإضافة إلى ذاكرة التخزين المؤقت لعنصر النموذج، وهذا من شأنه أن يجعلها الإجابة الأفضل أداءً هنا.

قد لا تزال هذه الإجابة تحتوي على بعض العيوب إذا لم يكن الخيار الافتراضي للأشخاص لعناصر التحديد خيارًا يحتوي على قيمة فارغة، ولكنه بالتأكيد عام بقدر ما سيحصل عليه وسيحتاج إلى التعامل مع هذا على أساس كل حالة على حدة .

نصائح أخرى

http://groups.google.com/group/jquery-dev / جي اس / 2e0b7435a864beea : 

$('#myform')[0].reset();

وإعداد myinput.val('') قد لا تحاكي "إعادة تعيين" 100٪ إذا كان لديك مدخلا مثل هذا: 

<input name="percent" value="50"/>

وعلى سبيل المثال تدعو myinput.val('') على الإدخال مع قيمة افتراضية من 50 سوف تعيينها إلى سلسلة فارغة، في حين يدعو myform.reset() أن إعادة تعيينها إلى قيمتها الأصلية 50.

هناك مشكلة كبيرة في إجابة باولو المقبولة.يعتبر:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

ال .val('') سيقوم الخط أيضًا بمسح أي valueتم تعيينه لمربعات الاختيار وأزرار الاختيار.لذلك إذا (مثلي) تفعل شيئًا مثل هذا:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

سيؤدي استخدام الإجابة المقبولة إلى تحويل مدخلاتك إلى:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

عفوًا - كنت أستخدم هذه القيمة!

إليك نسخة معدلة ستحتفظ بقيم مربع الاختيار والاختيار الخاصة بك:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

مسج البرنامج المساعد

لقد قمت بإنشاء مكون إضافي لـ jQuery حتى أتمكن من استخدامه بسهولة في أي مكان أحتاج إليه:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
};

والآن يمكنني استخدامه عن طريق الاتصال:

$('#my-form').clear();

وأشكال المقاصة هو صعب قليلا ويست بسيطة كما يبدو.

وأقترح عليك استخدام مسج شكل المساعد و استخدام لها <لأ href = "HTTP: // malsup.com/jquery/form/#code-samples "يختلط =" noreferrer "> <م> clearForm أو <م> resetForm وظائف . وتحرص معظم الحالات الزاوية.

وdocument.getElementById ( 'والعلاجات). إعادة تعيين ()

وأنا عادة ما تفعل: 

$('#formDiv form').get(0).reset()

أو 

$('#formId').get(0).reset()

وحاول استخدام التحقق من صحة البرنامج المساعد - انه لشيء رائع! والإعادة شكل بسيط: 

var validator = $("#myform").validate();
validator.resetForm();

إليك شيء لتبدأ به

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

بالطبع، إذا كان لديك مربعات اختيار/أزرار اختيار، فستحتاج إلى تعديل هذا لتضمينها أيضًا وتعيينها .attr({'checked': false});

يحرر الجواب باولو هو أكثر إيجازا.إجابتي أكثر كلامًا لأنني لم أكن أعرف شيئًا عن ذلك :input المحدد، ولم أفكر في مجرد إزالة السمة المحددة.

وأجد أن هذا يعمل بشكل جيد. 

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

أساسًا لا أحد من الحلول المقدمة يجعلني سعيدا.كما أشار عدد قليل من الأشخاص، يقومون بإفراغ النموذج بدلاً من إعادة تعيينه.

ومع ذلك، هناك بعض خصائص جافا سكريبت التي تساعد:

  • القيمة الافتراضية لحقول النص
  • تم التحقق من وجود مربعات الاختيار وأزرار الاختيار الافتراضية
  • defaultSelected لتحديد الخيارات

تقوم هذه بتخزين القيمة التي كان بها الحقل عند تحميل الصفحة.

أصبحت كتابة مكون إضافي لـ jQuery أمرًا تافهًا الآن:(لغير الصبر...وهنا العرض http://jsfiddle.net/kritzkratzi/N8fEF/1/)

رمز البرنامج المساعد

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

الاستخدام

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset();

بعض الملاحظات ...

  • لم ألقي نظرة على عناصر نموذج html5 الجديدة، قد يحتاج بعضها إلى معاملة خاصة ولكن يجب أن تعمل نفس الفكرة.
  • العناصر تحتاج إلى الرجوع إليها مباشرة.أي. $( "#container" ).resetValue() لن ينجح.دائما يستخدم $( "#container :input" ) بدلاً من.
  • كما ذكر أعلاه، هنا هو العرض التوضيحي: http://jsfiddle.net/kritzkratzi/N8fEF/1/

وقد تجد أن هذا هو في الواقع أسهل حلها بدون مسج.

في جافا سكريبت منتظم، وهذا هو بسيط مثل: 

document.getElementById('frmitem').reset();

وأنا أحاول أن نتذكر دائما أنه في حين نستخدم مسج لتعزيز وتسريع الترميز لدينا، وأحيانا ليست في الواقع أسرع. في هذه الحالات، فإنه غالبا ما يكون من الأفضل استخدام طريقة أخرى.

ولقد تقدمت اختلاف طفيف من فرانسيس لويس "لطيفة حل . ما تم تعيين القائمة المنسدلة حل له لا تفعل يختار إلى فارغة. (اعتقد انه عندما يريد معظم الناس على "واضح"، وأنها تريد على الارجح الى جعل كل القيم فارغة.) هذا واحد يفعل ذلك مع .find('select').prop("selectedIndex", -1). 

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

وأنا عادة إضافة زر إعادة الضبط مخفي إلى النموذج. عند الحاجة فقط:     $ ( '# إعادة تعيين') انقر ()؛

وتعديل الجواب الأكثر صوتت لوضع $(document).ready(): 

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

وببساطة استخدام jQuery Trigger event مثل ذلك: 

$('form').trigger("reset");

وهذا سيتم إعادة تعيين خانات، radiobuttons، مربعات النص، الخ ... في الأساس يتحول النموذج الخاص بك لانها دولة الافتراضية. ببساطة وضع #ID, Class, element داخل محدد jQuery.

وهذا العمل بالنسبة لي، pyrotex الجواب ديدن 'إعادة تحديد الحقول، أخذت له، وهنا بلدي تحرير: 

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);

وأنا باستخدام حل باولو Bergantino وهو أمر عظيم ولكن مع قليل من القرص ... خصيصا للعمل مع اسم النموذج بدلا من ذلك معرف.

وعلى سبيل المثال: 

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

والآن عندما أريد أن استخدامه ليستطيع أن يفعل 

<span class="button" onclick="jqResetForm('formName')">Reset</span>

وكما ترون، هذا العمل مع أي شكل، ولأن أنا باستخدام أسلوب المغلق لإنشاء زر سوف يتم تحديث الصفحة عند النقر عليها. مرة أخرى بفضل باولو لالإدخال. والمشكلة الوحيدة هي إذا كان لدي القيم الافتراضية في النموذج.

ولقد استخدمت حل أدناه، وأنها عملت لي (خلط جافا سكريبت التقليدي مع مسج) 

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

وأنا مجرد وسيطة في PHP، وقليلا كسول ليغوص في لغة جديدة مثل مسج، ولكن ليس هو الحل البسيط والأنيق التالية؟ 

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

لا يمكن أن نرى سببا لماذا لا يكون اثنين يقدم أزرار، فقط مع أغراض مختلفة. ثم ببساطة: 

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

وكنت للتو إعادة تعريف القيم الخاصة بك مرة أخرى إلى ما يفترض أن يكون الافتراضي.

وكان هناك طريقة اعتدت على شكل واسع إلى حد ما (50+ الحقول) إلى مجرد تحميل النموذج مع AJAX، مما يجعل أساسا مكالمة مرة أخرى إلى الخادم والذي عاد للتو الحقول مع القيم الافتراضية. هذا جعل من الاسهل بكثير من محاولة للاستيلاء على كل حقل مع JS ومن ثم وضع لانها قيمة الافتراضية. كما سمح لي للحفاظ على القيم الافتراضية في مكان واحد - رمز الخادم. على هذا الموقع، كانت هناك أيضا بعض الافتراضات مختلفة تبعا لإعدادات الحساب، وبالتالي لم يكن لديك ما يدعو للقلق حول إرسال هذه إلى JS. قضية صغيرة الوحيدة التي أتيحت لي للتعامل مع بعضهم اقترح المجالات التي تتطلب التهيئة بعد استدعاء AJAX، ولكن ليس صفقة كبيرة.

وجميع هذه الإجابات هي جيدة ولكن أسهل طريقة المطلقة للقيام بذلك هو مع إعادة تعيين وهمية، وهذا هو استخدام وصلة وزر إعادة الضبط.

وأضيف بعض CSS لإخفاء زر إعادة الضبط الخاص بك الحقيقي. 

input[type=reset] { visibility:hidden; height:0; padding:0;}

وبعد ذلك على الرابط إضافة النحو التالي 

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

وآمل أن يساعد هذا! A. 

<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

وهنا مع التحديث للخانات ويختار: 

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

وكنت أعاني من نفس المشكلة ومنصب باولو ساعدتني، ولكن أنا في حاجة إلى ضبط شيئا واحدا. بلدي النموذج مع advancedindexsearch معرف يتضمن فقط حقول الإدخال ويحصل على القيم من الدورة. لسبب ما يلي لم تنجح بالنسبة لي: 

$("#advancedindexsearch").find("input:text").val("");

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

$("#advancedindexsearch").find("input:text").attr("value","");

والجواب باولو لا يأخذ في الحسبان جامعي حتى الآن، إضافة هذا في: 

$form.find('input[type="date"]').val('');

ولقد تقدمت تحسن طفيف على الجواب باولو Bergantino الأصلية 

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

في هذه الطريقة، وأنا يمكن أن تمر أي عنصر السياق إلى وظيفة. وأنا قادرة على إعادة تعيين النموذج بأكمله أو فقط مجموعة معينة من المجالات، على سبيل المثال: 

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

وبالإضافة إلى ذلك، يتم الاحتفاظ القيم الافتراضية للمدخلات.

وهنا هو بلدي الحل، الذي يعمل أيضا مع HTML5 جديد المدخلات وأنواع: 

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

واستكمالا للإجابة مقبولة، إذا كنت تستخدم SELECT2 المساعد، وكنت بحاجة إلى التذكير النصي select2 لإجراء تغييرات هو كل المجالات select2: 

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top