ส่งแบบฟอร์ม JavaScript - ยืนยันหรือยกเลิกกล่องโต้ตอบการส่ง


183

สำหรับรูปแบบที่เรียบง่ายพร้อมการแจ้งเตือนที่ถามว่ากรอกฟิลด์อย่างถูกต้องหรือไม่ฉันต้องการฟังก์ชันที่ทำสิ่งนี้:

  • แสดงกล่องข้อความแจ้งเตือนเมื่อคลิกปุ่มด้วยสองตัวเลือก:

    • หากคลิก "ตกลง" ระบบจะส่งแบบฟอร์ม
    • หากมีการคลิกยกเลิกกล่องการแจ้งเตือนจะปิดลงและสามารถปรับและส่งฟอร์มได้อีกครั้ง

ฉันคิดว่าการยืนยัน JavaScript จะทำงานได้ แต่ฉันไม่สามารถหาวิธีได้

รหัสที่ฉันมีตอนนี้คือ:

function show_alert() {
  alert("xxxxxx");
}
<form>
  <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

คำตอบ:


397

การยืนยัน JavaScript แบบอินไลน์อย่างง่ายเพียงพอแล้ว:

<form onsubmit="return confirm('Do you really want to submit the form?');">

ไม่จำเป็นต้องใช้ฟังก์ชันภายนอกยกเว้นว่าคุณกำลังตรวจสอบความถูกต้องซึ่งคุณสามารถทำสิ่งนี้:

<script>
function validate(form) {

    // validation code here ...


    if(!valid) {
        alert('Please correct the errors in the form!');
        return false;
    }
    else {
        return confirm('Do you really want to submit the form?');
    }
}
</script>
<form onsubmit="return validate(this);">

28

ปัญหาที่ชี้ไปในความคิดเห็นนั้นถูกต้องดังนั้นนี่คือการแก้ไขที่แตกต่างซึ่งไม่สามารถทำได้

function show_alert() {
  if(!confirm("Do you really want to do this?")) {
    return false;
  }
  this.form.submit();
}

25

คุณสามารถใช้ฟังก์ชันยืนยัน JS

<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
  <input type="submit" />
</form>

http://jsfiddle.net/jasongennaro/DBHEz/


27
onsubmit="return confirm('Is the form filled out correctly?');"จะง่ายกว่ามากและผลลัพธ์ก็จะเหมือนกัน
Sk8erPeter


2

ตกลงเปลี่ยนรหัสเป็นแบบนี้:

<script>
function submit() {
   return confirm('Do you really want to submit the form?');
}
</script>

<form onsubmit="return submit(this);">
   <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
      alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

นอกจากนี้นี่คือรหัสที่ใช้งานฉันแค่ทำให้ง่ายต่อการดูวิธีการทำงานเพียงแค่เรียกใช้รหัสด้านล่างเพื่อดูผลลัพธ์:

function submitForm() {
  return confirm('Do you really want to submit the form?');
}
<form onsubmit="return submitForm(this);">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>


0

หากคุณต้องการใช้เงื่อนไขบางอย่างในการส่งแบบฟอร์มคุณสามารถใช้วิธีนี้ได้

<form onsubmit="return checkEmpData();" method="post" action="process.html">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

สิ่งหนึ่งที่พึงระลึกไว้เสมอว่าเมธอดและแอ็ตทริบิวต์แอ็คชันจะเขียนหลังจากแอ็ตทริบิวต์onsubmit

รหัสจาวาสคริปต์

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.