จะรีเซ็ต (ล้าง) แบบฟอร์มผ่าน JavaScript ได้อย่างไร?

124

ฉันเหนื่อย $("#client.frm").reset();แต่ใช้งานไม่ได้ดังนั้นจะรีเซ็ตแบบฟอร์มผ่าน jQuery ได้อย่างไร?

javascript jquery

อาจซ้ำกันได้ของstackoverflow.com/questions/680241/blank-out-a-form-with-jquery

— svk

6

หมายเหตุ: การล้างและรีเซ็ตเป็นสองสิ่งที่แตกต่างกัน รีเซ็ต ( .reset()) จะทำให้ค่ากลับไปเป็นค่าเดิมใน HTML สำหรับสิ่งนี้โปรดดูวิธีแก้ปัญหาของ Nick Craver ด้านล่าง "ล้าง" โดยทั่วไปหมายถึงการตั้งค่ากลับเป็นว่าง / ไม่เลือก / ไม่ได้เลือก ดูโซลูชัน MahmoudS

— Luke

258

form.reset() เป็นเมธอดองค์ประกอบ DOM (ไม่ใช่วิธีหนึ่งในวัตถุ jQuery) ดังนั้นคุณต้อง:

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

หรือไม่มี jQuery:

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

— นิคเครเวอร์
แหล่งที่มา

4

สมองของฉันขยายใหญ่ขึ้นขอบคุณ: "วัตถุ jQuery คือกระดาษห่อหุ้มที่มีลักษณะคล้ายอาร์เรย์รอบ ๆ องค์ประกอบ DOM อย่างน้อยหนึ่งรายการหากต้องการอ้างอิงถึงองค์ประกอบ DOM จริง (แทนที่จะเป็นวัตถุ jQuery) คุณมีสองตัวเลือกตัวแรก (และ เร็วที่สุด) วิธีการใช้สัญกรณ์อาร์เรย์: $ ("#foo") [0]; // เทียบเท่ากับ document.getElementById ("foo") วิธีที่สองคือการใช้ฟังก์ชัน. get (): $ ("#foo ") .get (0); // เหมือนกับข้างบนช้ากว่าเท่านั้น" learn.jquery.com/using-jquery-core/faq/…

— Andrew

ฉันได้รับข้อผิดพลาดถัดไป: TypeError: document.getElementById (... ) การรีเซ็ตไม่ใช่ฟังก์ชัน [เรียนรู้เพิ่มเติม] ฉันใช้ปลั๊กอิน FormValidate สำหรับแบบฟอร์ม resetForm ไม่รีเซ็ตแบบฟอร์มด้วย = (ข้อเสนอแนะใด ๆ

— Eugen Konkov

Eugen นี่คือที่ ๆ เหมือนกับ Indiana Jones และ The Last Crusade คุณต้องก้าวกระโดดแห่งศรัทธา ถ้าคุณเรียก document.getElementById ('myform'). reset () มันจะล้างแบบฟอร์มแม้ว่าวิธีนั้นดูเหมือนจะไม่มีอยู่จริงก็ตาม ความสับสนทั่วไปของ M $

— Newclique

43

คุณสามารถทำได้ง่ายๆ:

$("#client.frm").trigger('reset')

— user2057484
แหล่งที่มา

1

a Triggerนำฉันสู่โลกใหม่

— gonatee

18

โซลูชัน Pure JSมีดังนี้:

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}

— Mahmoud Saleh
แหล่งที่มา

1

นี่คือโซลูชันปลั๊กอิน jQuery ที่ควรจะเทียบเท่าโดยประมาณ stackoverflow.com/a/24496012/1766230 (ฉันใช้selectedIndex = -1เคล็ดลับของคุณ)

— ลุค

5

โซลูชันนี้ใช้ไม่ได้ในขณะนี้ (ในปี 2559) เมื่อฟอร์มมีค่าเริ่มต้นสำหรับอินพุตข้อความรหัสผ่านและ textarea คุณควรใช้องค์ประกอบ [i] .defaultValue = "" แทนองค์ประกอบ [i] .value = ""

— Andrew F.

var field_type = elements[i].type.toLowerCase();

— Martynas Januškauskas

@ แอนดรูว์: ขึ้นอยู่กับว่าคุณต้องการอะไร หากคุณต้องการรีเซ็ตแบบฟอร์มเป็นdefaultValues คุณสามารถเรียกreset()ใช้แบบฟอร์มวัตถุ รหัสในที่นี้คือการล้างแบบฟอร์มแทนที่จะรีเซ็ต

— ผู้พิทักษ์

4

, รีเซ็ต () วิธีการไม่ล้างค่าเริ่มต้นและช่องทำเครื่องหมายและมีปัญหาอื่น ๆ อีกมากมาย

ในการรีเซ็ตอย่างสมบูรณ์ตรวจสอบลิงค์ด้านล่าง -

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

— Alpesh
แหล่งที่มา

4

รีเซ็ต (ล้าง) แบบฟอร์มถึงJavascript& jQuery:

ตัวอย่าง Javascript:

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

ตัวอย่าง jQuery:

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

$('#client.frm').trigger("reset");

— Gaurang P.
แหล่งที่มา

4

หมายเหตุฟังก์ชันform.reset()จะไม่ทำงานหากแท็กอินพุตบางแท็กในฟอร์มมีแอตทริบิวต์name='reset'

— alexbobroff
แหล่งที่มา

2

ลองสิ่งนี้:

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}

— Hazem_M
แหล่งที่มา

2

ล้างแบบฟอร์มดังนี้

document.forms[0].reset();

คุณสามารถล้างองค์ประกอบฟอร์มภายในกลุ่มได้ forms[0]โดยใช้นี้

— Nagaraju Vuppala
แหล่งที่มา

1

ใช้ฟังก์ชัน JavaScript reset():

document.forms["frm_id"].reset();

— เฟลิกซ์บากูร์
แหล่งที่มา

1

คุณสามารถใช้สิ่งต่อไปนี้:

$('[element]').trigger('reset')

— Justlearning
แหล่งที่มา

0

ลองใช้รหัสนี้ คำตอบที่สมบูรณ์สำหรับคำตอบของคุณ

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>

— จาฟเฟอร์วิลสัน
แหล่งที่มา

-1

คุณสามารถล้างแบบฟอร์มทั้งหมดโดยใช้ฟังก์ชัน onclick นี่คือรหัสสำหรับมัน

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

window.location.reload () ฟังก์ชันจะรีเฟรชหน้าของคุณและข้อมูลทั้งหมดจะถูกล้าง

— อาร์จัน
แหล่งที่มา