كيفية الحصول على كل المدخلات في إستمارة Form بإستعمال jQuery؟

Emad Saif · 8 سبتمبر 2022

لدي إستمارة تحتوي على الكثير من المدخلات (أكثر من 10 مدخلات)، وأريد الحصول على كل البيانات في هذه الإستمارة لإرسالها عبر Ajax:

<form>
    <input type="radio" name="active" value="1" checked="checked" />
    <input type="radio" name="active" value="0" />
    <input name="title" type="text" />
    <input name="subtitle" type="text" />
  	....
</form>

هل توجد طريقة للحصول على كل البيانات دفعة واحدة بدلًا من تحديد كل عنصر على حدى والحصول على القيمة المدخله فيه value يدويًا؟ بحيث يكون شكل البيانات في النهاية كالتالي:

{
    "active": "1",
    "title": "some text",
    "subtitle": "Hello, World!"
  ...
}

Adnane Kadri · 8 سبتمبر 2022

يمكنك استعمال التابع serializeArray لتحليل كامل المدخلات واعدادها في مصفوفة كائنات.

<form>
    <input type="radio" name="active" value="1" checked="checked" />
    <input type="radio" name="active" value="0" />
    <input name="title" type="text" />
    <input name="subtitle" type="text" />
</form>

<button onclick="getData()">
get data
</button>

شيفرة الجافاسكربت:

function getData(){
    var data = $('form').serializeArray();
    
    console.log(data)
}

الناتج:

[{
    name: "active",
    value: "1"
}, {
    name: "title",
    value: "TITLE VALUE"
}, {
    name: "subtitle",
    value: "SUBTITLE VALUE"
}]

يمكنك انشاء ازواج key-value انطلاقا من قيمة واسم كل حقل عن طريق المرور حول كل كائن من المصفوفة من الناتج. يكون المنطق العملية مشابها لـ:

function getData(){
    var data = {};
    var dataArray = $('form').serializeArray();
  
    for(var i=0; i < dataArray.length ; i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    
    console.log(data)
}

الناتج:

{
  active: "1",
  subtitle: "SUBTITLE VALUE",
  title: "TITLE VALUE"
}

jQuery

علي عبد محسن · 8 سبتمبر 2022

يمكنك ذلك لحظة عمل submit لل form طالما أن الحقول المطلوب الحصول على بياناتها داخل وسم الفورم وكما يلي في المثال:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var formData={} // نعرف كائن نخزن فيه البيانات 
  $("form").submit(function(e){ //نقوم بالتنصت على النموذج 
    e.preventDefault(); // هنا نمنع الإجراء الإفتراضي للعنصر وهو إرسال محتويات النموذج مباشرة حتى نتمكن من إرسال البيانات عبر أيجاكس
    var x = $("form").serializeArray(); // من خلال هذه الدالة نحول البيانات الى صيغة مصفوفة تحتوي على كائنات فيها قيمة إسم الحقل والقيمة المسندة له
    $.each(x, function(i, field) { // نمر على  عناصر المصفوفة المستخرجة أعلاه 
        formData[field.name]=field.value // نخزن البيانات في الكائن مسبق التعريف
    });
    
    console.log("formData", formData) // => {FirstName: 'Mickey', LastName: 'Mouse'}
    //  هنا يمكنك التعامل مع البيانات والتعديل عليها قبل إرسالها الى الخادم مثلا
    // إستدعاء ajax هنا
    // Ajax comes here..
   })
});
</script>
</head>
<body>
  <form action="">
    First name: <input type="text" name="FirstName" value="Mickey"><br>
    Last name: <input type="text" name="LastName" value="Mouse"><br>
    <input type="submit" value="Submit">
  </form> 
</body>
</html>

كيفية الحصول على كل المدخلات في إستمارة Form بإستعمال jQuery؟

السؤال

Emad Saif

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

علي عبد محسن

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية