动态增加表单元素

原创 2004年10月29日 12:35:00

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0067)file://E:/mengxianhui/经过整理的Javascript代码/动态增加表单元素.htm -->
<!-- saved from url=(0022)http://internet.e-mail --><HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="98%" align=center border=0>
  <TBODY>
  <TR>
    <FORM id=form1 name=form1 action=program/survey/SurveyEdit.asp method=post>
    <TD>
      <TABLE class=tableborder cellSpacing=0 cellPadding=4 width="100%"
border=0>
        <TBODY>
        <TR>
          <TD bgColor=#c7e8f8>
            <DIV align=center><B>问题 1:</B> </DIV></TD>
          <TD bgColor=#c7e8f8><INPUT class=tableborder size=60 name=Question1>
          </TD></TR>
        <TR>
          <TD>&nbsp;</TD>
          <TD><B>问题类型: </B><INPUT type=checkbox value=True name=chkQueType1>
            多选类型 <BR>
            <DIV id=__idQueOption1 name="__idQueOption1"><B>问题选项:</B> <INPUT
            class=tableborder onpropertychange=addNewChild(this) size=60
            name=QueOption1> </DIV></TD></TR></TBODY></TABLE>
      <DIV id=__idInsertBefore></DIV><INPUT type=hidden value=1 name=newTable>
      <BR>
      <DIV
      style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px"
      align=right><INPUT class=CustButton onclick=addNewQuestion() type=button value=增加一个新问题>
<INPUT class=CustButton type=submit value=保存设置> <INPUT class=CustButton type=reset value=重新设置>
</DIV></TD></FORM></TR></TBODY></TABLE>
<SCRIPT>
function addNewQuestion()
{

document.form1.newTable.value =  parseInt(document.form1.newTable.value) + 1;
var newItemId;
if( (document.form1.newTable.value).length > 2 )
{
alert("您的调查问题总数不能超过 99 个。")
window.location.reload();
}

newItemId = document.form1.newTable.value;

var objItem = '<table cellspacing="0" cellpadding="4" width="100%" border="0" class="tableborder">';
 objItem += '  <tr>';
 objItem += '<td bgcolor="#C7E8F8">';
 objItem += '      <div align="center"><b>问题 ' + newItemId + ':</b> </div>';
 objItem += '    </td>';
 objItem += '    <td bgcolor="#C7E8F8">';
 objItem += '      <input size="60" name="Question' + newItemId + '" class="tableborder">';
 objItem += '    </td>';
 objItem += '  </tr>';
 objItem += '  <tr>';
 objItem += '    <td>&nbsp;</td>';
 objItem += '    <td><b>问题类型: </b><input type="checkbox" value="True" name="chkQueType' + newItemId + '">';
 objItem += '      多选类型 <br>';
 objItem += '      <div id="__idQueOption' + newItemId + '"><b>问题选项:</b>';
 objItem += '        <input onpropertychange="addNewChild(this)" size="60" name="QueOption' + newItemId + '" class="tableborder">';
 objItem += '      </div>';
 objItem += '    </td>';
 objItem += '  </tr>';
 objItem += '</table>';

document.all.__idInsertBefore.insertAdjacentHTML("beforeBegin", objItem);
}

function showTips(obj)
{
obj.title=obj.value;
}

function addNewChild(obj)
{
var isblank = "false";
var objName = obj.name;
var last2Char = objName.substring(objName.length - 2);
if( last2Char.substring(0, 1) > '9' || last2Char.substring(0, 1) < '0' )
{
last2Char = last2Char.substring(1, 2);
}

for(var i=0; i < document.form1.elements[objName].length; i++)
{
 if(document.form1.elements[objName].item(i).value == "")
 isblank = "yes"
}

if( isblank != "yes" )
{
var objItem = '<div id="__idQueOption' + last2Char + '"><b>问题选项:</b>';
   objItem += '  <input onpropertychange="addNewChild(this)" size="60" name="' + objName + '" class="tableborder" />';
   objItem += '</div>';

objName = "__idQueOption" + last2Char;
var varQueOption = document.all[objName];
if( varQueOption.length != null )
  varQueOption = varQueOption.item(varQueOption.length-1);

varQueOption.insertAdjacentHTML("afterEnd",objItem);
}
}
</SCRIPT>
</BODY></HTML>

问题 1:
  问题类型: 多选类型
问题选项:

'; objItem += ' '; objItem += ' '; objItem += ' '; objItem += ' '; objItem += ' '; objItem += '  问题类型: '; objItem += ' 多选类型
'; objItem += '
问题选项:'; objItem += ' '; objItem += '
'; objItem += ' '; objItem += ''; document.all.__idInsertBefore.insertAdjacentHTML("beforeBegin", objItem); } function showTips(obj) { obj.title=obj.value; } function addNewChild(obj) { var isblank = "false"; var objName = obj.name; var last2Char = objName.substring(objName.length - 2); if( last2Char.substring(0, 1) > '9' || last2Char.substring(0, 1) < '0' ) { last2Char = last2Char.substring(1, 2); } for(var i=0; i < document.form1.elements[objName].length; i++) { if(document.form1.elements[objName].item(i).value == "") isblank = "yes" } if( isblank != "yes" ) { var objItem = '
问题选项:'; objItem += ' '; objItem += '
'; objName = "__idQueOption" + last2Char; var varQueOption = document.all[objName]; if( varQueOption.length != null ) varQueOption = varQueOption.item(varQueOption.length-1); varQueOption.insertAdjacentHTML("afterEnd",objItem); } }

动态表单添加及动态删除元素

无标题文档 $(function(){    //绑定添加联系方式超链接的点击事件 $("#linkAdd").click( function(){ //创建新的联系方式的D...
  • qq_33663071
  • qq_33663071
  • 2016年01月07日 18:04
  • 259

动态的添加、删除表单

在写简历时,有一项实习经历,如果没有就不填,如果有就实习经历,有多少写多少。 这个功能是如何实现的,其实很简单,以bootstrap和jquery为例:具体代码实现: ...
  • change_on
  • change_on
  • 2017年04月12日 17:56
  • 1469

javascript如何实现追加或删除表单元素

页面的代码如下:  Untitled Page function add(){ //用于追后input元素的命名 var las...
  • lijt1987
  • lijt1987
  • 2009年03月21日 09:32
  • 3423

js动态获取表单元素

代码如下,我添加一行以后,页面上能够显示添加出来的输入框, 1  js第6行使用的是"克隆节点"函数,克隆后的节点里边并没有html,需要第9行的代码去填充内容 2  使用克隆功能,因为该...
  • wang710599511
  • wang710599511
  • 2015年11月20日 11:59
  • 563

html5篇——新增表单元素和表单属性

这一篇介绍html5新增的表单元素和表单属性。 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何...
  • u010556394
  • u010556394
  • 2016年03月08日 12:52
  • 5340

jquery.uploadify动态传递表单元素

3.2版本 写法为: $('#').uploadify('settings', 'formData', { 'attachMemo' : $('#attachMemo').val() } ); ...
  • z69183787
  • z69183787
  • 2013年11月17日 10:38
  • 3884

js动态添加表单form元素

动态添加表单元素      function AddElement(mytype){  var mytype,TemO=document.getElementById("add");  va...
  • wkj001
  • wkj001
  • 2016年11月26日 15:09
  • 1991

关于LigerUI表单元素的动态替换

关于LigerUI表单元素的动态替换 需求:是根据表单的一个元素输入的文本值之后,动态变换表单中另一个元素的类型,比如从初始化的文本框变成下拉框。 实现过程分析:为表单的文本框绑定事件,在该文本框...
  • oqqBOSS123456
  • oqqBOSS123456
  • 2015年10月18日 15:30
  • 1688

HTML 表单元素有哪些?

本章描述所有 HTML 表单元素。 元素 最重要的表单元素是  元素。 元素根据不同的 type 属性,可以变化为多种形态。 注释:下一章讲解所有 HTML 输入类...
  • niusi1288
  • niusi1288
  • 2017年05月19日 13:17
  • 1468

HTML基本知识点——表单和表单元素标记

表单   表单的作用是从访问您的Web站点的用户那里获取信息,访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息,然后单击某个按钮提交这些信息。 是客户端与服务器端进行信息...
  • fpxty
  • fpxty
  • 2017年04月12日 20:52
  • 555
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动态增加表单元素
举报原因:
原因补充:

(最多只允许输入30个字)