Javascript动态添加与删除input提交给php例子

记录一下一些方法什么的。这个代码是 可以直接写成html代码后通过 js 来实现删除html的元素。这样结合php的话来实现批量删除什么的 就容易得多了。点击添加后就会增加一个文本框 这样就好使用多了。下面就是 html结合php的代码了

先看个最简单的

这个是网上找到的发出来 大家可以用用

<html>
<script type="text/javascript">
function add(){

var div = document.getElementById("add");

var input = document.createElement("input")
input.setAttribute("type","text")
input.setAttribute("name","tpiao[]")

var del = document.createElement("input")
del.setAttribute("type","button")
del.setAttribute("value","删除")

var br = document.createElement("br");

div.appendChild(input)
div.appendChild(del)
div.appendChild(br)

del.onclick = function(){
div.removeChild(input)
div.removeChild(del)
div.removeChild(br)
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>  

<form action="?a=1"  method="post" >
<input type="button" value="添加" onClick="add()" />
<input type="submit" value="提交" />
<br />
<div id="add"></div>
</form>
</body>  
</html>

例子

增加或删除input然后提交给php

<html>
<script type="text/javascript">
function del(id){
var box1 = document.getElementById("neir"+id);
box1.parentNode.removeChild(box1);

var box2 = document.getElementById("del"+id);
box2.parentNode.removeChild(box2);

var box3 = document.getElementById("br"+id);
box3.parentNode.removeChild(box3);
}

function add(){
var idt = document.getElementById('idtpiao').value=parseInt(document.getElementById('idtpiao').value)+1;

var div = document.getElementById("add");

var input = document.createElement("input")
input.setAttribute("type","text")
input.setAttribute("name","tpiao[]")
input.setAttribute("value",idt)

var del = document.createElement("input")
del.setAttribute("type","button")
del.setAttribute("value","删除")

var br = document.createElement("br");

div.appendChild(input)
div.appendChild(del)
div.appendChild(br)

del.onclick = function(){
div.removeChild(input)
div.removeChild(del)
div.removeChild(br)
}

}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>  
<input type="text" value="0" id="idtpiao" ><br />
<form action="?a=1"  method="post" >
<input type="button" value="添加" onClick="add()" />
<input type="submit" value="提交" />
<br />

<div id="add">

<input type="text" name="tpiao[]" value="1" id="neir1">
<input type="button" value="删除" id="del1" onClick="del(1)">
<br id="br1" />

<input type="text" name="tpiao[]" value="2" id="neir2">
<input type="button" value="删除" id="del2" onClick="del(2)">
<br id="br2" />

</div>
</form>

</body>  
</html>

<?php
$a = isset($_GET['a']) ? $_GET['a'] : "";
if($a == "1"){
print_r($_POST['tpiao']);
}
?>

时间: 2024-10-03 06:40:04

Javascript动态添加与删除input提交给php例子的相关文章

jQuery动态添加与删除tr行实例代码_jquery

这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery

javascript动态添加删除tabs标签的方法_javascript技巧

本文实例讲述了javascript动态添加删除tabs标签的方法.分享给大家供大家参考.具体实现方法如下: <html> <HEAD> <TITLE>网页对话</TITLE> <LINK href="style.css" type=text/css rel=stylesheet> <script> function $(obj) { var o = typeof(obj)=="object" ?

原生JS和JQuery动态添加、删除表格行的方法

  本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4

多选列表框动态添加,移动,删除,全选等操作的简单实例

 本篇文章主要是对多选列表框动态添加,移动,删除,全选等操作的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <% dim a a = split(Request.Form("sourceList"),",") Response.Write "Source:" & Request.Form("sourceList") & ubound(a) & "<

jQuery实现表格行和列的动态添加与删除方法【测试可用】_jquery

本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/19

jQuery动态添加及删除表单上传元素的方法(附demo源码下载)_jquery

本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d

js实现对table动态添加、删除和更新的方法_javascript技巧

本文实例讲述了js实现对table动态添加.删除和更新的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

原生JS和JQuery动态添加、删除表格行的方法_javascript技巧

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

javascript动态添加表格数据行(ASP后台数据库保存例子)_javascript技巧

在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方.比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种不是以单独页面的形式添加,这种动态添加是在同一个页面下动态添加,最后再一起提交到服务器保存到数据库中. 本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子. 浏览器:IE.6.0 后台:ASP (VBScript ) 前台:HTML + JavaScript HTML代码: 复