الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

اضافة حقول جديده عند الضغط على add field

بدأه sooofy في 27 يناير 2011 · 1 رد · 662 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

هذا الكود يقوم بإضافة حقول اضافية بإستخدام javascript & html :-

<html>
<head>
<script type="text/javascript">
fields = 0;
function addInput() {
if (fields != 1) {
document.getElementById('text').innerHTML += "<p>place of birth:<input type='text' value='bagdad_iraq' /> </p>" ;document.getElementById('text').innerHTML += "name of favorit book:<input type='text' value='Enjoy your life' />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<p>Only 2 upload fields allowed.</p>";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form" method="post" action="" >
<p><input type="button" onclick="addInput()" name="add" value="Add Field"/>
<div id="text"></div>

</body>
</html>

وهذه صور للتنفيذ ، فعندما يتم الضغط على الأيقونه يظهري لي الحقلين وبهما قيمة ابتدائيه ، وجعلت الإضافه لحقلين فقط ، فعندما نحاول أن نضغط مجددا على الأيقونه يظهر لي رساله أنه لا يمكن أن أضيف أكثر من حقلين..

أتمنى أن تستفيدوا ..ولا تنسوني من دعواتكم..

post-216231-045562700 1296085051_thumb.jpost-216231-015966300 1296085085_thumb.jpost-216231-022599000 1296085173_thumb.j

المرفقات
1.JPG2.JPG3.JPG

تم تعديل هذه المشاركة بواسطة X-File في 27 يناير 2011 في 03:31

1
#2

كطريقة ثانية للافادة

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script type="text/javascript">
<!--
 function maketext(countainer,id)
 {
 var text=document.createElement("input");
 text.id=id;
 text.type="text";
 document.getElementById(countainer).appendChild(text);
 }
 function init()
 {
 maketext('con','txt1');
 maketext('age','txt2');
 }
//-->
</script>
</head>

<body>

<div style="position: absolute; width: 218px; height: 114px; z-index: 1; left: 10px; top: 15px" id="layer1">
<table style="width: 100%">
 <tr>
  <td style="width: 74px">name</td>
  <td id="con"> </td>
 </tr>
 <tr>
  <td style="width: 74px">age</td>
  <td id="age"> </td>
 </tr>
</table>

 <input id="Create" type="button" value="Create" onclick="init()" />
</div>

</body>

</html>

بمعنى اخر الجافا سكريبت توفر لك مرونة كيفما تريد

3

In bad state

مواضيع مشابهة