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

محمد المصري12 · 28 يونيو 2021

سلام عليكم

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

<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();


        });

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

بلال زيادة · 28 يونيو 2021

هناك فكرة بسيطة و هي 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');

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

محمد المصري12 · 28 يونيو 2021

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

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

<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);

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

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

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

بلال زيادة · 28 يونيو 2021

بتاريخ 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';

});

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

محمد المصري12 · 28 يونيو 2021

<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>

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

بلال زيادة · 28 يونيو 2021

بتاريخ 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.

Salah Eddin Beriani2 · 28 يونيو 2021

بافتراض أن لديك 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(); وهنا اذا أردت تشغيل الفورم
});

محمد المصري12 · 28 يونيو 2021

ضبطت اخي الفاضل شكرا جزيلا لك

تم التعديل في 28 يونيو 2021 بواسطة محمد المصري5

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

السؤال

محمد المصري12

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

Recommended Posts

بلال زيادة

محمد المصري12

بلال زيادة

محمد المصري12

بلال زيادة

Salah Eddin Beriani2

محمد المصري12

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية