jQuery를 사용하여 양식 제출

jQuery를 사용하여 양식 제출

닫혔습니다. 이 질문은 다음과 같습니다.디버깅 세부 정보.현재 답변을 수락하고 있지 않습니다.

---

원하는 동작, 특정 문제 또는 오류, 문제를 재현하는 데 필요한 최단 코드를 포함하도록 질문을 편집합니다.이것은 다른 사람들이 질문에 대답하는 데 도움이 될 것입니다.

3년 전에 문을 닫았습니다.

이 질문을 개선합니다.

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

양식을 정상적으로 제출하는지 아니면 AJAX 통화를 통해 제출하는지에 따라 다릅니다.예제가 포함된 설명서를 포함하여 jquery.com 에서 많은 정보를 찾을 수 있습니다.양식을 정상적으로 제출하려면 해당 사이트에서 방법을 확인하십시오.AJAX의 경우 또는 메소드를 사용할 수 있지만 다양한 가능성이 있습니다.참고:post()그것은 정말로 전화하기 편리한 방법일 뿐입니다.ajax()인터페이스가 단순하고 제한적인 방법입니다.

제가 매일 사용하는 중요한 리소스 중 하나는 "JQuery 작동 방식"입니다.여기에는 jQuery 사용에 대한 자습서가 있으며 왼쪽 탐색 기능을 통해 모든 설명서에 액세스할 수 있습니다.

예:

보통의

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

참고: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()

설명서: jQueryDoc

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

내용은 다음을 참조하십시오.
누구든지 이용한다면

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

이런 거 하지 마.

<button name = "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();

이벤트/제출을 참조하십시오.

양식에 대해 이벤트 수신기 제출을 이미 설치한 경우 제출할 내부 호출()

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

이 양식의 제출 이벤트에 대해 새 이벤트 수신기를 설치하려고 하면 작동하지 않습니다(실패).따라서 HTML Element 자체(jQuery에서 랩 해제)에 액세스하고 이 요소에 대해 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/

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과 같 1을 양 첨 면 하 지 하 않 작 습 니 동 다 부 다 식 이 음 만 든 예 ▁a ▁1 ▁creating 니 않 ▁it 습 지 다 ▁throws ▁1 하 ▁like ▁and ▁ie 면 작 ▁example ▁in 동 ▁in ▁then ▁form ▁- IE9에서는 JScript 오류가 발생합니다.DOM Exception: HIERARCHY_REQUEST_ERR (3)

Tommy W @ https://stackoverflow.com/a/6694054/694325 에 대한 소품.

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

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

            **OR**

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

지금까지의 솔루션을 사용하려면 양식의 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();
});

제 접근 방식이 약간 다릅니다. 버튼을 제출 버튼으로 변경한 후 다음을 클릭합니다.

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

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

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

OR

document.formName.submit();

동적 폼에 대한 IE 트릭:

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

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!"); 
    });

언급URL : https://stackoverflow.com/questions/1200266/submit-a-form-using-jquery