jQuery로 다단계 양식 재설정

표준 리셋 버튼이 코딩 된 양식이 있습니다.

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

문제는, 상기 형태는 다단계 정렬이며, 사용자가 단계를 채우고 나중에 리턴하면, 지우기 단추를 클릭 할 때 다양한 필드에 대한 '기억 된'값이 재설정되지 않는다는 것입니다.

jQuery 함수를 연결하여 모든 필드를 반복하고 '수동'으로 지우면 트릭을 수행 할 것이라고 생각합니다. 이미 양식 내에서 jQuery를 사용하고 있지만 속도를 높이기 때문에 각 필드를 ID별로 개별적으로 참조하는 것 외에는이 방법을 잘 모릅니다. 매우 효율적이지 않습니다.

도움이 필요한 경우 TIA.

2012 년 3 월에 업데이트되었습니다.

그래서 원래이 질문에 답한 지 2 년이 지나서야 그것이 큰 혼란으로 바뀌 었다는 것을 알게되었습니다. 나는 그것이 되돌아온 시간에 관한 것이라고 생각하며, 가장 많이지지되고 받아 들여 졌기 때문에 대답을 진정으로 정확하게 만듭니다.

레코드의 경우 원래 포스터가 요청한 것이 아니기 때문에 Titi의 답변이 잘못되었습니다. native reset () 메소드를 사용하여 양식을 재설정 할 수는 있지만이 질문은 기억 된 양식을 지우려고합니다. 이 방법으로 재설정하면 양식에 남아있는 값입니다. 이것이 "수동"리셋이 필요한 이유입니다. 나는 대부분의 사람들이 Google 검색 에서이 질문에 도달했다고 생각하고 실제로 reset () 메소드를 찾고 있지만 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

은 Using :text, :radio그들이으로 평가 결국 스스로에 의해 등 선택기하는 jQuery를하여 나쁜 사례로 간주되고 *:text는 더 이상은해야보다 오래 걸릴 수있다. 화이트리스트 방식을 선호하며 원래 답변에이 방식을 사용했으면합니다. 어쨌든 input선택기 의 일부와 양식 요소의 캐시를 지정하면 여기에서 최상의 성능을 발휘할 수 있습니다.

select 요소에 대한 사람들의 기본값이 빈 값을 갖는 옵션이 아닌 경우이 답변에는 여전히 약간의 결함이있을 수 있지만 얻을 수있는만큼 일반적이며 이것이 사례별로 처리되어야합니다 .

에서 http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

다음 myinput.val('')과 같이 입력하면 "재설정"을 100 % 에뮬레이션하지 않을 수 있습니다.

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

예를 들어 myinput.val('')기본값이 50 인 입력을 호출 하면 빈 문자열로 설정되고 호출 myform.reset()하면 초기 값 인 50으로 재설정됩니다.

Paolo의 대답에는 큰 문제가 있습니다. 치다:

$(':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 플러그인을 만들었습니다.

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();

양식을 지우는 것은 약간 까다 롭고 간단하지 않습니다.

jQuery 양식 플러그인 을 사용하고 clearForm 또는 resetForm 기능 을 사용하도록 제안하십시오 . 대부분의 코너 케이스를 처리합니다.

document.getElementById ( 'frm'). reset ()

나는 보통 :

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

또는

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

여기 당신을 시작할 수있는 것이 있습니다

$('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선택기 에 대해 알지 못했고 단순히 checked 속성을 제거하는 것에 대해 생각하지 않았기 때문에 대답이 더 중요 합니다.

유효성 검사 플러그인 사용을 고려하십시오 -훌륭합니다! 그리고 양식을 재설정하는 것은 간단합니다.

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

나는 이것이 잘 작동한다는 것을 알았다.

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

기본적으로 제공된 솔루션 중 어느 것도 나를 행복하게 하지 않습니다 . 소수의 사람들이 지적했듯이 양식을 재설정하는 대신 양식을 비 웁니다.

그러나 도움이되는 몇 가지 자바 스크립트 속성이 있습니다.

• 텍스트 필드의 기본값
• 확인란 및 라디오 버튼을 확인합니다.
• 선택 옵션에 대해 defaultSelected

여기에는 페이지가로드 될 때 필드에 있던 값이 저장됩니다.

JQuery와 플러그인을 작성하는 것은 이제 간단하다 : (참을성을 위해 ... 여기 데모 http://jsfiddle.net/kritzikratzi/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/kritzikratzi/N8fEF/1/

jQuery없이 실제로 해결하는 것이 더 쉽다는 것을 알 수 있습니다.

일반적인 JavaScript에서는 다음과 같이 간단합니다.

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

jQuery를 사용하여 코딩을 향상시키고 속도를 높이는 동안 항상 더 빠르지 않다는 것을 항상 기억하려고합니다. 이 경우 다른 방법을 사용하는 것이 좋습니다.

Francis Lewis의 멋진 솔루션을 약간 변형했습니다 . 그의 솔루션이하지 않는 것은 드롭 다운 선택을 비워 두는 것입니다. (대부분의 사람들이 "지우기"를 원할 때 아마도 모든 값을 비워두고 싶을 것입니다 .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;
};

일반적으로 폼에 숨겨진 재설정 단추를 추가합니다. 필요할 때만 : $ ( '# reset'). click ();

$(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");

확인란, 라디오 버튼, 텍스트 상자 등이 재설정됩니다. 기본적으로 양식이 기본 상태로 바뀝니다. 선택기 #ID, Class, element안에 간단히 넣으십시오 jQuery.

이것은 나를 위해 일했습니다. 파이로 텍스 응답은 선택 필드를 재설정하고 그의 필드를 가져갔습니다.

// 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);

Paolo Bergantino 솔루션을 사용하지만 훌륭하지만 약간의 조정이 필요합니다 ... 특히 양식 이름 대신 ID로 작업하십시오.

예를 들면 다음과 같습니다.

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>

보시다시피, 이것은 모든 형태로 작동하며 CSS 스타일을 사용하여 버튼을 만들므로 클릭하면 페이지가 새로 고쳐지지 않습니다. 다시 한번 감사드립니다. 유일한 문제는 양식에 기본값이있는 경우입니다.

나는 아래 솔루션을 사용했고 그것은 나를 위해 일했다 (전통적인 자바 스크립트와 jQuery를 혼합)

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

나는 PHP의 중급자이며 JQuery와 같은 새로운 언어로 뛰어 들기에는 약간 게으르지 만 다음은 간단하고 우아한 해결책이 아닌가?

<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-->

도움이 되었기를 바랍니다! ㅏ.

<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');

나는 같은 문제를 겪고 있었고 Paolo의 게시물이 도움이되었지만 한 가지를 조정해야했습니다. id advancedindexsearch가있는 양식에는 입력 필드 만 포함되어 있고 세션에서 값을 가져옵니다. 어떤 이유로 든 다음이 저에게 효과가 없었습니다.

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

이 후에 경고를 표시하면 값이 올바르게 제거되었지만 나중에 다시 대체되는 위치를 보았습니다. 나는 여전히 어떻게 또는 왜 모르겠지만 다음 줄이 나를 위해 속임수를 썼다.

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

Paolo의 답변은 날짜 선택자를 설명하지 않습니다.

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

Paolo 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);