اذهب إلى المحتوى
  • 0

كيف يمكن برمجة وظيفتين مختلفتين ل 2 من الازرار في form واحدة jQuery

محمد المصري12

بواسطة محمد المصري12

 مشاركة

السؤال

محمد المصري12 عضو نشيط

محمد المصري12

نشر
نشر

سلام عليكم

ببساطة عندي فورم تعديل بيانات كالتالي 

<form class="needs-validation-thread" action="javascript:added(); return false;" novalidate>

و قمت بعمل الازرار كالتالي 

<button class="btn btn-success center-submit m7md1 size19" type="update">تحديث البيانات</button>
<button class="btn btn-danger center-submit m7md1 size19" type="submit">إضافة كجديد</button>

امر ال jQuery لتنفيذ اوامر زر التحديث انا حاططها بملف اسمه  

updateThread.php

 و مضمنه كالتالي 

<?php require (ROOT  ."/includes/js/updateThread.php"); ?>

و امر تنفيذ الاضافة موجود في ملف اسمه addThread.js و مضمنه كالتالي 

<script src="./includes/js/addThread.js">

كيف يمكن اعطاء الاوامر للفورم انه في حال الضغط على زر تحديث خذ تعليماتك و نفذ المطلوب من خلال ملف updateThread.php و هي كالتالي 

<script>//        thread
(function() {

'use strict';

window.addEventListener('load', function() {

var forms = document.getElementsByClassName('needs-validation-thread');

var validation = Array.prototype.filter.call(forms, function(form) {

form.addEventListener('submit', function(event) {

// console.log(form.reportValidity());

if (form.checkValidity() === false) {

event.preventDefault();

event.stopPropagation();

} else {

var form_data = new FormData();


var name = $(".name").val(),

fiber = $(".fiber-thread").val(),

num = $(".num-thread").val(),

color = $(".degree-code[data='thread']").val(),

pantone = $(".panton-code[data='thread']").val(),

height = $(".height-thread").val(),

weight = $(".weight-thread").val(),

factory = $(".factory-thread").val(),

tprice = $(".tPrice-thread").val(),

mprice = $(".mPrice-thread").val();

var file_data = $(".thread-image").prop('files')[0];

form_data.append('type', "updatethread");
form_data.append('id', <?php echo $id; ?>);
form_data.append('name', name);
form_data.append('fiber', fiber);
form_data.append('num', num);
form_data.append('color', color);
form_data.append('pantone', pantone);
form_data.append('height', height);
form_data.append('weight', weight);
form_data.append('factory', factory);
form_data.append('tprice', tprice);
form_data.append('mprice', mprice);
form_data.append('image', file_data);

//console.log(form_data);


$.ajax({

url: "functions/addAccessories.php",

dataType: 'text',

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

success: function(data) {

if (data == "done") {

Swal.fire({

icon: 'success',

title: 'عمل رائع - تم التعديل ينجاح',

confirmButtonText: 'موافق',

showCloseButton: true

}).then((result) => {

if (result.isConfirmed) {

location.href = "accessories/thread/thread-view.php?id=<?php echo $id; ?>";

}

})

} else {

Swal.fire({

icon: 'error',

title: 'حدث خطأ حاول مجددا',

confirmButtonText: 'حسنا',

showCloseButton: true

});

console.log(data);

}

}

});

}

form.classList.add('was-validated');

}, false);

});

}, false);

})();
function added() {}

$(".tPrice-thread , .height-thread , .weight-thread , .total-weight").on("keyup", function() {

if ($(".moth[value='one']").is(":checked")) {

var price = $(".tPrice-thread").val(),

height = $(".height-thread").val();

$(".mPrice-thread").val(price / height);

}else {

var price = $(".tPrice-thread").val(),

weight = $(".weight-thread").val(),

total = $(".total-weight").val();

var height = (10/weight)*total;

$(".height-thread").val(height);

$(".mPrice-thread").val(price / height);

}


});

$(".moth").change(function() {

var moth = $(this).val();

if (moth == "one") {

$(".one").show();

$(".two").hide();

$(".height-thread").removeAttr("disabled");

} else {

$(".one").show();

$(".two").show();

$(".height-thread").attr("disabled","disabled");

}

});

$(".factories").change(function() {

var factory = $(this).val();

$(".factory-thread").val(factory);

document.getElementsByClassName('close-factory')[0].click();


});
</script>

و في حال الضغط على زر اضافة جديد قم بتنفيذ تعليماتك من خلال ملف addThread.js و هي كالتالي 

//        thread
        (function() {

            'use strict';

            window.addEventListener('load', function() {

                var forms = document.getElementsByClassName('needs-validation-thread');

                var validation = Array.prototype.filter.call(forms, function(form) {

                    form.addEventListener('submit', function(event) {

                        // console.log(form.reportValidity());

                        if (form.checkValidity() === false) {

                            event.preventDefault();

                            event.stopPropagation();

                        } else {

                            var form_data = new FormData();


                           var name = $(".name").val(),
							
							   fiber = $(".fiber-thread").val(),

                                num = $(".num-thread").val(),

                                color = $(".degree-code[data='thread']").val(),

                                pantone = $(".panton-code[data='thread']").val(),

                                height = $(".height-thread").val(),

                                weight = $(".weight-thread").val(),

                                factory = $(".factory-thread").val(),

                                tprice = $(".tPrice-thread").val(),

                                mprice = $(".mPrice-thread").val();

                            var file_data = $(".thread-image").prop('files')[0];

                            form_data.append('type', "thread");
							form_data.append('name', name);
                            form_data.append('fiber', fiber);
                            form_data.append('num', num);
                            form_data.append('color', color);
                            form_data.append('pantone', pantone);
                            form_data.append('height', height);
                            form_data.append('weight', weight);
                            form_data.append('factory', factory);
                            form_data.append('tprice', tprice);
                            form_data.append('mprice', mprice);
                            form_data.append('image', file_data);

                            //console.log(form_data);


                            $.ajax({

                                url: "functions/addAccessories.php",

                                dataType: 'text',

                                cache: false,

                                contentType: false,

                                processData: false,

                                data: form_data,

                                type: 'post',

                                success: function(data) {

                                    if (data == "done") {

                                        Swal.fire({

                                            icon: 'success',

                                            title: 'تم اضافة خيط الحياكة بنجاح',

                                            confirmButtonText: 'موافق',

                                            showCloseButton: true

                                        }).then((result) => {

                                            if (result.isConfirmed) {

                                                location.reload();

                                            }

                                        })

                                    } else {

                                        Swal.fire({

                                            icon: 'error',

                                            title: 'حدث خطأ حاول مجددا',

                                            confirmButtonText: 'حسنا',

                                            showCloseButton: true

                                        });

                                        console.log(data);

                                    }

                                }

                            });

                        }

                        form.classList.add('was-validated');

                    }, false);

                });

            }, false);

        })();
        function added() {}

        $(".tPrice-thread , .height-thread , .weight-thread , .total-weight").on("keyup", function() {

            if ($(".moth[value='one']").is(":checked")) {

                var price = $(".tPrice-thread").val(),

                    height = $(".height-thread").val();

                $(".mPrice-thread").val((price / height).toFixed(3));

            }else {

                var price = $(".tPrice-thread").val(),

                    weight = $(".weight-thread").val(),

                    total = $(".total-weight").val();

                var height = (10/weight)*total;

                $(".height-thread").val(height);

               $(".mPrice-thread").val((price / height).toFixed(3));

            }


        });
		
		        $(".moth").change(function() {

            var moth = $(this).val();

            if (moth == "one") {

                $(".one").show();

                $(".two").hide();

                $(".height-thread").removeAttr("disabled");

            } else {

                $(".one").show();

                $(".two").show();

                $(".height-thread").attr("disabled","disabled");

            }

        });
		
		        $(".factories").change(function() {

            var factory = $(this).val();

            $(".factory-thread").val(factory);

            document.getElementsByClassName('close-factory')[0].click();


        });

انتظر تعليماتكم

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

Recommended Posts

  • 1
Salah Eddin Beriani2 عضو نشيط

Salah Eddin Beriani2

نشر
نشر

بافتراض أن لديك form بهذا الشكل  

<form id="my-form">
    <input type="email" name="email" placeholder="(Your email)" />
    <button type="submit" value="button-one">Go - One</button>
    <button type="submit" value="button-two">Go - Two</button>
    <button type="submit" value="button-three">Go - Three</button>
</form>

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

$("#my-form button").click(function(ev){
    ev.preventDefault()// الغاء ال فورم
    if($(this).attr("value")=="button-one"){
        //يمنكك عمل وظيفة لكل زر بالتحقق منه
    }
    // $("#my-form").submit(); وهنا اذا أردت تشغيل الفورم
});

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 1
بلال زيادة عضو نشيط

بلال زيادة

نشر
نشر
بتاريخ 3 دقائق مضت قال محمد المصري5: 

<script>
$(document).on('click', '.updateData', function(){
	var id = $(this).data('id');
	
//#################الكود#####################

window.addEventListener('load', function() {

var forms = document.getElementsByClassName('needs-validation-thread');

var validation = Array.prototype.filter.call(forms, function(form) {

form.addEventListener('submit', function(event) {

// console.log(form.reportValidity());

if (form.checkValidity() === false) {

event.preventDefault();

event.stopPropagation();

} else {

var form_data = new FormData();


var name = $(".name").val(),

fiber = $(".fiber-thread").val(),

num = $(".num-thread").val(),

color = $(".degree-code[data='thread']").val(),

pantone = $(".panton-code[data='thread']").val(),

height = $(".height-thread").val(),

weight = $(".weight-thread").val(),

factory = $(".factory-thread").val(),

tprice = $(".tPrice-thread").val(),

mprice = $(".mPrice-thread").val();

var file_data = $(".thread-image").prop('files')[0];

form_data.append('type', "updatethread");
form_data.append('id', <?php echo $id; ?>);
form_data.append('name', name);
form_data.append('fiber', fiber);
form_data.append('num', num);
form_data.append('color', color);
form_data.append('pantone', pantone);
form_data.append('height', height);
form_data.append('weight', weight);
form_data.append('factory', factory);
form_data.append('tprice', tprice);
form_data.append('mprice', mprice);
form_data.append('image', file_data);

//console.log(form_data);


$.ajax({

url: "functions/addAccessories.php",

dataType: 'text',

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

success: function(data) {

if (data == "done") {

Swal.fire({

icon: 'success',

title: 'عمل رائع - تم التعديل ينجاح',

confirmButtonText: 'موافق',

showCloseButton: true

}).then((result) => {

if (result.isConfirmed) {

location.href = "accessories/thread/thread-view.php?id=<?php echo $id; ?>";

}

})

} else {

Swal.fire({

icon: 'error',

title: 'حدث خطأ حاول مجددا',

confirmButtonText: 'حسنا',

showCloseButton: true

});

console.log(data);

}

}

});

}

form.classList.add('was-validated');

}, false);

});

}, false);

();
//###### نهاية الكود ###########
});
//###############################################################
</script>

نفس الشئ اخي ، لا اجراء

هل تحققت من Console و شاهدت ما هي الأخطاء التي تواجهك, أرجوا إرفاق نص المشكلة أو صورة للمشكلة عن طريق Console.

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
بلال زيادة عضو نشيط

بلال زيادة

نشر
نشر

هناك فكرة بسيطة و هي class لكل زر فمن الممكن إعطاء كل زر class معين بهذا الشكل  

<button class="btn btn-success center-submit m7md1 size19 updateData" type="update">تحديث البيانات</button>
<button class="btn btn-danger center-submit m7md1 size19 addData" type="submit">إضافة كجديد</button>

و من ثم التعديل على الزر الخاص بالتحديث للبيانات بإضافة خاصية data-id  ويتم وضع id البوست أو التعليق الذي نود تحديث بياناته بهذا الشكل  

<button class="btn btn-success center-submit m7md1 size19 updateData" data-id="1" type="update">تحديث البيانات</button>
أو 
<button class="btn btn-success center-submit m7md1 size19 updateData" data-id="<?=$comment->id;?>" type="update">تحديث البيانات</button>

ومن ثم عند الضغط على زر تحديث نقوم بالتأكد من الزر المضغوط عليه في jQuery بهذا الشكل  

$(document).on('click', '.updateData', function(){
	
});

ومن ثم بداخل أقوام function في الكود السابق نقوم بجلب id المنشور أو التعليق  

$(document).on('click', '.updateData', function(){
	var id = $(this).data('id');
});

ومن ثم نقوم بوضع باقي الكود الذي يقوم بتنفيذ التحديثات على المنشور أو التعليق  

$(document).on('click', '.updateData', function(){
	var id = $(this).data('id');

	/// هنا باقي الكود
});

 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد المصري12 عضو نشيط

محمد المصري12

نشر
  • الكاتب
نشر

الفكرة وصلت لكن الصعوبة في ضبطها مع الكود 

الزر الخاص بي كالتالي 

<button class="btn btn-success center-submit m7md1 size19 updateData" data-id="<?php echo $id ; ?>" type="update">تحديث البيانات</button>

و الامر الذي اريد تنفيذه بعد وضعه كما تفضلت كالتالي 

$(document).on('click', '.updateData', function(){
	var id = $(this).data('id');
	
//#################الكود#####################

(function() {

'use strict';

window.addEventListener('load', function() {

var forms = document.getElementsByClassName('needs-validation-thread');

var validation = Array.prototype.filter.call(forms, function(form) {

form.addEventListener('submit', function(event) {

// console.log(form.reportValidity());

if (form.checkValidity() === false) {

event.preventDefault();

event.stopPropagation();

} else {

var form_data = new FormData();


var name = $(".name").val(),

fiber = $(".fiber-thread").val(),

num = $(".num-thread").val(),

color = $(".degree-code[data='thread']").val(),

pantone = $(".panton-code[data='thread']").val(),

height = $(".height-thread").val(),

weight = $(".weight-thread").val(),

factory = $(".factory-thread").val(),

tprice = $(".tPrice-thread").val(),

mprice = $(".mPrice-thread").val();

var file_data = $(".thread-image").prop('files')[0];

form_data.append('type', "updatethread");
form_data.append('id', <?php echo $id; ?>);
form_data.append('name', name);
form_data.append('fiber', fiber);
form_data.append('num', num);
form_data.append('color', color);
form_data.append('pantone', pantone);
form_data.append('height', height);
form_data.append('weight', weight);
form_data.append('factory', factory);
form_data.append('tprice', tprice);
form_data.append('mprice', mprice);
form_data.append('image', file_data);

//console.log(form_data);


$.ajax({

url: "functions/addAccessories.php",

dataType: 'text',

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

success: function(data) {

if (data == "done") {

Swal.fire({

icon: 'success',

title: 'عمل رائع - تم التعديل ينجاح',

confirmButtonText: 'موافق',

showCloseButton: true

}).then((result) => {

if (result.isConfirmed) {

location.href = "accessories/thread/thread-view.php?id=<?php echo $id; ?>";

}

})

} else {

Swal.fire({

icon: 'error',

title: 'حدث خطأ حاول مجددا',

confirmButtonText: 'حسنا',

showCloseButton: true

});

console.log(data);

}

}

});

}

form.classList.add('was-validated');

}, false);

});

}, false);

})();
//###### نهاية الكود ###########
});

لكن حين الضغط على الزر لا يستجيب

ما هو الخطأ الذي وقعت فيه ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
بلال زيادة عضو نشيط

بلال زيادة

نشر
نشر
بتاريخ 25 دقائق مضت قال محمد المصري5:

الفكرة وصلت لكن الصعوبة في ضبطها مع الكود 

الزر الخاص بي كالتالي 


<button class="btn btn-success center-submit m7md1 size19 updateData" data-id="<?php echo $id ; ?>" type="update">تحديث البيانات</button>

و الامر الذي اريد تنفيذه بعد وضعه كما تفضلت كالتالي 


$(document).on('click', '.updateData', function(){
	var id = $(this).data('id');
	
//#################الكود#####################

(function() {

'use strict';

window.addEventListener('load', function() {

var forms = document.getElementsByClassName('needs-validation-thread');

var validation = Array.prototype.filter.call(forms, function(form) {

form.addEventListener('submit', function(event) {

// console.log(form.reportValidity());

if (form.checkValidity() === false) {

event.preventDefault();

event.stopPropagation();

} else {

var form_data = new FormData();


var name = $(".name").val(),

fiber = $(".fiber-thread").val(),

num = $(".num-thread").val(),

color = $(".degree-code[data='thread']").val(),

pantone = $(".panton-code[data='thread']").val(),

height = $(".height-thread").val(),

weight = $(".weight-thread").val(),

factory = $(".factory-thread").val(),

tprice = $(".tPrice-thread").val(),

mprice = $(".mPrice-thread").val();

var file_data = $(".thread-image").prop('files')[0];

form_data.append('type', "updatethread");
form_data.append('id', <?php echo $id; ?>);
form_data.append('name', name);
form_data.append('fiber', fiber);
form_data.append('num', num);
form_data.append('color', color);
form_data.append('pantone', pantone);
form_data.append('height', height);
form_data.append('weight', weight);
form_data.append('factory', factory);
form_data.append('tprice', tprice);
form_data.append('mprice', mprice);
form_data.append('image', file_data);

//console.log(form_data);


$.ajax({

url: "functions/addAccessories.php",

dataType: 'text',

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

success: function(data) {

if (data == "done") {

Swal.fire({

icon: 'success',

title: 'عمل رائع - تم التعديل ينجاح',

confirmButtonText: 'موافق',

showCloseButton: true

}).then((result) => {

if (result.isConfirmed) {

location.href = "accessories/thread/thread-view.php?id=<?php echo $id; ?>";

}

})

} else {

Swal.fire({

icon: 'error',

title: 'حدث خطأ حاول مجددا',

confirmButtonText: 'حسنا',

showCloseButton: true

});

console.log(data);

}

}

});

}

form.classList.add('was-validated');

}, false);

});

}, false);

})();
//###### نهاية الكود ###########
});

لكن حين الضغط على الزر لا يستجيب

ما هو الخطأ الذي وقعت فيه ؟

حاول إزالة الأسطر التالية  

(function() {

'use strict';

});

و الأقواس المعكوفة الخاصة بها و محاولة تنفيذ الكود مرة أخرى.

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد المصري12 عضو نشيط

محمد المصري12

نشر
  • الكاتب
نشر 
<script>
$(document).on('click', '.updateData', function(){
	var id = $(this).data('id');
	
//#################الكود#####################

window.addEventListener('load', function() {

var forms = document.getElementsByClassName('needs-validation-thread');

var validation = Array.prototype.filter.call(forms, function(form) {

form.addEventListener('submit', function(event) {

// console.log(form.reportValidity());

if (form.checkValidity() === false) {

event.preventDefault();

event.stopPropagation();

} else {

var form_data = new FormData();


var name = $(".name").val(),

fiber = $(".fiber-thread").val(),

num = $(".num-thread").val(),

color = $(".degree-code[data='thread']").val(),

pantone = $(".panton-code[data='thread']").val(),

height = $(".height-thread").val(),

weight = $(".weight-thread").val(),

factory = $(".factory-thread").val(),

tprice = $(".tPrice-thread").val(),

mprice = $(".mPrice-thread").val();

var file_data = $(".thread-image").prop('files')[0];

form_data.append('type', "updatethread");
form_data.append('id', <?php echo $id; ?>);
form_data.append('name', name);
form_data.append('fiber', fiber);
form_data.append('num', num);
form_data.append('color', color);
form_data.append('pantone', pantone);
form_data.append('height', height);
form_data.append('weight', weight);
form_data.append('factory', factory);
form_data.append('tprice', tprice);
form_data.append('mprice', mprice);
form_data.append('image', file_data);

//console.log(form_data);


$.ajax({

url: "functions/addAccessories.php",

dataType: 'text',

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

success: function(data) {

if (data == "done") {

Swal.fire({

icon: 'success',

title: 'عمل رائع - تم التعديل ينجاح',

confirmButtonText: 'موافق',

showCloseButton: true

}).then((result) => {

if (result.isConfirmed) {

location.href = "accessories/thread/thread-view.php?id=<?php echo $id; ?>";

}

})

} else {

Swal.fire({

icon: 'error',

title: 'حدث خطأ حاول مجددا',

confirmButtonText: 'حسنا',

showCloseButton: true

});

console.log(data);

}

}

});

}

form.classList.add('was-validated');

}, false);

});

}, false);

();
//###### نهاية الكود ###########
});
//###############################################################
</script>

نفس الشئ اخي ، لا اجراء

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...