كيفية الحصول على كل المدخلات في إستمارة 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

علي عبد محسن

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية