0

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.

4

2 回答 2

2

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. */
    }
});
于 2013-11-02T09:37:04.160 回答
1

You must check the number of inputs in the add event. You use form tag to transfer data to server and you also must set "method" attribute in form tag with GET or POST

    <html>
    <body>
    <head> 
<script type='text/javascript'> $(function(){
 $('.Add').live('click',function(e){
       if($('.option input').length < 5)
       {
          $('.Option:last').after($('.Option input:last').val('').clone());
       }
          // Other code
          // ...
 }
    });
</script>
</head>
    <form action="welcome.php" method="post">
    <input type='text' name='txtTest'/><br>
    <input type='text' name='txtTest'/><br>
    <input type="submit">
    </form>

    </body>
    </html>
于 2013-11-02T09:58:17.233 回答