web-dev-qa-db-ja.com

jqueryサブミットフォームと既存のdivで結果を表示

私はシンプルな1つのテキスト入力フォームを持っています。送信すると、phpファイルを取得し（入力をファイルに渡す）、結果（テキストの行）を取得してdivに配置し、 divをフェードインします。

ここに私が持っているものがあります：

<form id=create method=POST action=create.php>
<input type=text name=url>
<input type="submit" value="Create" /> 

<div id=created></div>

必要なのは、divと呼ばれるcreatedに動的にロードされるcreate.php?url=INPUTの結果です。

Jqueryフォームスクリプトはありますが、正しく機能させることができませんでした。ただし、ライブラリ（ファイル）はロードされています。

javascriptjqueryhtmlajax
44
mrpatg

このコードはそれを行う必要があります。これほど簡単なものには、フォームプラグインは必要ありません。

$('#create').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#created').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
77
Paolo Bergantino

これはファイルのアップロードにも機能します

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {
            $('#created').html(data); //content loads here

        },
        error: function (xhr, desc, err)
        {
            console.log("error");

        }
    });        

});
6
Shaiful Islam

ページを更新したくない場合は、AJAXを使用してフォームを投稿する必要があります。

$('#create').submit(function () {
    $.post('create.php', $('#create').serialize(), function (data, textStatus) {
         $('#created').append(data);
    });
    return false;
});
2
RaYell