Javascript 添加或删除文本框，然后使用PHP或Jquery获取它们的值_Javascript_Php_Jquery_Html

Javascript 添加或删除文本框，然后使用PHP或Jquery获取它们的值

javascript php jquery html

Javascript 添加或删除文本框，然后使用PHP或Jquery获取它们的值,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我想做的是允许用户在归档数据时选择是否添加更多文本框到目前为止，我有这个代码这是我得到的密码 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type='text/javas

我想做的是允许用户在归档数据时选择是否添加更多文本框

到目前为止，我有这个代码

这是我得到的密码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .Delete{color:#ff0000;}
.Add {color:green;}
.Retrieve{color:blue;} 
  </style>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){

    $('.Delete').live('click',function(e){
    $(this).parent().remove();
    });

    $('.Add').live('click',function(e){
        $('.Option:last').after($('.Option:last').clone());
    });

    $('.Retrieve').live('click',function(e){
        $('.Option input').each(function(i,e){
        alert($(e).val()); //Alerts all values individually
        });
    });

});
});//]]>  

</script>

</head>
<body>
  <div class='Option'>
    <input type='text' name='txtTest'/>
    <input type='text' name='txtTest'/>
    <input type='text' name='txtTest'/>
    <span class='Delete'>Delete</span></div>

    <br/><br/>
    <span class='Add'>Add Option</span>
    <br/><br/>
    <span class='Retrieve'>Retrieve Values</span> 
</body>
</html>


-JSFIDLE演示
.删除{color:#ff0000；}
.Add{color:green；}
.检索{color:blue；}
//  
删除



添加选项



检索值

该代码允许我添加更多文本框并删除它们，但我的问题是，我正在尝试使用PHP get或PHP POST获取这些文本框的值，如果可能，设置一些限制，可能在添加5组文本框后，用户将无法添加更多。

为了发布到PHP，只需将HTML包装在

表单

元素中：

<form method="GET" action="myPage.php">
    <div class='Option'>
        <input type='text' name='txtTest'/>
        <input type='text' name='txtTest'/>
        ...
    </div>
</form>

要发布到PHP，只需将HTML包装在

表单中

元素：

<form method="GET" action="myPage.php">
    <div class='Option'>
        <input type='text' name='txtTest'/>
        <input type='text' name='txtTest'/>
        ...
    </div>
</form>

要发布到PHP，只需将HTML包装在

表单中

元素：

<form method="GET" action="myPage.php">
    <div class='Option'>
        <input type='text' name='txtTest'/>
        <input type='text' name='txtTest'/>
        ...
    </div>
</form>

要发布到PHP，只需将HTML包装在

表单中

元素：

<form method="GET" action="myPage.php">
    <div class='Option'>
        <input type='text' name='txtTest'/>
        <input type='text' name='txtTest'/>
        ...
    </div>
</form>

必须检查add事件中的输入数。您可以使用表单标记将数据传输到服务器和您还必须使用GET或POST在表单标记中设置“method”属性


$（函数（）{
$（'.Add'）.live（'click'，函数（e）{
if（$（'.option输入'）。长度<5）
{
$（'.Option:last'）.after（$（'.Option输入：last'）.val（'.clone（））；
}
//其他代码
// ...
}
});

必须检查add事件中的输入数。您可以使用表单标记将数据传输到服务器和您还必须使用GET或POST在表单标记中设置“method”属性


$（函数（）{
$（'.Add'）.live（'click'，函数（e）{
if（$（'.option输入'）。长度<5）
{
$（'.Option:last'）.after（$（'.Option输入：last'）.val（'.clone（））；
}
//其他代码
// ...
}
});

必须检查add事件中的输入数。您可以使用表单标记将数据传输到服务器和您还必须使用GET或POST在表单标记中设置“method”属性


$（函数（）{
$（'.Add'）.live（'click'，函数（e）{
if（$（'.option输入'）。长度<5）
{
$（'.Option:last'）.after（$（'.Option输入：last'）.val（'.clone（））；
}
//其他代码
// ...
}
});

必须检查add事件中的输入数。您可以使用表单标记将数据传输到服务器和您还必须使用GET或POST在表单标记中设置“method”属性


$（函数（）{
$（'.Add'）.live（'click'，函数（e）{
if（$（'.option输入'）。长度<5）
{
$（'.Option:last'）.after（$（'.Option输入：last'）.val（'.clone（））；
}
//其他代码
// ...
}
});

在添加计数您拥有的总选项之前，如果大于4，则停止添加；如果不添加1牛顿，则使用带有提交按钮的表单元素，使用get或post方法将数据作为操作发送到php文件。在添加计数之前，请先计算您拥有的总选项；如果大于4，则停止添加；如果不添加1牛顿，则使用带有使用get或post方法的submit按钮将数据作为操作发送到php文件。在添加之前，计算您拥有的全部选项，如果超过4，则停止添加，如果不超过1，则使用带有submit按钮的表单元素，使用get或post方法将数据作为操作发送到php文件。在添加之前，计算全部选项如果大于4，则停止它，如果不添加1 newTry，则使用带有提交按钮的表单元素，使用get或post方法将数据作为操作发送到php文件。效果非常好！谢谢！现在我唯一的问题是如何获取它。：）谢谢James Donnelly！啊，是的。谢谢你的回复James Donnelly抱歉，co'z我忘了说我真正的问题是如何获取克隆的文本框的值。如果用户想要9个文本框，我如何也能输出9个文本框？我应该用这样的方式获取值吗？通过获取

、

和

de>$\u POST，您必须将表单的

方法更改为“POST”，并将输入名称分别更改为“a”、“b”和“c”。是的，我已经这样做了，但如何在克隆中获取值？它们的“名称”是什么这样我就可以给他们打电话了？顺便说一句，谢谢！我真的很感激你的魅力！谢谢！现在我唯一的问题是如何得到它。：）谢谢James Donnelly！啊，是的。谢谢你的回复James Donnelly抱歉，co'z我忘了说我真正的问题是如何获取克隆的文本框的值。如果用户想要9个文本框，我如何也能输出9个文本框？我应该用这样的方式获取值吗？通过获取a
、b
和c
de>$\u POST

，您必须将表单的

方法更改为“POST”，并将输入名称分别更改为“a”、“b”和“c”。是的，我已经这样做了，但如何在克隆中获取值？它们的“名称”是什么这样我就可以给他们打电话了？顺便说一句，谢谢！我真的很感激你的魅力！谢谢！现在我唯一的问题是如何得到它。：）谢谢James Donnelly！啊，是的。谢谢你的回复James Donnelly抱歉，co'z我忘了说我真正的问题是如何获取克隆的文本框的值。如果用户想要9个文本框，我如何也能输出9个文本框？我应该用这样的方式获取值吗？通过获取a
、b
和c
de>$\u POST

，您必须将表单的

方法更改为“POST”，并将输入名称分别更改为“a”、“b”和“c”。是的，我已经这样做了，但如何在克隆中获取值？