Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

Например:

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

  • вставьте на событие 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 является "переменным именем" в вашем json.

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

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

Ответ 5

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

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

Ответ 6

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

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

Не как то так

<button name = "submit">

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

Ответ 7

это отправит форму с предварительным загрузчиком:

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

Ответ 8

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

Ответ 9

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

Ответ 11

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

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

Ответ 12

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

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

            **OR**

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

Ответ 13

Обратите внимание, что в 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 @fooobar.com/questions/19417/...

Ответ 14

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

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

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

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

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

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

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

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

ИЛИ

document.formName.submit();

Ответ 18

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

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

Ответ 19

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

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

Ответ 20

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

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

});

Ответ 21

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

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

Ответ 22

$( 'form' ).on( 'submit' , () => { // arrow function
    console.log( $( this ) ); // form
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.js"></script>

<form>
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>

Ответ 23

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

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