복붙노트

[JQUERY] jQuery로 다단계 양식을 재설정

JQUERY

jQuery로 다단계 양식을 재설정

해결법

  1. 1.내가 처음이 질문에 대답 2 년 그래서, 나는 그것이 꽤 많이 큰 혼란으로 바뀌 것을보고 돌아와. 나는 다시에 와서 가장 인정 + upvoted 때문에 내 대답은 참으로 올바른 만들 시간에 대해 그것의 생각합니다.

    내가 처음이 질문에 대답 2 년 그래서, 나는 그것이 꽤 많이 큰 혼란으로 바뀌 것을보고 돌아와. 나는 다시에 와서 가장 인정 + upvoted 때문에 내 대답은 참으로 올바른 만들 시간에 대해 그것의 생각합니다.

    기본 reset () 메소드를 사용하여 폼을 리셋하는 것이 가능하다는 것을 정확하지만이 질문은 기억 떨어져 양식을 취소하려고 - 기록을 위해, 티티의 대답은 원래 포스터가 무엇을 요구 것이 아니므로 잘못 당신이 이런 식으로 다시 설정하면 값 형태로 남아있을 것이다. 는 "수동"리셋이 필요한 이유입니다. 나는 대부분의 사람들이 구글 검색에서이 질문에 결국 진정으로 리셋 () 메소드를 찾고 있습니다 가정,하지만 영업 이익에 대해 이야기하는 특정 케이스에 대한 작업을하지 않습니다.

    내 원래의 대답이 있었다 :

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

    어떤은 영업 이익을 포함하여, 많은 경우 작동 할 수 있지만, 의견과 다른 답변에서 지적 밖으로 같이 값 속성에서 라디오 / 체크 박스 요소를 삭제합니다.

    더 정확한 답 (그러나 완벽하지)입니다 :

    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

    그것은 더 이상은해야보다 오래 걸릴 수 있습니다 텍스트 : 텍스트 : 다음 사용 그들이 *로 평가 결국 스스로에 의해 등 라디오, 선택기 것은 jQuery를에 의해 나쁜 관행으로 간주됩니다. 나는 화이트리스트 방식을 선호 할 내가 내 원래의 대답을 사용했다 바랍니다. 어쨌든, 셀렉터의 입력 부분을 더한 형태 요소의 캐시를 지정하여,이는 여기에 최고 성능의 답해야한다.

    선택 요소에 대한 사람들의 기본값은 빈 값이 옵션이 아닌 경우,이 대답은 여전히 ​​몇 가지 결함이있을 수 있지만, 그것을 얻기 위하여려고하고,이 경우에 따라 처리해야하는 것처럼 그것은 일반적으로 확실히 .

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

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

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

    myinput.val를 ( '')로 설정하면이 같은 입력이있는 경우 100 % "다시"모방하지 않을 수 있습니다 :

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

    50의 디폴트 값 입력에 예를 호출 myinput.val는 ( ''), 빈 문자열로 설정합니다 myform.reset를 호출하는 반면 () (50)의 초기 값으로 재설정합니다.

  3. 3.파올로의 허용 대답에 큰 문제가 있습니다. 중히 여기다:

    파올로의 허용 대답에 큰 문제가 있습니다. 중히 여기다:

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

    .val ( '') 라인도 값의 체크 박스와 라디오 버튼에 할당을 취소합니다. 만약 당신이 이런 식으로 뭔가를 (나처럼) 그래서 :

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

  4. 4.jQuery를 플러그인

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

  5. 5.형태를 취소하면 조금 까다 롭고하지 보이는 것처럼 간단하다.

    형태를 취소하면 조금 까다 롭고하지 보이는 것처럼 간단하다.

    당신이 jQuery를 양식 플러그인을 사용하고 clearForm 또는 resetForm 기능을 사용하는 것이 좋습니다. 이 코너의 경우 대부분을 담당한다.

  6. 6.나는 보통 수행

    나는 보통 수행

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

    또는

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

  7. 7.document.getElementById를 ( 'FRM'). 리셋 ()

    document.getElementById를 ( 'FRM'). 리셋 ()

  8. 8.다음은 시작하는 일이다

    다음은 시작하는 일이다

    $('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을 포함하도록 수정해야합니다 ({ '확인'거짓});

    편집하다 파올로의 대답은 더 간결하다. 입력 선택,도 내가 대해 간단히 확인 속성을 제거 생각했다 : 나는에 대해 알고하지 않았기 때문에 내 대답은 더 장황하다.

  9. 9.검증 플러그인을 사용하여 고려 -이 좋아요! 그리고 다시 설정하라는 형식은 간단하다 :

    검증 플러그인을 사용하여 고려 -이 좋아요! 그리고 다시 설정하라는 형식은 간단하다 :

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

  10. 10.나는 이것이 잘 작동 찾을 수 있습니다.

    나는 이것이 잘 작동 찾을 수 있습니다.

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

  11. 11.제공된 솔루션을 기본적으로 아무도 나를 행복하게하지 않습니다. 몇 사람에 의해 지적 그들은 그것을 재설정 대신 양식을 비 웁니다.

    제공된 솔루션을 기본적으로 아무도 나를 행복하게하지 않습니다. 몇 사람에 의해 지적 그들은 그것을 재설정 대신 양식을 비 웁니다.

    그러나, 몇 가지 자바 스크립트의 숙소에 대한 다양한 선택지가 있습니다 도움이 밖으로 그 :

    이 스토어 페이지가로드 될 때 필드가 가지고있는 값입니다.

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

  12. 12.이 실제로 쉽게 jQuery를하지 않고 해결 될 수도 있습니다.

    이 실제로 쉽게 jQuery를하지 않고 해결 될 수도 있습니다.

    일반 자바 스크립트,이는 간단하다 :

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

    나는 항상 우리가 향상시키기 위해 jQuery를 사용하고 속도 우리의 코딩까지하면서, 때로는 실제로 빠른 아니라는 것을 기억하려고합니다. 이러한 경우에, 그것은 다른 방법을 사용하는 것이 좋습니다.

  13. 13.나는 프랜시스 루이스 '좋은 솔루션의 약간의 변화를했다. 그의 해결책은 빈에있는 드롭 다운 선택을 설정하지 않는 무엇. (대부분의 사람들이 "분명히"를 할 때 나는 그들이 아마 모든 값이 비어 만들고 싶어 생각합니다.)이 하나 ( '선택') .find 함께한다. 소품 ( "selectedIndex의", -1).

    나는 프랜시스 루이스 '좋은 솔루션의 약간의 변화를했다. 그의 해결책은 빈에있는 드롭 다운 선택을 설정하지 않는 무엇. (대부분의 사람들이 "분명히"를 할 때 나는 그들이 아마 모든 값이 비어 만들고 싶어 생각합니다.)이 하나 ( '선택') .find 함께한다. 소품 ( "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;
};

  14. 14.나는 일반적으로 폼에 숨겨진 리셋 버튼을 추가합니다. 다만 필요한 경우 : $ ( '# 리셋') ()을 클릭합니다.;

    나는 일반적으로 폼에 숨겨진 리셋 버튼을 추가합니다. 다만 필요한 경우 : $ ( '# 리셋') ()을 클릭합니다.;

  15. 15.$ (문서) .ready () 상황에 대한 대답을 가장 투표의 수정 :

    $ (문서) .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();
});

  16. 16.간단히과 같이 JQuery와 트리거 이벤트를 사용 :

    간단히과 같이 JQuery와 트리거 이벤트를 사용 :

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

    이것은 본질적으로 그것의 기본 상태로 형태를 전환 ... 등 체크 박스, 라디오 버튼, 텍스트 상자를 재설정합니다. 간단히 jQuery를 선택 내부의 #ID, 클래스, 요소를 넣어.

  17. 17.이것은 나를 위해 일한, pyrotex 응답 didn를 내 편집 '을 선택 필드를 재설정, 자신, 여기를했다'

    이것은 나를 위해 일한, pyrotex 응답 didn를 내 편집 '을 선택 필드를 재설정, 자신, 여기를했다'

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

  18. 18.나는 특히 양식 이름 대신 아이디와 작업에 ... 큰하지만 몇 개조하면 되겠 함께 파올로 Bergantino 솔루션을 사용하고 있습니다.

    나는 특히 양식 이름 대신 아이디와 작업에 ... 큰하지만 몇 개조하면 되겠 함께 파올로 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>

    보시다시피,이 모든 형태와 작업, 그리고 내가 클릭하면 페이지가 새로 고쳐지지 않습니다 버튼을 생성하기 위해 CSS 스타일을 사용하고 있기 때문이다. 다시 한번 귀하의 의견 주셔서 감사합니다 파올로. 나는 형태의 디폴트 값이있는 경우 유일한 문제이다.

  19. 19.나는 아래의 솔루션을 사용하고는 (jQuery를 전통적인 자바 스크립트를 혼합) 나를 위해 일한

    나는 아래의 솔루션을 사용하고는 (jQuery를 전통적인 자바 스크립트를 혼합) 나를 위해 일한

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

  20. 20.난 그냥 PHP의 중간 해요, 그리고이 간단하고 우아한 해결책 다음하지 JQuery와 같은 새로운 언어로 다이빙에 게으른 비트,하지만 무엇입니까?

    난 그냥 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--"; }

    당신은 그냥 기본이 있어야하는데 무엇을 당신의 가치를 재정의.

  21. 21.나는 상당히 큰 양식에 사용하는 방법 (50 개 이상의 필드) 만 기본적으로 서버를 호출 백을 그냥 기본 값으로 필드를 반환 AJAX와 양식을 다시로드하는 것이 었습니다. 만든이 JS 각 필드를 잡으려고 노력하고 그것의 기본 값으로 설정하는 것보다 훨씬 쉽다. 서버의 코드 - 그것은 또한 한 곳에서 기본값을 유지하기 위해 나에게 허용했다. 웹 사이트에 또한 계정의 설정에 따라 일부 다른 기본값이 있었다 때문에 내가 JS에 이들을 전송에 대해 걱정하지 않았다. 유일한 작은 문제 좀가 필요한 AJAX 호출 후 초기화,하지만 큰 문제가 필드를 제안했다 취급했다.

    나는 상당히 큰 양식에 사용하는 방법 (50 개 이상의 필드) 만 기본적으로 서버를 호출 백을 그냥 기본 값으로 필드를 반환 AJAX와 양식을 다시로드하는 것이 었습니다. 만든이 JS 각 필드를 잡으려고 노력하고 그것의 기본 값으로 설정하는 것보다 훨씬 쉽다. 서버의 코드 - 그것은 또한 한 곳에서 기본값을 유지하기 위해 나에게 허용했다. 웹 사이트에 또한 계정의 설정에 따라 일부 다른 기본값이 있었다 때문에 내가 JS에 이들을 전송에 대해 걱정하지 않았다. 유일한 작은 문제 좀가 필요한 AJAX 호출 후 초기화,하지만 큰 문제가 필드를 제안했다 취급했다.

  22. 22.이 모든 대답은 잘하지만 그 일의 절대 가장 쉬운 방법은 링크 및 리셋 버튼을 사용하는 가짜 리셋, 함께.

    이 모든 대답은 잘하지만 그 일의 절대 가장 쉬운 방법은 링크 및 리셋 버튼을 사용하는 가짜 리셋, 함께.

    그냥 당신의 진짜 리셋 버튼을 숨길 일부 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-->

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

  23. 23.

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

  24. 24.여기에 체크 박스와 선택의 새로 고침을 가진 :

    여기에 체크 박스와 선택의 새로 고침을 가진 :

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

  25. 25.저도 같은 문제와 파올로의 게시물이 나를 도와 가지고 있었다, 그러나 나는 한 가지를 조정할 필요가 있었다. 아이디 advancedindexsearch 나의 양식은 입력 필드를 포함하고 세션에서 값을 가져옵니다. 몇 가지 이유를 들어 다음과 같은 나를 위해 작동하지 않았다 :

    저도 같은 문제와 파올로의 게시물이 나를 도와 가지고 있었다, 그러나 나는 한 가지를 조정할 필요가 있었다. 아이디 advancedindexsearch 나의 양식은 입력 필드를 포함하고 세션에서 값을 가져옵니다. 몇 가지 이유를 들어 다음과 같은 나를 위해 작동하지 않았다 :

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

    나는이 후 경고를 넣어 경우에, 나는 제대로 제거 값을 보았다하지만 나중에 그들은 어디에서 다시 교체했다. 어떻게 또는 왜 나는 아직도 모르지만 다음 줄 나를 위해 트릭을했다 :

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

  26. 26.파올로의 대답은 이것에 추가, 날짜 선택기를 고려하지 않습니다

    파올로의 대답은 이것에 추가, 날짜 선택기를 고려하지 않습니다

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

  27. 27.내가 파올로 Bergantino의 원래의 대답에 약간의 개선을 만든

    내가 파올로 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

    또한, 입력의 기본값이 유지됩니다.

  28. 28.여기 또한 새로운 HTML5의 입력 유형과 작동 내 솔루션입니다 :

    여기 또한 새로운 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;
        }
    });
}

  29. 29.당신이 선택 2 플러그인을 사용하는 경우 허용 대답을 보완, 당신은 변화의 모든 선택 2 필드입니다 수 있도록 선택 2 스크립트를 기억해야합니다

    당신이 선택 2 플러그인을 사용하는 경우 허용 대답을 보완, 당신은 변화의 모든 선택 2 필드입니다 수 있도록 선택 2 스크립트를 기억해야합니다

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

  30. 30.

    $(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);

    31. from https://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 현지 날짜 시간에 UTC 날짜 시간 변환  (0) 2020.09.25
[JQUERY] 자바 스크립트로 이미지의 실제 폭과 높이를 가져 오기? (사파리 / 크롬)  (0) 2020.09.25
[JQUERY] 데이터 속성으로 요소 선택  (0) 2020.09.25
[JQUERY] 파일이 jQuery를 또는 순수 자바 스크립트에 있는지 어떻게 확인합니까?  (0) 2020.09.25
[JQUERY] jQuery를 어떻게 데이터 - 속성 값을 기반으로 요소를 찾는 방법은?  (0) 2020.09.25
,

티스토리툴바