为网站创建用户定义的输入数量

时间:2014-04-05 05:03:13

标签: javascript php html web

我正在努力建立一个网站,根据用户想要输入的数量接受多个输入。让我们说他们想要输入4个地址。我希望能够处理该输入,但是如果他们要求10个输入而不必为每个实例创建页面。我是编程新手,所以任何见解都会很棒。此外,我看到一些网站示例,我相信使用javascript来输入,创建更多字段,并处理数据而无需切换页面。我如何实现这样的事情,如果我这样做,我还是必须改变我的数据来源?谢谢!

2 个答案:

答案 0 :(得分:1)

答案 1 :(得分:1)

使用jQuery

的index.html

    <!DOCTYPE html>
    <html class="no-js" lang="en">
      <head>
          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
          <script>
            $(function(){
                var c = 0;

                $("#button1").click(function(){
                  c = $("#inputs").val();

                  $("#mydiv").html("");

                  for(i=0;i<c;i++){
                        $("#mydiv").append('<input type="text" id="data'+i+'" name="data'+i+'" /><br/>');
                  }
                });

                $("#button2").click(function(){
                    $.post("file.php",$("#form1").serialize(),function(data){
                        alert(data);
                    });
                });

            });
          </script>
        </head>
        <body>
        <form id="form1">
          Type the number of inputs:
          <input type="text" id="inputs" name="inputs" />
          <input type="button" id="button1" value="Create" />
          <div id="mydiv"></div>
          <input type="button" id ="button2" value="Send" />
        </form>

        </body>
    </html>

如果您需要使用PHP处理新输入:

file.php

    <?php
      for( $i=0; $i<$_POST["inputs"] ; $i++){
        echo $_POST["data".$i]."\n";
      }
    ?>