Modulo di invio jQuery AJAX

Ho un modulo con nome orderproductForm e un numero indefinito di input.

Voglio fare una specie di jQuery.get o ajax o qualcosa di simile che chiami una pagina tramite Ajax, e invii tutti gli input del modulo orderproductForm.

Suppongo che un modo sarebbe quello di fare qualcosa come

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

Tuttavia non conosco esattamente tutti gli input del modulo. C'è una caratteristica, una funzione o qualcosa che mandi semplicemente TUTTI gli input del modulo?

Questo è un semplice riferimento:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

});

Spero che ti aiuti.

Commentari (20)
Soluzione

Puoi usare le funzioni ajaxForm/ajaxSubmit di Ajax Form Plugin o la funzione jQuery serialize.

AjaxForm:

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

o

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm invia quando il pulsante di invio viene premuto. ajaxSubmit invia immediatamente.

Serializzare:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

La documentazione sulla serializzazione AJAX è qui.

Commentari (9)

C'è anche l'evento submit, che può essere attivato come questo $("#form_id").submit(). Si usa questo metodo se il modulo è già ben rappresentato in HTML. Dovresti semplicemente leggere la pagina, popolare gli input del modulo con delle cose, poi chiamare .submit(). Userà il metodo e l'azione definiti nella dichiarazione del modulo, quindi non c'è bisogno di copiarli nel tuo javascript.

esempi

Commentari (3)