Надішліть форму за допомогою jQuery [закрито]

Я хочу надіслати форму за допомогою jQuery. Чи може хтось надати код, демонстраційну версію чи приклад посилання?

Це залежить від того, ви надсилаєте форму звичайно або через дзвінок 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()запиту для обробки помилок тощо.

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

Ви, як правило, називаєте це всередині функції.

Наприклад:

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

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

Ви можете отримати більше інформації про це на веб-сайті Jquery .

коли у вас є існуюча форма, вона тепер повинна працювати з 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'];

У jQuery я віддаю перевагу наступному:

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

Але знову ж таки, вам дійсно не потрібен jQuery для виконання цього завдання - просто використовуйте звичайний JavaScript:

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

З посібника: jQuery Doc

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

Для інформації,
якщо хтось використовує

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

Не роби щось подібне

<button name = "submit">

Минуло багато годин, щоб знайти, що подати () не працюватиме так.

Використовуйте його, щоб подати форму за допомогою 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>

це надішле форму з попереднім завантажувачем:

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

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

Дивіться події / подайте .

Зауважте, що якщо ви вже встановили слухач події подання для вашої форми, дзвінок інтернету для подання ()

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

не працюватиме, оскільки він намагається встановити нового слухача подій для події подання цієї форми (що не вдалося ). Отже, вам потрібно отримати доступ до самого елемента HTML (відстебнутись від jQquery) та зателефонувати надіслати () на цей елемент безпосередньо:

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

Ви також можете використовувати плагін форми jquery для надсилання за допомогою ajax aswell:

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

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

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

            **OR**

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

Зауважте, що в 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

Поки що рішення вимагають, щоб ви знали ідентифікатор форми.

Використовуйте цей код, щоб подати форму, не знаючи ідентифікатора:

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

Наприклад, якщо ви хочете обробити подію натискання кнопки, ви можете скористатися нею

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

Якщо кнопка розташована між тегами форми, я віддаю перевагу цій версії:

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

Ви можете використовувати його так:

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

АБО

document.formName.submit();

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

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

Мій підхід трохи інший. Змініть кнопку на кнопку подання, а потім натисніть кнопку

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

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

Він опублікує дані форми на вказане ім’я файлу через AJAX.

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

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

});

Ви можете зробити це так:

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

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

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