JQuery AJAX отправить форму

Question

У меня есть форма с именем orderproductForm и неопределенным количеством входов.

Я хочу сделать какой-нибудь jQuery.get или ajax или что-нибудь подобное, которое бы вызывало страницу через Ajax, и отправить все входные данные вида orderproductForm.

Полагаю, одним из способов было бы сделать что-то вроде

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

Однако я не знаю точно все формы ввода. Есть ли функция, функция или что-то, что просто отправило бы ВСЕ входные данные формы?

Answer 1

рассмотрите возможность использования closest

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

Answer 2

Вы можете использовать эту функцию для отправки, как показано ниже.

Форма HTML

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

Функция jQuery:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

Для более подробной информации и образца Посетите: http://www.spiderscode.com/simple-ajax-contact-form/

Answer 3

Если вы используете форму .serialize () - вам нужно дать каждому элементу формы имя, подобное этому:

<input id="firstName" name="firstName" ...

И форма сериализуется так:

firstName=Chris&lastName=Halcrow ...

Answer 4

Чтобы избежать отправки нескольких формданных:

Не забудьте отменить привязку события отправки до повторной отправки формы, Пользователь может вызывать функцию sumbit более одного раза, возможно, он что-то забыл или произошла ошибка проверки.

 $("#idForm").unbind().submit( function(e) {
  ....

Answer 5

Просто дружеское напоминание о том, что data тоже может быть объектом:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo',
            'bar': 'some-bar'
        }
    }).always(function (data) {
        console.log(data);
    });

    return false;
});

Answer 6

Это не ответ на вопрос ОП,
но в случае, если вы не можете использовать статическую форму DOM, вы можете попробовать вот так

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

Answer 7

Также есть событие submit, которое может быть вызвано следующим образом: $ ("# form_id"). Submit (). Вы бы использовали этот метод, если форма уже хорошо представлена ​​в HTML. Вы просто прочитали бы на странице, заполнили поля ввода данными, а затем вызвали .submit (). Он будет использовать метод и действие, определенные в объявлении формы, поэтому вам не нужно копировать его в свой javascript.

примеры