jQuery AJAX submeter o formulário
tenho um formulário com nome orderproductForm
e um número indefinido de entradas.
orderproductForm
.
Acho que uma maneira seria fazer algo como ...
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
No entanto, não sei exactamente todas as entradas do formulário. Existe algum recurso, função ou algo que apenas enviar todo o formulário entradas?
15 answers
Pode usar as funções ajaxForm / ajaxSubmit de o 'plugin' de formulário Ajax ou a função serialize jQuery.
AjaxForm:
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
Ou
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
O AjaxForm envia quando carregar no botão enviar. ajaxSubmit envia imediatamente.
Serializar:
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
Esta é uma referência simples:
// this is the id of the form
$("#idForm").submit(function(e) {
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.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
Espero que te ajude.
Outra solução semelhante utilizando atributos definidos no elemento form:
<form id="contactForm1" action="/your_url" method="post">
<!-- Form input fields here (do not forget your name attributes). -->
</form>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
});
</script>
1. Existem várias maneiras de enviar um Formulário
- usando o botão enviar
- pressionando enter
- desencadeando um evento submit no JavaScript
- possivelmente mais dependendo do dispositivo ou do dispositivo futuro.
Devemos, portanto, ligar-nos ao formulário submeter evento, não ao evento botão clicar em evento. Isto irá garantir que o nosso código funciona em todos os dispositivos e assistência tecnologias agora e no futuro.
2. Hijax.
O Utilizador pode não ter o JavaScript activo. Um padrão hijax é bom aqui, onde tomamos suavemente o controle do formulário usando JavaScript, mas deixá-lo submisso se JavaScript falhar.
Devemos extrair a URL e o método do formulário, por isso, se o HTML mudar, não precisamos de actualizar o JavaScript.
3. JavaScript Discreto
Usando o evento.preventDefault () instead de devolver falso é uma boa prática, pois permite que o evento aumente de bolhas. Isto permite que outros scripts se conectem ao evento, por exemplo scripts analíticos que podem estar monitorando interações do Usuário.
Velocidade
O ideal seria usar um script externo, em vez de inserir o nosso script na linha. Podemos ligar para isso na seção cabeça da página usando uma tag script, ou link para ele na parte inferior da página para velocidade. O script deve melhorar silenciosamente a experiência do Usuário, não atrapalhar.
Código
Assumindo que concordas com tudo o que precede, e que queres apanhar o evento de envio, e lidar com ele através do AJAX( um padrão hijax), podes fazer algo do género:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
Você pode activar manualmente um envio de formulários sempre que quiser através de JavaScript usando algo como:
$(function() {
$('form.my_form').trigger('submit');
});
Editar:
Recentemente tive de fazer isto e acabei por escrever um plugin.
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
Adicione um atributo data-autosubmit ao seu formulário tag e você pode então fazer isso:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});
Também pode utilizar FormData (mas não disponível no IE):
var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector
$.ajax({
type: "POST",
url: "yourURL",// where you wanna post
data: formData,
processData: false,
contentType: false,
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage); // Optional
},
success: function(data) {console.log(data)}
});
É assim que se usa FormData .
A versão simples (não envia imagens)
<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
(function($){
$("body").on("submit", ".my-form", function(e){
e.preventDefault();
var form = $(e.target);
$.post( form.attr("action"), form.serialize(), function(res){
console.log(res);
});
});
)(jQuery);
</script>
Copiar e colar ajaxificação de uma forma ou de todas as formas numa página
É uma versão modificada da resposta de Alfrekjv.- funcionará com jQuery > = 1.3.2
- podes executar isto antes que o documento esteja pronto
- você pode remover e voltar a adicionar o formulário e ele ainda vai funcionar
- será afixado no mesmo local que o formulário normal, especificado em a "acção"do formulário atributo
JavaScript
jQuery(document).submit(function(e){
var form = jQuery(e.target);
if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
e.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(), // serializes the form's elements.
success: function(data) {
console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
}
});
}
});
Eu queria editar a resposta do Alfrekjv, mas desviei-me demasiado dela e decidi postar isto como uma resposta separada.
Não envia ficheiros, não suporta botões, por exemplo se carregar num botão (incluindo um botão enviar) envia o seu valor como dados do formulário, mas como este é um pedido ajax, o botão não será enviado.
Para suportar os botões, poderá capturar o botão actual, carregue em vez do botão enviar.
jQuery(document).click(function(e){
var self = jQuery(e.target);
if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
e.preventDefault();
var form = self.closest('form'), formdata = form.serialize();
//add the clicked button to the form data
if(self.attr('name')){
formdata += (formdata!=='')? '&':'';
formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
}
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: formdata,
success: function(data) {
console.log(data);
}
});
}
});
Do lado do servidor, você pode detectar um pedido ajax com este cabeçalho que o jquery define HTTP_X_REQUESTED_WITH
para php
PHP
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//is ajax
}
Este código funciona mesmo com a entrada de ficheiros
$(document).on("submit", "form", function(event)
{
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
},
error: function (xhr, desc, err)
{
}
});
});
Eu realmente gostei desta resposta por superluminário {[[5]} e especialmente a forma como ele embrulhou é a solução em umjQuery plugin. Por isso, obrigado à superluminação por uma resposta muito útil. No meu caso, porém, eu queria um plugin que me permita definir o a sucesso e erro manipuladores de eventos por meio de opções quando o plugin é inicializado.
Então, eis o que descobri:;(function(defaults, $, undefined) {
var getSubmitHandler = function(onsubmit, success, error) {
return function(event) {
if (typeof onsubmit === 'function') {
onsubmit.call(this, event);
}
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function() {
if (typeof success === 'function') {
success.apply(this, arguments);
}
}).fail(function() {
if (typeof error === 'function') {
error.apply(this, arguments);
}
});
event.preventDefault();
};
};
$.fn.extend({
// Usage:
// jQuery(selector).ajaxForm({
// onsubmit:function() {},
// success:function() {},
// error: function() {}
// });
ajaxForm : function(options) {
options = $.extend({}, defaults, options);
return $(this).each(function() {
$(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
});
}
});
})({}, jQuery);
Este plugin permite-me muito facilmente formulários html" ajaxify " na página e fornecer onsubmit, success and error {[[9]} event handlers for implementing feedback to the user of the status of the form submit. Isto permitiu que o plugin fosse usado do seguinte modo:
$('form').ajaxForm({
onsubmit: function(event) {
// User submitted the form
},
success: function(data, textStatus, jqXHR) {
// The form was successfully submitted
},
error: function(jqXHR, textStatus, errorThrown) {
// The submit action failed
}
});
Note que a sucesso e erro manipuladores de eventos recebe os mesmos argumentos que você receberia dos eventos correspondentes do jQuery ajax método.
formSubmit('#login-form', '/api/user/login', '/members/');
Em que
function formSubmit(form, url, target) {
$(form).submit(function(event) {
$.post(url, $(form).serialize())
.done(function(res) {
if (res.success) {
window.location = target;
}
else {
alert(res.error);
}
})
.fail(function(res) {
alert("Server Error: " + res.status + " " + res.statusText);
})
event.preventDefault();
});
}
Isto assume que o post para ' url ' devolve um ajax na forma de {success: false, error:'my Error to display'}
Considere a utilização de {MM / AAAA}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();
});
JQuery AJAX submit form , não é mais do que enviar um formulário usando o ID do formulário quando você clicar em um botão
Por favor, siga os passos
A etiqueta do Passo 1 deve ter um campo ID
<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>
Botão em que vai clicar
<button>Save</button>
Passo 2 - submeter o evento está no jQuery que ajuda a enviar um formulário. em baixo Código, estamos a preparar o pedido JSON do elemento HTML name .
$("#submitForm").submit(function(e) {
e.preventDefault();
var frm = $("#submitForm");
var data = {};
$.each(this, function(i, v){
var input = $(v);
data[input.attr("name")] = input.val();
delete data["undefined"];
});
$.ajax({
contentType:"application/json; charset=utf-8",
type:frm.attr("method"),
url:frm.attr("action"),
dataType:'json',
data:JSON.stringify(data),
success:function(data) {
alert(data.message);
}
});
});
Para a demonstração ao vivo, clique em baixo link
Para evitar múltiplos formdata envia:
Não se esqueça de separar o evento de envio, antes que o formulário volte a ser enviado., O usuário pode chamar a função sumbit mais de uma vez, talvez ele se esqueceu de algo, ou foi um erro de validação. $("#idForm").unbind().submit( function(e) {
....
Se estiver a utilizar o Formulário .serialize () - você precisa dar a cada elemento do formulário um nome como este:
<input id="firstName" name="firstName" ...
E o formulário é serializado assim:
firstName=Chris&lastName=Halcrow ...
Pode usar isto na função submit como em baixo.
HTML Form
<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>
Função 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>
Para mais detalhes e visita de amostras: http://www.spiderscode.com/simple-ajax-contact-form/
Existe também o evento submit, que pode ser despoletado como este $("#form_id").enviar(). Você usaria este método se o formulário já estiver bem representado em HTML. Lia-se na página, preenchia-se o formulário com coisas e ligava-se .enviar(). Ele vai usar o método e ação definidos na declaração do formulário, para que você não precisa copiá-lo em seu javascript.