[mustafasoft.com]

ثانيا : ملف add_poll.php

اولا : كود HTML

يهمنا فيه جزئين

الاول : جزء الفورم

والثاني : الجافا سكربت

جزء الفورم :

 <form onsubmit="javascript:return submiT()" method="post" name="POLL">
        <span >Poll Title : <input type="text" name="title" maxlength="64" size="40"/></span>
        <div style="padding-left:30px;padding-top:10px">
            <div>Option 1 : <input type="text" name="poll1" maxlength="64" size="40" class="poll"/></div>
            <div>Option 2 : <input type="text" name="poll2" maxlength="64" size="40" class="poll"/></div>
            <img src="plus.png" id="add_poll" class="plus"/><br />           
            <input type="submit" value="Add Poll" style="margin-left:250px;margin-top:8px;"/>
</form> 

وهذا تحليلها



ثانيا : كود الجافا اسكربت

var i = 2;
$('#add_poll').click(function(){
    ++i;
   $(".poll:last").after("<div>Option " + i + ' : <input type="text" name="poll' + i + '" maxlength="64" size="40" class="poll"/></div>');
});

شرحه :

[/code]

var i = 2

اعلان متغير i بقيمة 2 ، وهي قيمة مساوية لعدد حقول خيارات التصويت المبدأية في الفورم السابق

$('#add_poll').click(function(){

دالة يتم تنفيذها عن الضغط على العنصر الذي يحمل id : add_poll وهو هنا علامة الاضافة

++i;

بالضغط على الاضافة ، يتم اولا زيادة المتغير الذي يحتوي على عدد حقول الخيارات

$(".poll:last").after()

كود تابع لمكتبة jquery يدخل قيمة بعد اخر عنصر يحمل class : poll

اي انه سيحقن الكود بين القوسين ، بعد كود اخر خيار في الفورم

والكود بين القوسين

"<div>Option " + i + ' : <input type="text" name="poll' + i + '" maxlength="64" size="40" class="poll"/></div>'

، هو كود عادي تماما مع ملاحظة ان اسم الحقل ، تم اضافة i اليه ، وهي تحمل قيمة تزداد بكل اضافة جديدة ، وبالتالي مع كل اضافة يحمل الحقل الجديد اسم poll3, poll4, poll5 ,... وهكذا

function submiT()
{
   var x = 0;
   for(var i =  0; i < document.POLL.elements.length; ++i)
   {
   if(document.POLL.elements[i].value == "")
        x = 1;   
   }
   if(x == 0)
    return true;
   else
   {
        alert("Fill All Boxes");
        return false;
   }
}

كود للتأكد من ملأ جميع الحقول عند الضغط على add


يتبع.....