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

JAVASCRIPT / 글쓴이

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

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