HTML Форма с «Создать (случайные символы)», а затем «Завершить (вставить в базу данных)» позже

Question

Я хотел бы попросить ваше предложение или лучше, если у вас есть. Это проблема на моем сайте. Я не эксперт в AJAX и / или Javascript. Вот сценарий:

В моей модальной форме есть форма с двумя входами:

1. Номер строки (рандомизированный) для генерации

2. Строка, которая появится в каждых данных (случайная строка), которые будут сгенерированы. (Это может быть ноль)

---

Для демонстрации я ввожу «5» в первом параметре. Затем «образец» ко второму. И нажали кнопку «Создать» .

Теперь 5 строк с «сэмплом» в каждой сгенерированной информации будут загружены в одном и том же режиме.

---

После строки показаны. Я нажму кнопку «Завершить» , после чего сгенерированные строки будут вставлены в мою базу данных.

Возможно ли это? Или я должен искать обходной путь?

---

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>