稍后使用“生成（随机字符）”和“完成（插入数据库）”的 HTML 表单

Question

我想请教您的建议，或者如果您有更好的建议。这是我网站的问题。我不是 AJAX 和/或 Javascript 方面的专家。这是场景：

在我的模式中，有一个表单有两个输入：

1.要生成的字符串数（随机）

2。将出现在将生成的每个数据（随机字符串）中的字符串。 （这可以为空）

---

为了演示，我在第一个参数中输入“5”。然后“采样”到第二个。并点击“生成”按钮。

现在，每个生成的数据中带有“sample”的 5 个字符串将加载到同一个模态中。

---

字符串显示后。我将点击“Finalize”按钮，然后生成的字符串将被插入到我的数据库中。

这可能吗？还是我应该寻找解决方法？

---

modalAndform.php：

<button type="button" data-toggle="modal" data-target="#modal-generate-string">
  Generate Strings 
</button>
<div class="modal fade" id="modal-generate-string">
    <div class="modal-dialog modal-md">
        <form method="post" action="<?php echo base_url("mycontroller/generate"); ?>>
            <!--- inputs --->
            Quantity: <input type="number" name="quantity" required><br/>
            Custom Prefix(optional): <input type="text" name="prefix">
            <button type="submit">Generate</button>

            <div class="for_the_result"></div>

            <!--- submit/close modal --->        
            <button type="button" data-dismiss="modal">Cancel</button>
            <button type="button">Insert Strings</button>
        </form>
    </div>
</div>

---

mycontroller.php

function generate(){
  $quantity = $this->input->post('quantity');
  $prefix = $this->input->post('prefix');

  $myArray = array();
  while($quantity){
    $string1 = mdt(time());
    $string2 = $string1.$prefix;
    array_push($myArray, $string2);
    $quantity--;
  }

  //I dont have any idea what to do after this. All of data in $myArray should be display back to "modalAndform.php" <div class="for_the_result"></div>;
}

Answer 1

处理这个问题有不同的方法，这里我举个例子。 关于在数据库中记录也是可能的......我们可以用ajax来做。但是我们必须看看你的后端是如何接收这些信息的:)

Obs：在代码中，变量position的值为3。这意味着它将在3个字符之后插入标准字符串。如果您希望默认字符串输入另一个位置，只需更改该值即可。

$("#generate").on("click", function(){
  var defaultString = $("#defaultString").val();
  var numberOfStrings = $("#numberOfStrings").val();
  for( var i = 0; i < numberOfStrings; i++){
     var stringGenerated = generateString(defaultString);
     $("#results").append(stringGenerated + "</br>");
  } 
});

function generateString(defaultString){
     var random           = '';
     var characters      =                  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
     var charactersLength = characters.length;
     for ( var i = 0; i < 10; i++ ) {
      random += characters.charAt(Math.floor(Math.random() *        charactersLength));
   }
   var position = 3;
   var output = [random.slice(0, position), defaultString, random.slice(position)].join('');
   return output;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span>Number of strings</span>
<input id="numberOfStrings" type="number" />
<hr>
<span>Default string</span>
<input id="defaultString" type="text" />
</br></br>
<button id="generate">GENERATE STRINGS</button>
</br>
<h3>Results:</h3>
<span id="results">

</span>