jQuery를 사용하여 양식 필드 지우기

양식의 모든 입력 및 텍스트 필드를 지우고 싶습니다. reset클래스 와 함께 입력 버튼을 사용할 때 다음과 같이 작동합니다 .

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

그러면 양식의 필드뿐만 아니라 페이지의 모든 필드가 지워집니다. 실제 재설정 버튼이 존재하는 형태에 대해서만 선택기가 어떻게 표시됩니까?

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

jQuery 1.6 이상 :

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

jQuery <1.6의 경우 :

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

이 게시물을 참조하십시오 : jQuery로 다단계 양식 재설정

또는

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

jQuery가 제안한 것처럼 :

검색과 같은 같은 변경 DOM의 속성 checked, selected또는 disabled사용, 폼 요소의 상태 .prop () 방법.

이것을 사용해서는 안되는 이유는 무엇입니까?

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

양식 입력 필드에 비어 있지 않은 기본값이있는 경우에는 처리되지 않습니다.

작동해야 할 것

$('yourdiv').find('form')[0].reset();

선택기를 사용하여 값을 비워두면 양식이 재설정되지 않고 모든 필드가 비워집니다. 재설정은 서버 측에서 양식을로드 한 후 사용자의 편집 작업 이전과 마찬가지로 양식을 작성하는 것입니다. 이름이 "username"인 입력이 있고 해당 사용자 이름이 서버 측에서 미리 채워져 있으면이 페이지의 대부분의 솔루션은 입력에서 해당 값을 삭제하고 사용자가 변경하기 전의 값으로 재설정하지 않습니다. 양식을 재설정해야하는 경우 다음을 사용하십시오.

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

양식을 재설정 할 필요는 없지만 모든 입력을 빈 값과 같은 일부 값으로 채우면 다른 주석에서 대부분의 솔루션을 사용할 수 있습니다.

단순하지만 매력처럼 작동합니다.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

누군가이 스레드를 여전히 읽고 있다면 jQuery가 아닌 일반 JavaScript를 사용하는 가장 간단한 솔루션입니다. 입력 필드가 양식 안에 있으면 간단한 JavaScript 재설정 명령이 있습니다.

document.getElementById("myform").reset();

여기에 대한 자세한 내용 : http://www.w3schools.com/jsref/met_form_reset.asp

건배!

$('form[name="myform"]')[0].reset();

왜 JavaScript로해야합니까?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

먼저 시도했지만 기본값으로 필드를 지우지 않습니다.

jQuery를 사용하여 수행하는 방법은 다음과 같습니다.

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

유형에 관계없이 모든 입력 상자를 비우려면 1 분 정도 걸립니다.

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

양식을 재설정하는 가장 쉬운 트릭이 있습니다.

jQuery("#review-form")[0].reset();

또는

$("#review-form").get().reset();

Javascript를 사용하면이 구문으로 간단하게 수행 할 수 있습니다 getElementById("your-form-id").reset();

이 방법으로 reset 함수를 호출하여 jquery를 사용할 수도 있습니다 $('#your-form-id')[0].reset();

잊지 마세요 [0]. 다음과 같은 경우 다음과 같은 오류가 발생합니다

TypeError : $ (...). reset은 함수가 아닙니다

JQuery는 또한 사용할 수있는 이벤트를 제공합니다

$ ( '# form_id'). trigger ( "reset");

시도하고 작동합니다.

참고 : 이러한 방법은 페이지로드시 서버에서 설정 한 초기 값으로 만 양식을 재설정합니다. 이는 임의 변경을 수행하기 전에 입력 값 'set value'에 입력이 설정된 경우 reset 메소드가 호출 된 후 필드가 동일한 값으로 재설정됨을 의미합니다.

그것이 도움이되기를 바랍니다.

$('#editPOIForm').each(function(){ 
    this.reset();
});

양식 editPOIForm의 id속성은 어디에 있습니까 ?

왜 사용하지 document.getElementById("myId").reset();않습니까? 이것은 간단하고 예쁘다

테스트 및 검증 된 코드 :

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

자바 스크립트가 포함되어 $(document).ready있어야하며 논리와 함께 있어야합니다.

가장 쉽고 최상의 솔루션은
$("#form")[0].reset();

여기서 사용하지 마십시오-
$(this)[0].reset();

평균 시간 드롭 다운 상자에서 필드를 지우고 accountType을 제외한 경우 '전체'로 재설정됩니다. 나머지 필드는 빈 즉 텍스트 상자로 재설정해야합니다.이 방법은 지우기에 사용됩니다. 우리의 요구 사항으로 특정 필드.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

나는 이것을 사용한다 :

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

그리고 여기 내 버튼이 있습니다 :

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

jQuery로 일반 재설정 기능을 호출하려는 경우이 코드를 사용하십시오.

setTimeout("reset_form()",2000);

그리고 문서 준비 에이 기능을 사이트 jQuery 작성

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

여러분 중 일부는 라디오 등이 기본 "체크 된"상태를 지운다 고 불평하고 있습니다. : radio, : checkbox 선택기를 .not에 추가하면 문제가 해결됩니다.

다른 재설정 기능을 모두 사용할 수 없으면이 기능이 작동합니다.

• ngen의 답변에서 적응

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID 양식의 식별

2. OnSuccess작업의 이름은 " ClearInput"

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. 이 두 가지를 모두 수행하면 작동을 멈출 수 없습니다 ...

다음 코드는 모든 양식을 지우고 필드는 비어 있습니다. 페이지에 둘 이상의 양식이있는 경우 특정 양식 만 지우려면 양식의 ID 또는 클래스를 언급하십시오.

$("body").find('form').find('input,  textarea').val('');

accountType을 제외한 모든 필드를 지우려면 다음을 사용하십시오.

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

여기와 관련 SO 질문에 표시된 코드는 불완전한 것으로 보입니다.

양식을 재설정한다는 것은 HTML에서 원래 값을 설정하는 것을 의미하므로 위의 코드를 기반으로하고있는 작은 프로젝트를 위해 이것을 결합했습니다.

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

누락 된 것이 있거나 개선 될 수있는 경우 알려주십시오.

위의 어느 것도 페이지가 IHttpHandler 요청 처리 (captcha)를 포함하는 웹 사용자 정의 컨트롤에 대한 호출을 포함하는 간단한 경우에는 작동하지 않습니다. 이미지 처리를 위해 requsrt를 보낸 후 아래 코드는 양식의 필드를 지우지 않습니다 (HttpHandler 요청을 보내기 전에) 모든 것이 올바르게 작동합니다.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

범용 jQuery 플러그인을 작성했습니다.

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

다음과 같이 숨겨진 리셋 버튼을 추가하십시오

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

$ ( 'form'). submit (function () {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});