名前orderproductFormと未定義の入力数を持つフォームがあります。
Ajaxを介してページを呼び出し、フォームのすべての入力に沿って送信するような、何らかのjQuery.getやajaxなどを実行したいと考えていますorderproductForm。
私は1つの方法が次のようなことになると思います
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
ただし、すべてのフォーム入力を正確に知っているわけではありません。すべてのフォーム入力を送信するだけの機能、機能などはありますか？
回答:
Ajax Form PluginのajaxForm / ajaxSubmit関数またはjQueryシリアライズ関数を使用できます。
AjaxForm：
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})または
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})ajaxFormは、送信ボタンが押されたときに送信されます。ajaxSubmitはすぐに送信します。
シリアライズ：
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
これは簡単なリファレンスです：
// 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.
}
});
});
お役に立てば幸いです。
type: $(this).attr('method')を使用する場合にも使用できmethodます。
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>
get現在のURLになります。この仮定をコードに追加することで対処できます。
覚えておくべきことがいくつかあります。
1.フォームを送信する方法はいくつかあります
したがって、ボタンクリックイベントではなく、フォーム送信イベントにバインドする必要があります。これにより、現在および将来のすべてのデバイスと支援技術でコードが機能するようになります。
2. Hijax
ユーザーがJavaScriptを有効にしていない可能性があります。hijaxのパターンは、私たちは優しくJavaScriptを使用して、フォームのコントロールを取るが、JavaScriptが失敗した場合submittableそれを残す場合は、ここで良いです。
フォームからURLとメソッドをプルする必要があるため、HTMLが変更された場合でも、JavaScriptを更新する必要はありません。
3.邪魔にならないJavaScript
falseを返す代わりにevent.preventDefault（）を使用すると、イベントが発生しやすくなるので、良い方法です。これにより、ユーザーインタラクションを監視している分析スクリプトなど、他のスクリプトをイベントに結び付けることができます。
速度
スクリプトをインラインで挿入するのではなく、外部スクリプトを使用するのが理想的です。ページのヘッドセクションでスクリプトタグを使用してリンクするか、ページ下部にリンクしてスピードを上げることができます。スクリプトは、邪魔にならないように静かにユーザーエクスペリエンスを向上させる必要があります。
コード
上記のすべてに同意し、送信イベントをキャッチし、AJAX（hijaxパターン）を介して処理したい場合、次のようなことができます。
$(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...
});
});
});
次のようなものを使用して、JavaScript経由でいつでも手動でフォーム送信をトリガーできます。
$(function() {
$('form.my_form').trigger('submit');
});
編集：
私は最近これをしなければならず、結局プラグインを書いてしまいました。
(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)
data-autosubmit属性をフォームタグに追加すると、次のようになります。
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
$(function() {
$('form[data-autosubmit]').autosubmit();
});
FormDataを使用することもできます（ただし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)}
});
これがFormDataの使い方です。
<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>
Alfrekjvの答えの修正版です
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)
}
});
}
});
私はAlfrekjvの回答を編集したかったのですが、あまりに逸脱しているため、これを別の回答として投稿することにしました。
ファイルを送信せず、ボタンをサポートしません。たとえば、ボタン（送信ボタンを含む）をクリックすると、その値がフォームデータとして送信されますが、これはajaxリクエストであるため、ボタンクリックは送信されません。
ボタンをサポートするために、送信の代わりに実際のボタンクリックをキャプチャできます。
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);
}
});
}
});サーバー側では、jquery
がphpに設定するこのヘッダーを使用してajaxリクエストを検出できますHTTP_X_REQUESTED_WITH
PHP
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//is ajax
}このコードはファイル入力でも機能します
$(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)
{
}
});
});Array.from(new FormData(form))このformdataイテレータを反復します:)
私は超解答者によるこの答えを本当に気に入りました、そして特に彼がラップした方法はjQueryプラグインの解決策です。とても便利な答えをくれたsuperluminaryに感謝します。しかし私の場合、プラグインの初期化時にオプションを使用して成功およびエラーイベントハンドラーを定義できるプラグインが必要でした。
だからここに私が思いついたものがあります：
;(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);このプラグインにより、ページ上のHTMLフォームを非常に簡単に「ajaxify」し、フォーム送信のステータスのフィードバックをユーザーに実装するためのonsubmit、成功、およびエラーイベントハンドラーを提供できます。これにより、プラグインを次のように使用できるようになりました。
$('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
}
});成功およびエラーイベントハンドラは、jQuery ajaxメソッドの対応するイベントから受け取るのと同じ引数を受け取ることに注意してください。
私は次のものを手に入れました：
formSubmit('#login-form', '/api/user/login', '/members/');どこ
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();
});
}これは、「url」への投稿がajaxを次の形式で返すことを前提としています。 {success: false, error:'my Error to display'}
これは好きなように変えることができます。そのスニペットを自由に使用してください。
targetここは何ですか？新しいページにリダイレクトするためだけに、AJAXでフォームを送信するのはなぜですか？
jQuery AJAX submit formは、ボタンをクリックしたときにフォームIDを使用してフォームを送信するだけです
手順に従ってください
ステップ1-フォームタグにはIDフィールドが必要です
<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>クリックするボタン
<button>Save</button>ステップ2- 送信イベントはjQueryにあり、フォームの送信に役立ちます。以下のコードでは、HTML要素名からのJSONリクエストを準備しています。
$("#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);
}
});
});ライブデモについては、下のリンクをクリックしてください
使用を検討 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関連する質問であることはわかっていますが、現在、JS ES6を使用する方がはるかに簡単です。純粋なjavascript答えはないのでjavascript、fetch()API を使用することで、これに単純な純粋なソリューションを追加できると思いました。これは、ネットワーク要求を実装するための最新の方法です。あなたの場合、あなたはすでにフォーム要素を持っているので、それを使ってリクエストを作成することができます。
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"));以下のような送信機能でこれを使用できます。
HTMLフォーム
<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関数：
<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>詳細とサンプル訪問については、http： //www.spiderscode.com/simple-ajax-contact-form/をご覧ください。
これはOPの質問に対する回答ではありませんが、
静的フォームDOMを使用できない場合は、このように試すこともできます。
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);
}
}
});dataオブジェクトにすることもできるフレンドリーなリマインダー：
$('form#foo').submit(function () {
$.ajax({
url: 'http://foo.bar/some-ajax-script',
type: 'POST',
dataType: 'json',
data: {
'foo': 'some-foo',
'bar': 'some-bar'
}
}).always(function (data) {
console.log(data);
});
return false;
});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>この$（ "＃form_id"）。submit（）のようにトリガーできるsubmitイベントもあります。フォームがすでにHTMLで適切に表現されている場合は、このメソッドを使用します。あなたは単にページを読んで、フォーム入力に何かを入力してから、.submit（）を呼び出します。フォームの宣言で定義されたメソッドとアクションを使用するため、JavaScriptにコピーする必要はありません。