Отправить форму, используя jQuery [закрыто]

Я хочу отправить форму, используя jQuery. Может ли кто-нибудь предоставить код, пример или ссылку на пример?

Это зависит от того, отправляете ли вы форму нормально или через AJAX-вызов. Вы можете найти много информации на jquery.com , включая документацию с примерами. Для отправки формы в обычном режиме, проверьте submit()метод на этом сайте. Для AJAX существует множество различных возможностей, хотя вы, вероятно, захотите использовать либо методы, ajax()либо post(). Обратите внимание, что 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()

Из руководства: 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>

это отправит форму с preloader:

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

Смотрите события / отправить .

Обратите внимание, что если вы уже установили прослушиватель события submit для своей формы, внутренний вызов метода 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)

Реквизит Томми W @ https://stackoverflow.com/a/6694054/694325

Решения до сих пор требуют, чтобы вы знали идентификатор формы.

Используйте этот код для отправки формы без необходимости знать идентификатор:

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