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

标签 javascript php html web

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

最佳答案

使用 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 处理新输入:

文件.php

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

关于javascript - 为网站创建用户定义的输入数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22876808/

相关文章:

asp.net-mvc - 使用 MVC 动态地使用 Kendo UI 图表标题

php - 从 mysql 更改为 mysqli 标准程序 - 准备好的语句?

php - php 如何从一个数据库的两个不同表中获取多个数据

php - 如何在 API 平台中创建自定义端点并将其添加到文档中?

javascript - 动态表每一行的定时器

html - 无法使用替换从 HTML 中删除不需要的字符

php - 使用ajax加载html,但在加载之前隐藏内容

javascript - 为什么我无法更新我的 JavaScript 对象属性值?

javascript - JQuery/Microsoft 模板和链接 : Did they ever make these work together?

javascript - nextjs如何监听页面变化