jQuery를 사용하여 양식 제출 [닫기]

jQuery를 사용하여 양식을 제출하고 싶습니다. 누군가 코드, 데모 또는 예제 링크를 제공 할 수 있습니까?

양식을 정상적으로 제출하는지 또는 AJAX 호출을 통해 제출하는지에 따라 다릅니다. jquery.com 에서 예제가 포함 된 설명서를 포함하여 많은 정보를 찾을 수 있습니다 . 양식을 정상적으로 제출하려면 submit()해당 사이트에서 방법을 확인 하십시오. 들어 AJAX 당신은 아마 중 하나를 사용할 불구하고, 여러 가지 가능성이있다 ajax()또는 post()방법을. 참고 post()단지 편리한 방법 정말이 호출 ajax()A, 단순화 및 제한 인터페이스 방법.

내가 매일 사용하는 중요한 리소스는 북마크해야하는 jQuery 작동 방식입니다. 입니다. jQuery 사용에 대한 자습서가 있으며 왼쪽 탐색을 통해 모든 설명서에 액세스 할 수 있습니다.

예 :

표준

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

아약스

$('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...
                 }
    });
});

위 의 ajax()및 post()방법은 동일합니다. ajax()오류 등을 처리 하기 위해 요청에 추가 할 수있는 추가 매개 변수가 있습니다 .

를 사용해야 $("#formId").submit()합니다.

일반적으로 함수 내에서 이것을 호출합니다.

예를 들면 다음과 같습니다.

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

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

Jquery 웹 사이트 에서 이에 대한 자세한 정보를 얻을 수 있습니다 .

기존 양식이 있으면 이제 jquery와 함께 작동해야합니다. 이제 ajax / post를 사용하십시오.

• 제출 양식에 매 달리십시오-양식의 이벤트
• 제출의 기본 기능 방지

• 자신의 일을

  $(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...
                  }
          });
  
      });
  
  });

위해서는, 유의하시기 바랍니다 serialize()위의 예에서 일할 기능, 모든 양식 요소는 한 필요 name속성이 정의.

양식의 예 :

<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-이 샘플에서 POST를 사용하여 데이터가 제출되므로, 다음을 통해 데이터에 액세스 할 수 있습니다.

 $_POST['dataproperty1'] 

여기서 dataproperty1은 json의 "변수 이름"입니다.

CodeIgniter를 사용하는 경우 샘플 구문은 다음과 같습니다.

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

jQuery에서는 다음을 선호합니다.

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

그러나 다시 한 번, 해당 작업을 수행하기 위해 jQuery가 필요하지 않습니다. 일반 JavaScript 만 사용하십시오.

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

매뉴얼에서 : jQuery Doc

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

누군가가 사용하는 경우 정보

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

이런 식으로하지 마십시오

<button name = "submit">

submit ()이 이렇게 작동하지 않는다는 것을 알게 되려면 많은 시간이 걸렸습니다.

jquery를 사용하여 양식을 제출할 때 사용하십시오. 여기 링크 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>

이것은 프리 로더와 함께 폼을 전송합니다 :

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

임의의 방법으로 http://www.jackart4.com/article.html 을 사용하여 양식 데이터 게시물을 수정하는 방법이 있습니다 .

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

events / submit을 참조하십시오 .

양식에 제출 이벤트 리스너를 이미 설치 한 경우, innner 호출 submit ()

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

이 양식의 제출 이벤트에 대해 새 이벤트 리스너를 설치하려고하면 작동 하지 않습니다 (실패). 따라서 HTML 요소 자체 (jQquery에서 랩 해제)에 액세스 하고이 요소에서 직접 submit ()을 호출해야합니다.

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

jquery 양식 플러그인을 사용하여 ajax를 사용하여 제출할 수도 있습니다.

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

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

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

            **OR**

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

Internet Explorer에는 동적으로 작성된 양식에 문제가 있습니다. 이와 같이 작성된 양식은 IE (9)에 제출되지 않습니다.

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

IE에서 작동하게하려면 양식 요소를 만들고 제출하기 전에 첨부하십시오.

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

예제 1과 같이 양식을 작성한 후 첨부하면 작동하지 않습니다. IE9에서는 JScript 오류가 발생합니다. DOM Exception: HIERARCHY_REQUEST_ERR (3)

Tommy W의 소품 @ https://stackoverflow.com/a/6694054/694325

솔루션은 지금까지 양식의 ID를 알아야합니다.

이 코드를 사용하여 ID를 몰라도 양식을 제출하십시오.

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

예를 들어 버튼의 클릭 이벤트를 처리하려는 경우

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

버튼이 양식 태그 사이에 있으면이 버전을 선호합니다.

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

다음과 같이 사용할 수 있습니다.

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

또는

document.formName.submit();

동적 양식에 대한 IE 트릭 :

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

내 접근 방식이 약간 다름 버튼을 제출 버튼으로 변경 한 다음 클릭

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

AJAX를 통해 주어진 파일 이름에 양식 데이터를 게시합니다.

모든 솔루션에 대해 코드를 추가 할 필요가 없도록 일반적인 솔루션을 권장합니다. jquery 양식 플러그인 (http://jquery.malsup.com/form/)을 사용하여이 코드를 추가하십시오.

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

});

당신은 이렇게 할 수 있습니다 :

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

또한 Ajax를 통해 (실제로 제출하지 않고) 양식을 제출하기 위해 다음을 사용했습니다.

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