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

Question

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

Answer 1

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

Важный ресурс, которым я пользуюсь каждый день, должен быть отмечен как Как работает jQuery . В нем есть учебники по использованию jQuery, а левая навигация дает доступ ко всей документации.

Примеры:

Normal

$('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() для обработки ошибок и т. Д.

Answer 2

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

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

Например:

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

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

Подробнее об этом можно узнать на веб-сайте Jquery .

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

Не как то так

<button name = "submit">

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

Answer 7

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

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

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

У меня есть хитрость, чтобы преобразовать данные формы в случайный метод

Answer 9

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

Answer 10

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

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