วิธีรีเซ็ตฟอร์มโดยใช้วิธี jQuery ด้วย. reset ()

ฉันมีรหัสการทำงานที่สามารถรีเซ็ตฟอร์มของฉันเมื่อฉันคลิกที่ปุ่มรีเซ็ต อย่างไรก็ตามหลังจากที่รหัสของฉันเริ่มยาวขึ้นฉันรู้ว่ามันไม่ทำงานอีกต่อไป

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

มันอาจเป็นหนึ่งในเหตุผลหรือไม่

คุณอาจลองใช้ทริกเกอร์ () ลิงค์อ้างอิง

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

http://jsfiddle.net/8zLLn/

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

วางไว้ในไวโอลินซอ ทำงานตามที่ตั้งใจไว้

ดังนั้นไม่มีปัญหาใด ๆ ที่กล่าวถึงข้างต้นจึงเป็นความผิดที่นี่ บางทีคุณอาจมีปัญหา ID ที่ขัดแย้งกันใช่ไหม การคลิกดำเนินการจริงหรือไม่

แก้ไข: (เพราะฉันเป็นกระสอบเศร้าไม่มีความสามารถในการแสดงความคิดเห็นที่เหมาะสม) มันไม่ใช่ปัญหาโดยตรงกับรหัสของคุณ มันใช้งานได้ดีเมื่อคุณนำมันออกจากบริบทของหน้าเว็บที่คุณใช้อยู่ในปัจจุบันดังนั้นแทนที่จะเป็นสิ่งที่มี jQuery / javascript และข้อมูลในรูปแบบเฉพาะนั้นจะต้องเป็นอย่างอื่น ฉันจะเริ่มตัดรหัสรอบ ๆ และพยายามค้นหาว่าเกิดอะไรขึ้น ฉันหมายถึงเพียงเพื่อ 'ทำให้แน่ใจ' ฉันคิดว่าคุณสามารถ ...

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

ในฟังก์ชั่นคลิกและตรวจสอบให้แน่ใจว่ามันกำลังกำหนดเป้าหมายรูปแบบที่เหมาะสม ...

และถ้าเป็นมันจะต้องเป็นสิ่งที่ไม่ได้ระบุไว้ที่นี่

แก้ไขส่วนที่ 2: สิ่งหนึ่งที่คุณสามารถลองได้ (หากไม่ได้กำหนดเป้าหมายอย่างถูกต้อง) คือใช้"อินพุต: รีเซ็ต"แทนที่จะเป็นสิ่งที่คุณใช้ ... และฉันขอแนะนำเพราะไม่ใช่เป้าหมายที่ทำงานไม่ถูกต้องเพื่อค้นหา การคลิกเป้าหมายคืออะไร เพียงแค่เปิดไฟร์บั๊ก / เครื่องมือสำหรับนักพัฒนาแล้วเหวี่ยงคุณโยนเข้าไป

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

และดูสิ่งที่ปรากฏขึ้น และจากนั้นเราสามารถไปจากที่นั่น

ตามโพสต์นี้ที่นี่ jQuery ไม่มีreset()วิธี; แต่จาวาสคริปต์ดั้งเดิมทำ ดังนั้นแปลงองค์ประกอบ jQuery เป็นวัตถุ JavaScript โดยใช้:

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

นี่คือหนึ่งในสิ่งเหล่านั้นที่ทำได้ง่ายกว่าจริง ๆ ในวานิลลา Javascript มากกว่า jQuery jQuery ไม่มีresetวิธีการ แต่องค์ประกอบของรูปแบบ HTML จะทำดังนั้นคุณสามารถรีเซ็ตเขตข้อมูลทั้งหมดในรูปแบบดังนี้

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

ถ้าคุณทำเช่นนี้ผ่าน jQuery (เท่าที่เห็นในคำตอบอื่น ๆ ที่นี่: $('#configform')[0].reset()) ที่[0]ถูกเรียกองค์ประกอบรูปแบบ DOM document.getElementByIdเดียวกันกับที่คุณจะได้รับโดยตรงผ่านทาง วิธีหลังมีทั้งประสิทธิภาพและเรียบง่ายกว่า (เนื่องจากด้วยวิธี jQuery คุณจะได้รับคอลเลคชันก่อนแล้วจึงต้องดึงองค์ประกอบจากมันในขณะที่ vanilla Javascript คุณจะได้รับองค์ประกอบโดยตรง)

ปุ่มรีเซ็ตไม่จำเป็นต้องมีสคริปต์ใด ๆ เลย (หรือชื่อหรือรหัส):

<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 (องค์ประกอบ)และประจำวันหา ( ... )

การเดินทางที่ผู้ปกครององค์ประกอบและกำลังมองหาสำหรับเด็ก

ในที่สุดทำฟังก์ชั่นที่จำเป็น

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

คุณสามารถเพิ่มอินพุต type = reset ด้วย 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 ดังนี้

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

และรีเซ็ตฟอร์มหมายเหตุ: คุณสามารถซ่อนปุ่มรีเซ็ตด้วย id = resetform โดยใช้ css ของคุณ

<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()เมธอด แต่จาวาสคริปต์ดั้งเดิมทำ ดังนั้นแปลงองค์ประกอบ jQuery เป็นวัตถุ JavaScript โดยใช้:

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

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

เราอาจใช้รหัส Javascript

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นอกจากนี้คุณยังสามารถลองย้อนกลับไป หากวิธีนี้แก้ไขปัญหาได้คุณจะระบุปัญหาได้