dongyuzhu2244 2013-11-02 09:27
浏览 52
已采纳

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

What I want to do is to allow the users to have their choice whether to add more text box when filing their data.

So far I have this code

http://code.jquery.com/jquery-1.5.1.js

This is the code that I got.

<!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>

That code allows me to add more text box and delete them, but my problem is I'm trying to get the value of those text box using PHP GET or PHP POST and if possible set some limit, maybe after adding 5 sets of text boxes the user will not be able to add more.

  • 写回答

2条回答 默认 最新

  • doujiku1028 2013-11-02 09:37
    关注

    In order to post to PHP, simply wrap your HTML in a form element:

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

    Then to limit the number of .Option elements which can be added, simply declare a global variable which counts the number of .Option elements:

    var optionCount = 1;

$('.Delete').live('click',function(e){
    $(this).parent().remove();
    optionCount--; /* Decrease optionCount. */
});

$('.Add').live('click',function(e){
    if (optionCount < 5) { /* Only if optionCount is less than 5... */
        $('.Option:last').after($('.Option:last').clone());
        optionCount++; /* Increase optionCount. */
    }
});
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值