JQuery Ajax ফাংশনে ডেটা হিসাবে পুরো ফর্মটি পাস করুন

Question

আমার একটি jQuery এজাক্স ফাংশন রয়েছে এবং পোস্ট ডেটা হিসাবে পুরো ফর্মটি জমা দিতে চাই। আমরা ক্রমাগত ফর্মটি আপডেট করছি তাই অনুরোধে প্রেরিত হওয়া ফর্ম ইনপুটগুলি ক্রমাগত আপডেট করা ক্লান্তিকর হয়ে ওঠে।

Comments

মোম ফর্মডাটা () এবং চিত্রগুলি সম্পর্কে সঠিক। তবে আরও স্পষ্ট করার জন্য। এটি সিরিয়ালিয়াস কেবল স্ট্রিংগুলিতে কাজ করে (বাইনারি ডেটা নয়)। ফর্মডিটা () ফাংশন এমন ফর্মগুলির সাথে কাজ করে যা এনকোডিং টাইপটিকে "মাল্টিপার্ট / ফর্ম-ডেটা" এ সেট করে। বিশদগুলি এখানে: বিকাশকারী.মোজিলা.আর.ইন-

— জেমস কেনি

Answer 1

এখানে একটি ফাংশন রয়েছে যা হুবহু এটি করে:

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);

Comments

p। পোষ্ট এছাড়াও সাফল্যের উপর একটি ফাংশন কল করতে পারেন। p .পোস্ট ('url', ডেটা, ফাংশন () {....});

— slm

দ্রষ্টব্য: ফর্ম ক্ষেত্রগুলিতে নাম বিশিষ্ট সেট থাকতে হবে, কেবল আইডি ব্যবহার করে ডকুমেন্টেড হিসাবে কাজ করে না এবং আমি প্রথম হাতটি খুঁজে পেয়েছি।

— ল্যান্স ক্লিভল্যান্ড

একই নামের সাথে আমার কিছু ইনপুট কী দরকার ? মানে, সারিগুলিতে থাকার মতো? আমি কীভাবে এটি অ্যারে বা অন্য কিছুতে পাঠাতে পারি?

— ফ্রান্সিসকো মোরেলস

@ ফ্রেঞ্চিসকো কররেলস মোড়লস আপনার ইনপুটগুলির নাম এভাবে রাখুন:person[0].firstName person[0].lastName person[1].firstName person[1].lastName

— আহেমেরি

@ অহমেহরি, সুতরাং এটি কী একটি বৈধ এইচটিএমএল <input name="person[1].lastName">?

— ফ্রান্সিসকো মোরালেস

Answer 2

সিরিয়ালাইজ () পোস্টের পদ্ধতি সহ কোনও ফর্ম প্রেরণ করতে চাইলে ভাল ধারণা নয়। উদাহরণস্বরূপ আপনি যদি এজ্যাক্সের মাধ্যমে কোনও ফাইল পাস করতে চান তবে এটি কাজ করবে না।

মনে করুন যে এই আইডি সহ আমাদের একটি ফর্ম রয়েছে: "মাইফর্ম"।

আরও ভাল সমাধান হ'ল একটি ফর্মডাটা তৈরি করে এটি পাঠানো:

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

Comments

হ্যাঁ এটি আপডেট হওয়া ব্রাউজারগুলির দ্বারা সমর্থিত তবে সিরিয়ালযুক্ত ব্যবহার করে আপনি কেবল স্ট্রিংগুলি পাস করতে পারেন।

— মোহ আরজমন্ডি

হতে পারে আপনার

— উত্তরটিতে

২০১ both সালে var, উভয়ের জন্য আপনাকে ধন্যবাদ !

— সিলার

তুমি সৌন্দর্য!

— মোহন

এটি যথেষ্ট জোর দিতে পারে না! চেষ্টা করেছেন form.serialize()তবে ফাইল আপলোডের জন্য এটি কার্যকর হয়নি। new FormData(this)সুন্দরভাবে কাজ করেছেন

— সাসাঙ্কা পাঙ্গুলুরী

Answer 3

serialize()ফর্ম উপাদান ব্যবহার করে সাধারণভাবে ।

দয়া করে মনে রাখবেন যে একাধিক <সিলেক্ট> বিকল্পগুলি একই কী এর অধীনে ক্রমিক করা হয়, যেমন

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

একই ক্যোয়ারী প্যারামিটারের একাধিক উপস্থিতি অন্তর্ভুক্ত একটি ক্যোয়ারী স্ট্রিংয়ের ফলাফল করবে:

[path]?foo=1&foo=2&foo=3&someotherparams...

যা আপনি ব্যাকএন্ডে চান তা নাও হতে পারে।

আমি এই জেএস কোডটি একাধিক পরামিতি কমা-বিচ্ছিন্ন একক কীতে হ্রাস করতে ব্যবহার করেছি (জন রেসিগের জায়গায় একটি থ্রেডে মন্তব্যকারীর প্রতিক্রিয়া থেকে নির্লজ্জভাবে অনুলিপি করা হয়েছে):

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

যা উপরোক্তগুলিকে রূপান্তরিত করে:

[path]?foo=1,2,3&someotherparams...

আপনার জেএস কোডে আপনি এটিকে এটি কল করবেন:

var inputs = compress($("#your-form").serialize());

আশা করি এইটি কাজ করবে.

Comments

: আপনি পিএইচপি ব্যবহার করে থাকেন এটা তুচ্ছ parse_url ফাংশন ব্যবহার করে একটি querystring বিশ্লেষণ করতে হয় us3.php.net/manual/en/function.parse-url.php

— Lobos আপনার

আমি জানি এটি পুরানো তবে আপনি কীভাবে জানবেন যে এই পদ্ধতিটি ব্যবহার করে কোন বিকল্পগুলি নির্বাচন করা হয়েছিল?

— yardpenalty.com

Answer 4

ব্যবহার

সিরিয়ালাইজ ()

var str = $("form").serialize();

কোনও প্রশ্নের স্ট্রিংয়ে একটি ফর্মটি সিরিয়াল করুন, এটি একটি অ্যাজাক্স অনুরোধে একটি সার্ভারে প্রেরণ করা যেতে পারে।

Answer 5

এই কাজ করতে একটি ভাল jQuery এর বিকল্প মাধ্যমে হয় FormData । কোনও ফর্মের মাধ্যমে ফাইল প্রেরণের সময় এই পদ্ধতিটিও উপযোগী!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

JQuery এ আপনার প্রেরণ ফাংশনটি দেখতে এইরকম হবে:

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

আপনার ফর্মটিতে ডেটা যুক্ত করতে আপনি হয় আপনার ফর্মটিতে একটি লুকানো ইনপুট ব্যবহার করতে পারেন, বা আপনি উড়তে যোগ করতে পারেন:

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

Comments

url: $(this).attr('action'),পরিবর্তে ফর্ম ব্যবহারের "ক্রিয়া" বৈশিষ্ট্য থেকে url নিষ্কাশন করতে

— 6o

Answer 6

আপনাকে কেবল ডেটা পোস্ট করতে হবে। এবং jquery আজাক্স ফাংশন সেট পরামিতি ব্যবহার করে। এখানে একটি উদাহরণ।

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

Answer 7

অন্যান্য সমাধানগুলি আমার পক্ষে কার্যকর হয়নি। সম্ভবত আমি যে প্রকল্পে কাজ করছি তাতে পুরানো ডিওসিটিইপিই HTML5 বিকল্পগুলি প্রতিরোধ করে preven

আমার সমাধান:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

JS:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}