Ik heb een formulier met de naam orderproductFormen een ongedefinieerd aantal invoer.
Ik wil een soort jQuery.get of ajax of iets dergelijks doen dat een pagina via Ajax zou oproepen, en alle invoer van het formulier orderproductFormmeezenden.
Ik veronderstel dat een manier zou zijn om iets te doen als
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
Ik weet echter niet precies alle formulierinvoer. Is er een functie, functie of iets dat ALLE formulierinvoer zou verzenden?
Antwoord 1, autoriteit 100%
U kunt de ajaxForm/ajaxSubmit-functies van Ajax Form Pluginof de jQuery serialize-functie gebruiken .
AjaxForm:
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
of
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
ajaxForm wordt verzonden wanneer op de verzendknop wordt gedrukt. ajaxSubmit verzendt onmiddellijk.
Serialiseren:
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
AJAX-documentatie over serialisatie vindt u hier.
Antwoord 2, autoriteit 96%
Dit is een eenvoudige referentie:
// 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.
}
});
});
Antwoord 3, autoriteit 56%
Een andere vergelijkbare oplossing die attributen gebruikt die zijn gedefinieerd op het formulierelement:
<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>
Antwoord 4, autoriteit 21%
Er zijn een paar dingen waar u rekening mee moet houden.
1. Er zijn verschillende manieren om een formulier in te dienen
- met de verzendknop
- door op enter te drukken
- door een verzendgebeurtenis in JavaScript te activeren
- mogelijk meer, afhankelijk van het apparaat of het toekomstige apparaat.
We moeten daarom binden aan de form submission-gebeurtenis, niet aan de button click-gebeurtenis. Dit zorgt ervoor dat onze code nu en in de toekomst op alle apparaten en ondersteunende technologieën werkt.
2. Hijax
De gebruiker heeft mogelijk geen JavaScript ingeschakeld. Een hijax-patroon is hier goed, waarbij we voorzichtig de controle over het formulier overnemen met JavaScript, maar het indienbaar laten als JavaScript mislukt.
We moeten de URL en methode uit het formulier halen, dus als de HTML verandert, hoeven we JavaScript niet bij te werken.
3. Onopvallend JavaScript
Het is een goede gewoonte om event.preventDefault()te gebruiken in plaats van return false, omdat het de gebeurtenis de kans geeft om op te borrelen. Hierdoor kunnen andere scripts aan de gebeurtenis worden gekoppeld, bijvoorbeeld analysescripts die gebruikersinteracties kunnen monitoren.
Snelheid
We zouden idealiter een extern script moeten gebruiken in plaats van ons script inline in te voegen. We kunnen hiernaar linken in het hoofdgedeelte van de pagina met behulp van een scripttag, of er onderaan de pagina naartoe linken voor snelheid. Het script moet de gebruikerservaring stilletjes verbeteren, niet in de weg zitten.
Code
Ervan uitgaande dat u akkoord gaat met al het bovenstaande, en u de indieningsgebeurtenis wilt opvangen en deze via AJAX (een hijaxpatroon) wilt afhandelen, kunt u zoiets als dit doen:
$(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...
});
});
});
U kunt op elk gewenst moment handmatig een formulierinzending activeren via JavaScript met iets als:
$(function() {
$('form.my_form').trigger('submit');
});
Bewerken:
Ik moest dit onlangs doen en heb uiteindelijk een plug-in geschreven.
(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)
Voeg een data-autosubmit-kenmerk toe aan uw formuliertag en u kunt dan dit doen:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});
Antwoord 5, autoriteit 6%
U kunt ook FormDatagebruiken (maar niet beschikbaar in 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)}
});
Hiermee gebruik je formdata .
6, Autoriteit 3%
Deze code werkt zelfs met bestandsinvoer
$(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)
{
}
});
});
7
Ik heb het volgende voor mij:
formSubmit('#login-form', '/api/user/login', '/members/');
waar
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();
});
}
Hieronder gaat de post aan op ‘URL’ geeft een AJAX terug in de vorm van {success: false, error:'my Error to display'}
je kunt dit variëren zoals je wilt. Voel je vrij om dat fragment te gebruiken.
8
JQuery Ajax Verzend formulier , is niets anders dan een formulier in met het formulier-ID wanneer u op een knop
klikt
Volg de stappen
Stap 1 – Formulier Tag moet een ID-veld hebben
<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>
-knop die u gaat klikken
<button>Save</button>
Stap 2 – submitevenement bevindt zich in jQuery, wat helpt bij het indienen van een formulier. in onderstaande code bereiden we een JSON-verzoek voor van HTML-element 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);
}
});
});
klik voor live demo op onderstaande link
Hoe een formulier indienen met jQuery AJAX?
Antwoord 9
Ik weet dat dit een jQuery-gerelateerde vraag is, maar tegenwoordig is het met JS ES6 veel eenvoudiger. Aangezien er geen puur javascript-antwoord is, dacht ik dat ik hier een eenvoudige pure javascript-oplossing aan kon toevoegen, die naar mijn mening veel schoner is, door de fetch()-API. Dit is een moderne manier om netwerkverzoeken te implementeren. In jouw geval, aangezien je al een formulierelement hebt, kunnen we het gewoon gebruiken om ons verzoek op te bouwen.
const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input");
let formData = new FormData();
for (let input of formInputs) {
formData.append(input.name, input.value);
}
fetch(form.action,
{
method: form.method,
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error.message))
.finally(() => console.log("Done"));
10
Probeer
fetch(form.action,{method:'post', body: new FormData(form)});
11
Overweeg het gebruik van 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();
});
12
U kunt dit gebruiken op Dient-functie zoals hieronder.
HTML-formulier
<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-functie:
<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>
Voor meer details en voorbeelden Bezoek:
http://www.spiderscode.com/simple-ajax-contact-form/
Antwoord 13
Om meerdere verzendingen van formuliergegevens te voorkomen:
Vergeet niet de binding voor het indienen van het evenement te ontbinden, voordat het formulier opnieuw wordt ingediend,
De gebruiker kan de sumbit-functie meer dan één keer aanroepen, misschien is hij iets vergeten of was er een validatiefout.
$("#idForm").unbind().submit( function(e) {
....
Antwoord 14
Als u form.serialize() gebruikt, moet u elk formulierelement een naam geven zoals deze:
<input id="firstName" name="firstName" ...
En het formulier wordt als volgt geserialiseerd:
firstName=Chris&lastName=Halcrow ...
Antwoord 15
Dit is niet het antwoord op de vraag van OP,
maar als je de statische vorm DOM niet kunt gebruiken, kun je het ook zo proberen.
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);
}
}
});
Antwoord 16
JavaScript
(function ($) {
var form= $('#add-form'),
input = $('#exampleFormControlTextarea1');
form.submit(function(event) {
event.preventDefault();
var req = $.ajax({
url: form.attr('action'),
type: 'POST',
data: form.serialize()
});
req.done(function(data) {
if (data === 'success') {
var li = $('<li class="list-group-item">'+ input.val() +'</li>');
li.hide()
.appendTo('.list-group')
.fadeIn();
$('input[type="text"],textarea').val('');
}
});
});
}(jQuery));
HTML
<ul class="list-group col-sm-6 float-left">
<?php
foreach ($data as $item) {
echo '<li class="list-group-item">'.$item.'</li>';
}
?>
</ul>
<form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
<p class="form-group">
<textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
</p>
<button type="submit" class="btn btn-danger">Add new item</button>
</form>
Antwoord 17
Ik vind het verrassend dat niemand dataals object noemt. Voor mij is het de schoonste en gemakkelijkste manier om gegevens door te geven:
$('form#foo').submit(function () {
$.ajax({
url: 'http://foo.bar/some-ajax-script',
type: 'POST',
dataType: 'json',
data: {
'foo': 'some-foo-value',
'bar': $('#bar').val()
}
}).always(function (response) {
console.log(response);
});
return false;
});
Dan, in de backend:
// Example in PHP
$_POST['foo'] // some-foo-value
$_POST['bar'] // value in #bar
Antwoord 18
Er is ook de submit-gebeurtenis, die als volgt kan worden geactiveerd $(“#form_id”).submit(). U zou deze methode gebruiken als het formulier al goed in HTML is weergegeven. Je zou gewoon de pagina lezen, de formulierinvoer vullen met dingen en vervolgens .submit() aanroepen. Het gebruikt de methode en actie die zijn gedefinieerd in de declaratie van het formulier, dus u hoeft het niet naar uw javascript te kopiëren.