.reset () 메소드와 함께 jQuery를 사용하여 양식을 재설정하는 방법

재설정 버튼을 클릭하면 양식을 재설정 할 수있는 작업 코드가 있습니다. 그러나 코드가 길어지면 더 이상 작동하지 않는다는 것을 알고 있습니다.

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

그리고 내 jQuery :

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

.reset()메소드가 작동 하기 위해 코드에 포함시켜야 할 소스가 있습니까? 이전에는 다음을 사용하고있었습니다.

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

그 .reset()방법은 효과가있었습니다.

현재 사용하고 있습니다

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

아마도 그 이유 중 하나 일 수 있습니까?

당신은 trigger () 참조 링크를 사용해 볼 수 있습니다

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

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

JS 바이올린에 넣으십시오. 의도 한대로 작동했습니다.

따라서 위에서 언급 한 문제 중 어느 것도 잘못이 아닙니다. 충돌하는 ID 문제가 있습니까? 클릭이 실제로 실행되고 있습니까?

편집 : (적절한 주석 처리 능력이없는 슬픈 자루이기 때문에) 코드와 직접 관련이 없습니다. 현재 사용중인 페이지의 컨텍스트에서 가져 오면 정상적으로 작동하므로 특정 jQuery / javascript 및 기여 양식 데이터가있는 것이 아니라 다른 것이어야합니다. 나는 주위에서 코드를 bisecing 시작하고 어디에서 진행되고 있는지 찾아보십시오. 내 말은, '확실히'하기 위해서, 당신이 할 수 있다고 생각합니다 ...

console.log($('#configform')[0]);

클릭 기능에서 올바른 형식을 타겟팅하는지 확인하십시오.

그리고 그것이 있다면, 여기에 나열되지 않은 것이어야합니다.

2 부 편집 : 시도 할 수있는 한 가지 (올바르게 타겟팅하지 않는 경우) 사용하는 대신 "input : reset"을 사용하는 것입니다. 실제 클릭이 타겟팅하는 대상 방화범 / 개발자 도구를 열어보세요.

console.log($('#configreset'))

무엇이 팝업되는지 확인하십시오. 우리는 거기서 갈 수 있습니다.

이 게시물에 따르면 여기에 , jQuery를 더없는 reset()방법; 그러나 기본 JavaScript는 않습니다. 따라서 다음을 사용하여 jQuery 요소를 JavaScript 객체로 변환하십시오.

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

이것은 실제로 jQuery보다 바닐라 자바 ​​스크립트에서 더 쉬운 것들 중 하나입니다. jQuery에는 reset메소드가 없지만 HTML 양식 요소가 있으므로 다음과 같이 양식의 모든 필드를 재설정 할 수 있습니다.

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

jQuery를 통해이 작업을 수행하면 (여기 다른 답변에서 볼 수 있듯이 $('#configform')[0].reset()) [0]은를 통해 직접 얻을 수있는 것과 동일한 양식 DOM 요소를 가져옵니다 document.getElementById. 후자의 접근 방식은 더 효율적이고 간단합니다 (jQuery 접근 방식으로 인해 먼저 컬렉션을 얻은 다음 컬렉션에서 요소를 가져와야하지만 바닐라 자바 ​​스크립트에서는 요소를 직접 가져옵니다).

재설정 버튼에는 스크립트가 전혀 필요하지 않습니다 (또는 이름 또는 ID).

<input type="reset">

그리고 당신은 끝났습니다. 그러나 실제로 스크립트를 사용해야 하는 경우 모든 양식 컨트롤에는 해당 양식 을 참조 하는 양식 속성이 있으므로 다음을 수행 할 수 있습니다.

<input type="button" onclick="this.form.reset();">

그러나 재설정 버튼이 훨씬 나은 선택입니다.

마침내 문제를 해결했습니다! @RobG는 form태그와 table태그 에 대해 옳았습니다 . 태그는 테이블 외부에 배치해야합니다. 그것으로,form

<td><input type="reset" id="configreset" value="Reset"></td>

jquery 또는 다른 것이 필요하지 않습니다. 버튼을 클릭하고 tadaa ~ 전체 형태가 재설정됩니다;) 화려한!

이 간단한 코드를 사용합니다.

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});

JQuery와 함수를 사용하여 .closest (요소) 과 .find을 (...) .

얻기 부모 요소와 찾고 아이 .

마지막으로 필요한 기능을 수행하십시오.

$("#form").closest('form').find("input[type=text], textarea").val("");

첫 번째 줄은 양식 입력을 재설정합니다

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

두 번째는 select2를 재설정합니다.

선택 사항 : 다른 이벤트에 다른 유형으로 등록 된 경우이를 사용할 수 있습니다 .

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2

이 jQuery 재설정 기능을 사용하면 양식 필드를 빠르게 재설정 할 수 있습니다.

성공 응답을 받으면 코드 아래에서 실행하십시오.

$(selector)[0].reset();

다음과 같이 입력 유형 = reset with id = resetform을 추가 할 수 있습니다

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

그런 다음 jquery를 사용하면 다음과 같이 id = resetform 인 요소에서 .click () 함수를 사용하십시오.

<script> 
$('#resetform').click();
</script>

양식 재설정 참고 : CSS를 사용하여 id = resetform으로 재설정 버튼을 숨길 수도 있습니다.

<style>
#resetform
{
display:none;
}
</style>

다음은 Jquery를 사용한 간단한 솔루션입니다. 전 세계적으로 작동합니다. 코드를 살펴보십시오.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

재설정해야하는 모든 형태의 버튼에 명확한 클래스를 추가하십시오. 예를 들면 다음과 같습니다.

<button class="button clear" type="reset">Clear</button>

jQuery 에는 reset()메소드 가 없습니다 . 그러나 기본 JavaScript 는 않습니다. 따라서 다음을 사용하여 jQuery 요소를 JavaScript 객체로 변환하십시오.

$("#formId")[0].reset();

$("#formId").get(0).reset();

우리는 단순히 자바 스크립트 코드를 사용할 수 있습니다

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

<button type="reset">Reset</reset>

내가 생각할 수있는 가장 간단한 방법은 강력합니다. 양식 태그 내에 배치하십시오.

다음을 사용할 수 있습니다.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

그런 다음 양식을 지우십시오.

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });

코드가 작동해야합니다. static/jquery-1.9.1.min.js존재 하는지 확인하십시오 . 또한로 되돌릴 수 static/jquery.min.js있습니다. 문제가 해결되면 문제를 정확히 지적한 것입니다.