【问题标题】:Create User Defined Number of Inputs for Website为网站创建用户定义的输入数量
【发布时间】:2021-03-02 16:02:44
【问题描述】:

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

【问题讨论】:

标签: javascript php html web


【解决方案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 处理新的输入:

文件.php

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

【讨论】:

【解决方案2】:

【讨论】:

  • 不一定。假设我只有一个带有提交按钮的文本字段。他们输入第一个输入,然后单击提交。网页存储该输入,然后清除允许他们输入另一个(如果他们愿意)的字段。如果他们最终决定他们有足够的,我将有另一个按钮,将他们输入的所有数据传递到 PHP 调用中,以从谷歌地图中获取结果。我希望这会有所帮助,但任何帮助都会很棒!谢谢!
  • 然后你可以这样做:: 当用户输入一些东西时,一一获取这些输入并将这些输入放入会话变量中。一旦他们完成输入,然后将这些输入传递给进一步处理。完成进一步处理后,您将销毁这些会话变量。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-10
  • 1970-01-01
  • 2010-10-25
  • 2018-12-23
  • 1970-01-01
相关资源
最近更新 更多