Gửi biểu mẫu JavaScript - Xác nhận hoặc hủy hộp thoại gửi


183

Đối với một hình thức đơn giản với một cảnh báo hỏi nếu các trường được điền chính xác, tôi cần một hàm thực hiện điều này:

  • Hiển thị hộp cảnh báo khi nhấp vào nút với hai tùy chọn:

    • Nếu nhấp vào "OK", biểu mẫu được gửi
    • Nếu nhấp vào hủy, hộp cảnh báo sẽ đóng lại và biểu mẫu có thể được điều chỉnh và gửi lại

Tôi nghĩ rằng một xác nhận JavaScript sẽ hoạt động nhưng dường như tôi không thể tìm ra cách.

Mã tôi có bây giờ là:

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>

Câu trả lời:


396

Một xác nhận JavaScript nội tuyến đơn giản sẽ đủ:

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

Không cần một chức năng bên ngoài trừ khi bạn đang thực hiện xác nhận , bạn có thể làm một cái gì đó như thế này:

<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

Vấn đề được nêu trong nhận xét là hợp lệ, vì vậy đây là một bản sửa đổi khác miễn nhiễm với điều đó:

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

25

Bạn có thể sử dụng hàm xác nhận 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?');"sẽ đơn giản hơn nhiều, và kết quả sẽ giống nhau.
Sk8erPeter


2

OK, chỉ cần thay đổi mã của bạn thành một cái gì đó như thế này:

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

Ngoài ra đây là mã đang chạy, chỉ cần tôi làm cho nó dễ dàng hơn để xem cách nó hoạt động, chỉ cần chạy mã dưới đây để xem kết quả:

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

Nếu bạn muốn áp dụng một số điều kiện trên biểu mẫu gửi thì bạn có thể sử dụng phương pháp này

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

Một điều luôn ghi nhớ rằng thuộc tính phương thứchành động ghi sau các thuộc tính onsubmit

mã javascript

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.