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

Question

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

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

535

jquery

Источник

user146970 29 июл '09 в 13:28

22 ответа

Другие вопросы по тегам jquery

user12950 29 июл '09 в 13:34 2009-07-29 13:34 · Answer 1 · 2009-07-29 13:34

Это зависит от того, отправляете ли вы форму обычно или через AJAX-вызов. Вы можете найти много информации на http://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() запрос на обработку ошибок и т. д.

user66098 29 июл '09 в 13:32 2009-07-29 13:32 · Answer 2 · 2009-07-29 13:32

Вам придется использовать $("#formId").submit(),

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

Например:

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

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

Вы можете получить больше информации об этом на веб-сайте Jquery.

user657525 28 авг '13 в 10:13 2013-08-28 10:13 · Answer 3 · 2013-08-28 10:13

Когда у вас есть существующая форма, теперь она должна работать с 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'];

user115192 29 июл '09 в 13:35 2009-07-29 13:35 · Answer 4 · 2009-07-29 13:35

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

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

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

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

74

Источник

user115192 29 июл '09 в 13:35

user805 29 июл '09 в 13:31 2009-07-29 13:31 · Answer 5 · 2009-07-29 13:31

Из руководства: JQuery Doc

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

52

Источник

user805 29 июл '09 в 13:31

user6198429 12 апр '18 в 18:08 2018-04-12 18:08 · Answer 6 · 2018-04-12 18:08

Для информации
если кто-то использует

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

не используйте никаких

<button name = "sumit">

Мне понадобилось много часов, чтобы найти, что submit() не будет работать так.

29

Источник

user6198429 12 апр '18 в 18:08

user2049788 21 янв '14 в 13:38 2014-01-21 13:38 · Answer 7 · 2014-01-21 13:38

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

21

Источник

user2049788 21 янв '14 в 13:38

user1856031 28 ноя '12 в 04:52 2012-11-28 04:52 · Answer 8 · 2012-11-28 04:52

Это отправит форму с 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

user14118 29 июл '09 в 13:33 2009-07-29 13:33 · Answer 9 · 2009-07-29 13:33

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

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

16

Источник

user14118 29 июл '09 в 13:33

user2135249 08 апр '14 в 23:50 2014-04-08 23:50 · Answer 10 · 2014-04-08 23:50

Обратите внимание, что если вы уже установили прослушиватель события 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();
    });

user694325 16 ноя '12 в 07:43 2012-11-16 07:43 · Answer 11 · 2012-11-16 07:43

Обратите внимание, что в 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 @ /questions/33086488/forma-otpravki-jquery-ne-rabotaet-v-ie/33086511#33086511

user43337 29 июл '09 в 13:33 2009-07-29 13:33 · Answer 12 · 2009-07-29 13:33

Вы также можете использовать плагин формы jquery для отправки с использованием ajax:

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

10

Источник

user43337 29 июл '09 в 13:33

user962551 26 сен '11 в 13:40 2011-09-26 13:40 · Answer 13 · 2011-09-26 13:40

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

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

            **OR**

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

8

Источник

user962551 26 сен '11 в 13:40

user998649 15 июл '16 в 05:55 2016-07-15 05:55 · Answer 14 · 2016-07-15 05:55

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

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

8

Источник

user998649 15 июл '16 в 05:55

user1871280 26 апр '13 в 04:44 2013-04-26 04:44 · Answer 15 · 2013-04-26 04:44

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

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

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

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

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

user6335029 22 фев '17 в 05:27 2017-02-22 05:27 · Answer 16 · 2017-02-22 05:27

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

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

6

Источник

user6335029 22 фев '17 в 05:27

user1637815 21 июн '13 в 06:22 2013-06-21 06:22 · Answer 17 · 2013-06-21 06:22

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

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

ИЛИ ЖЕ

document.formName.submit();

5

Источник

user1637815 21 июн '13 в 06:22

user2320873 25 апр '13 в 17:25 2013-04-25 17:25 · Answer 18 · 2013-04-25 17:25

IE трюк для динамических форм:

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

5

Источник

user2320873 25 апр '13 в 17:25

user810673 22 июн '11 в 15:42 2011-06-22 15:42 · Answer 19 · 2011-06-22 15:42

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

Он будет публиковать данные формы на ваше имя файла через AJAX.

3

Источник

user810673 22 июн '11 в 15:42

user773595 14 ноя '11 в 10:27 2011-11-14 10:27 · Answer 20 · 2011-11-14 10:27

Вы можете сделать это так:

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

2

Источник

user773595 14 ноя '11 в 10:27

user357314 27 фев '11 в 19:38 2011-02-27 19:38 · Answer 21 · 2011-02-27 19:38

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

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

});

2

Источник

user357314 27 фев '11 в 19:38

user3210 29 июл '09 в 13:38 2009-07-29 13:38 · Answer 22 · 2009-07-29 13:38

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

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

-2

Источник

user3210 29 июл '09 в 13:38