Gửi biểu mẫu bằng jQuery [đã đóng]

Tôi muốn gửi một biểu mẫu bằng jQuery. Ai đó có thể cung cấp mã, bản demo hoặc liên kết ví dụ không?

Nó phụ thuộc vào việc bạn gửi biểu mẫu bình thường hay thông qua cuộc gọi AJAX. Bạn có thể tìm thấy nhiều thông tin tại jquery.com , bao gồm cả tài liệu với các ví dụ. Để gửi biểu mẫu thông thường, hãy kiểm tra submit()phương pháp tại trang web đó. Đối với AJAX , có nhiều khả năng khác nhau, mặc dù bạn có thể muốn sử dụng ajax()hoặc post()phương thức. Lưu ý rằng đó post()thực sự chỉ là một cách thuận tiện để gọi ajax()phương thức với giao diện đơn giản và hạn chế.

Một tài nguyên quan trọng, một tài nguyên tôi sử dụng hàng ngày, mà bạn nên đánh dấu là Cách jQuery hoạt động . Nó có các hướng dẫn về cách sử dụng jQuery và điều hướng bên trái cho phép truy cập vào tất cả các tài liệu.

Ví dụ:

Bình thường

$('form#myForm').submit();

AJAX

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         // ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // ... do something with the data...
                 }
    });
});

Lưu ý rằng ajax()và post()các phương pháp trên là tương đương. Có các tham số bổ sung mà bạn có thể thêm vào ajax()yêu cầu để xử lý lỗi, v.v.

Bạn sẽ phải sử dụng $("#formId").submit().

Bạn thường gọi nó từ trong một chức năng.

Ví dụ:

<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>

Bạn có thể nhận thêm thông tin về điều này trên trang web của Jquery .

khi bạn có một biểu mẫu hiện có, giờ đây nó sẽ hoạt động với jquery - ajax / bài viết bây giờ bạn có thể:

• treo lên trình - sự kiện của mẫu của bạn
• ngăn chặn chức năng mặc định của trình

• làm công việc của riêng bạn

  $(function() {
      //hang on event of form with id=myform
      $("#myform").submit(function(e) {
  
          //prevent Default functionality
          e.preventDefault();
  
          //get the action-url of the form
          var actionurl = e.currentTarget.action;
  
          //do your own request an handle the results
          $.ajax({
                  url: actionurl,
                  type: 'post',
                  dataType: 'application/json',
                  data: $("#myform").serialize(),
                  success: function(data) {
                      ... do something with the data...
                  }
          });
  
      });
  
  });

Xin lưu ý rằng, để serialize()hàm hoạt động trong ví dụ trên, tất cả các thành phần của biểu mẫu cần phải namexác định thuộc tính của chúng .

Ví dụ về hình thức:

<form id="myform" method="post" action="http://example.com/do_recieve_request">

<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>

@PtF - dữ liệu được gửi bằng POST trong mẫu này, vì vậy điều này có nghĩa là bạn có thể truy cập dữ liệu của mình thông qua

 $_POST['dataproperty1'] 

, trong đó dataproperty1 là "tên biến" trong json của bạn.

cú pháp mẫu ở đây nếu bạn sử dụng CodeIgniter:

 $pdata = $this->input->post();
 $prop1 = $pdata['prop1'];
 $prop1 = $pdata['prop2'];

Trong jQuery tôi muốn như sau:

$("#form-id").submit()

Nhưng một lần nữa, bạn thực sự không cần jQuery để thực hiện nhiệm vụ đó - chỉ cần sử dụng JavaScript thông thường:

document.getElementById("form-id").submit()

Từ hướng dẫn: jQuery Doc

$("form:first").submit();

Để biết thông tin
nếu có ai sử dụng

$('#formId').submit();

Đừng như thế này

<button name = "submit">

Phải mất nhiều giờ để tìm thấy tôi mà trình () sẽ không hoạt động như thế này.

Sử dụng nó để gửi biểu mẫu của bạn bằng cách sử dụng jquery. Đây là liên kết http://api.jquery.com/submit/

<form id="form" method="post" action="#">
    <input type="text" id="input">
    <input type="button" id="button" value="Submit">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $( "#button" ).click(function() {
        $( "#form" ).submit();
    });
});
</script>

điều này sẽ gửi một biểu mẫu với trình tải trước:

var a=$('#yourform').serialize();
$.ajax({
    type:'post',
    url:'receiver url',
    data:a,
    beforeSend:function(){
        launchpreloader();
    },
    complete:function(){
        stopPreloader();
    },
    success:function(result){
         alert(result);
    }
});

Tôi có một số mẹo để tạo một bài đăng dữ liệu biểu mẫu được cải cách bằng phương thức ngẫu nhiên http://www.jackart4.com/article.html

$("form:first").submit();

Xem sự kiện / gửi .

Lưu ý rằng nếu bạn đã cài đặt trình lắng nghe sự kiện cho biểu mẫu của mình, cuộc gọi bên trong để gửi ()

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

sẽ không hoạt động vì nó cố gắng cài đặt một trình lắng nghe sự kiện mới cho sự kiện gửi biểu mẫu này (không thành công). Vì vậy, bạn phải gia nhập chính Phần tử HTML (mở khóa từ jQquery) và gọi trực tiếp submit () trên thành phần này:

    jQuery('#<form-id>').submit( function(e){ 
      e.preventDefault();
      // note the [0] array access:
      if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
    });

Bạn cũng có thể sử dụng plugin mẫu jquery để gửi bằng ajax aswell:

http://malsup.com/jquery/form/

jQuery("a[id=atag]").click( function(){

    jQuery('#form-id').submit();      

            **OR**

    jQuery(this).parents("#form-id").submit();
});

Lưu ý rằng trong Internet Explorer có vấn đề với các biểu mẫu được tạo động. Một biểu mẫu được tạo như thế này sẽ không gửi trong IE (9):

var form = $('<form method="post" action="/test/Delete/">' +
             '<input type="hidden" name="id" value="' + myid + '"></form>');
$(form).submit();

Để làm cho nó hoạt động trong IE, hãy tạo phần tử biểu mẫu và đính kèm nó trước khi gửi như vậy:

var form = document.createElement("form");
$(form).attr("action", "/test/Delete")
       .attr("method", "post");
$(form).html('<input type="hidden" name="id" value="' + myid + '" />');
document.body.appendChild(form);
$(form).submit();
document.body.removeChild(form);

Tạo biểu mẫu như trong ví dụ 1 và sau đó đính kèm nó sẽ không hoạt động - trong IE9, nó đưa ra lỗi JScript DOM Exception: HIERARCHY_REQUEST_ERR (3)

Đạo cụ cho Tommy W @ https://stackoverflow.com/a/6694054/694325

Các giải pháp cho đến nay yêu cầu bạn phải biết ID của biểu mẫu.

Sử dụng mã này để gửi biểu mẫu mà không cần biết ID:

function handleForm(field) {
    $(field).closest("form").submit();
}

Ví dụ: nếu bạn muốn xử lý sự kiện nhấp chuột cho một nút, bạn có thể sử dụng

$("#buttonID").click(function() {
    handleForm(this);    
});

Nếu nút nằm giữa các thẻ biểu mẫu, tôi thích phiên bản này:

$('.my-button').click(function (event) {
    var $target = $( event.target );
    $target.closest("form").submit();
});

bạn có thể sử dụng nó như thế này:

  $('#formId').submit();

HOẶC LÀ

document.formName.submit();

Thủ thuật IE cho các hình thức động:

$('#someform').find('input,select,textarea').serialize();

Cách tiếp cận của tôi hơi khác Thay đổi nút thành nút gửi và sau đó nhấp

$("#submit").click(function(event) {
$(this).attr('type','submit');
$(this).click();
});

function  form_submit(form_id,filename){
    $.post(filename,$("#"+form_id).serialize(), function(data){
        alert(data);
    });
}

Nó sẽ đăng dữ liệu biểu mẫu trên tên tệp đã cho của bạn thông qua AJAX.

Tôi đề xuất một giải pháp chung để bạn không phải thêm mã cho mọi hình thức. Sử dụng plugin mẫu jquery (http://jquery.malsup.com/form/) và thêm mã này.

$(function(){
$('form.ajax_submit').submit(function() {
    $(this).ajaxSubmit();
            //validation and other stuff
        return false; 
});

});

bạn có thể làm như thế này:

$('#myform').bind('submit', function(){ ... });

Tôi cũng đã sử dụng cách sau để gửi biểu mẫu (mà không thực sự gửi nó) thông qua Ajax:

  jQuery.get("process_form.php"+$("#form_id").serialize(), {}, 
    function() {
      alert("Okay!"); 
    });