Emad Saif نشر 8 سبتمبر 2022 أرسل تقرير مشاركة نشر 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!" ... } 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Adnane Kadri نشر 8 سبتمبر 2022 أرسل تقرير مشاركة نشر 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 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 علي عبد محسن نشر 8 سبتمبر 2022 أرسل تقرير مشاركة نشر 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> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Emad Saif
لدي إستمارة تحتوي على الكثير من المدخلات (أكثر من 10 مدخلات)، وأريد الحصول على كل البيانات في هذه الإستمارة لإرسالها عبر Ajax:
هل توجد طريقة للحصول على كل البيانات دفعة واحدة بدلًا من تحديد كل عنصر على حدى والحصول على القيمة المدخله فيه value يدويًا؟ بحيث يكون شكل البيانات في النهاية كالتالي:
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.