Отправить форму с помощью jQuery

Question

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

Answer 1

Из инструкции: jQuery Doc

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

Answer 2

Вы должны будете использовать $("#formId").submit().

Обычно вы называете это функцией.

Например:

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

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

Вы можете получить более подробную информацию об этом на Jquery website.

Answer 3

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

См. events/submit.

Answer 4

Вы также можете использовать форму JQuery плагин представить с помощью Ajax как хорошо:

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

Answer 5

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

Критический ресурс, который я использую каждый день, который вы должны делать, это How jQuery Works. В нем есть учебники по использованию 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() запроса для обработки ошибок и т.д.

Answer 6

В JQuery я предпочел бы следующее:

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

Но опять же, вы действительно не нужно Jquery выполнить что задача - просто использовать обычный JavaScript:

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

Answer 7

Я также использовал следующие представить форму (без фактического представления его) с помощью Ajax:

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

Answer 8

Я рекомендую универсальное решение, поэтому вам не нужно добавлять код для каждой формы. Используйте плагин jquery form (http://jquery.malsup.com/form/) и добавьте этот код.

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

}); 

Answer 9

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

Это будет размещать данные формы на ваше имя данного файла через AJAX.

Answer 10

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

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

      **OR** 

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

Answer 11

вы могли бы сделать это следующим образом:

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

Answer 12

Обратите внимание, что в 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

Answer 13

это будет отправить форму с прелоадером:

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

i'have какой-то трюк, чтобы сделать запись данных формы реформирована со случайным методом http://www.jackart4.com/article.html

Answer 14

И.Е. трик для динамических форм:

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

Answer 15

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

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

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

Например, если вы были желающие обрабатывать событие щелчка на кнопке, вы можете использовать

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

Answer 16

вы могли бы использовать его как это:

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

ИЛИ

document.formName.submit(); 

Answer 17

, когда у вас есть существующая форма, которая должна теперь работать с JQuery - AJAX/постом Теперь вы можете:

• повесить на Submit - событие вашей формы
• предотвратить функциональные возможности представить по умолчанию

• сделать свой собственный материал

  $(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 является «variable-name» в вашем json.

здесь синтаксис выборки, если вы используете CodeIgniter:

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

Answer 18

Используйте его, чтобы отправить форму с помощью 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> 

Answer 19

Обрати внимание, что если вы уже установили представить слушатель событий для вашей формы, вызов innner представить()

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

не работы, как он пытается для установки нового прослушивателя событий для события отправки этой формы (что не удается). Таким образом, вы должны Acces сам (разворачивать из jQquery) HTML элемент и вызовите представить() на этот элемент непосредственно:

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

Answer 20

Если кнопка расположена между формой тегов, я предпочитаю эту версию:

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

Answer 21

Мой подход немного Different Изменить кнопку на кнопку отправки, а затем нажмите

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