-1

我有一个项目，如果需要，我必须能够进行多个输入。我对 JavaScript 真的很陌生，我熟悉的插入方法只是我从 Form 解析的 POST 方法。我的问题是如何在我的脚本中使用查询？

这是我的代码，Do...While底部需要查询：

<div id="form" class="hidden">
Nama : <input type="text" name="nama"><br/>
Kuantitas : <input type="text" name="kuantitas"><br/>
Kategori : <select name="idKategori">
    <?php
    while ($rowKategori = mysqli_fetch_object($resultKategori)) {
        echo "<option value='".$rowKategori->id."'>".$rowKategori->nama."</option>";
    }
    ?>
</select>
<input type="hidden" name="hidden" value="bahan">
<input type="button" id="remove" value="Remove">
</div>

<form>
<input type="button" value="Tambah barang lain" id="add">
<input type="button" id="insert" value="Insert" style="margin-left: 50%;">

$(document).ready(function() {
    var form_index = 0;
    $("#add").click(function() {
        form_index++;
        $(this).parent().before($("#form").clone().attr("id", "form" + form_index));
        $("#form" + form_index).css("display", "inline");
        $("#form" + form_index + " :input").each(function() {
            $(this).attr("name", $(this).attr("name") + form_index);
            $(this).attr("id", $(this).attr("id") + form_index);
        });
        $("#remove" + form_index).click(function() {
            $(this).closest("div").remove();
        });
    });
    $("#insert").click(function() {
        var i = 0;
        do {
            i++;
        } while (i != 5);
    });

我的英语真的很差，所以让我尽可能简单地解释一下。

  1. 我想像往常一样用提交按钮制作一个表单字段。不同之处在于我想制作一个克隆按钮，这样我就可以使用单个提交按钮添加更多表单字段。
  2. 我写的代码是我从另一页学到的东西，我不熟悉。
  3. 我不知道如何从克隆页面中获取值，我不知道如何在脚本中处理值本身，因为我真的不知道 javascript
  4. 我想做的是当我点击提交按钮时，你如何从所有克隆的表单字段中获取价值？我熟悉的方法是 POST 方法，但我正在考虑写下我在 javascript 上的所有查询，因为 POST 方法无法对所有表单域进行循环，这就是我在 javascript 上进行循环的原因

我对我的英语感到抱歉，我不太擅长

4

1 回答 1

0

好的，你走了，这是它的一个小提琴。

https://jsfiddle.net/2ngjqxge/3/

HTML/PHP

<div id="form_block_wrapper" class="hidden"> <!-- added an outside wrapper -->
  <div class="form_block" class="hidden">
    Nama : <input type="text" name="nama[]"><br/>
    Kuantitas : <input type="text" name="kuantitas[]"><br/>
    Kategori : <select name="idKategori[]">
      <?php while ($rowKategori = mysqli_fetch_object($resultKategori)): ?>
          <option value="<?php echo $rowKategori->id; ?>">
              <?php echo $rowKategori->nama; ?>
          </option>
       <?php endWhile; ?>
    </select>
  <input type="hidden" name="hidden[]" value="bahan">
  <input type="button" name="remove" value="Remove">
  </div>
</div> <!-- close #form_block_wrapper -->

<input type="button" value="Tambah barang lain" id="add">
<input type="button" id="insert" value="Insert" style="margin-left: 50%;">

请注意，我改变了很多东西。最重要的是，我添加了所有将要提交的输入的名称，[]等等。现在，如果您要将其作为表单提交，在服务器端您将获得数组而不是单个元素。单个元素将被下一个动态创建的“form_block”覆盖，因此我们需要处理它们。您在提交表单时期望的数据将是这样的（假设我们有 3 个“form_blocks”）：namanama[]

   $_POST['nama'] = [
       0 => 'nama from first form block',
       1 => 'nama from second form block',
       2 => 'nama from third form block',
  ];

   $_POST['kuantitas'] = [
       0 => 'kuantitas from first form block',
       1 => 'kuantitas from second form block',
       2 => 'kuantitas from third form block',
  ];
  //etc...

接下来，我删除了所有 ID，因为我们知道 HTML 元素中的 id 必须是唯一的，因此在创建和销毁动态内容时没有必要弄乱它们。我们可以像你最初那样附加一个索引，但是选择器很简单，所以我们真的不需要这样做。让事情变得简单是值得的，为什么要把它复杂化。

我还为 while 块使用了“替代”PHP 语法。while(..):用冒号代替while(..){括号。当与 HTML 混合使用而<?php endWhile; ?>不是<?php } ?>. 这无关紧要，因为它很小。但是在添加大量 PHP 之后，您将}到处都是这些挂括号。当它们像等时更容易跟踪代码块的关闭endIf; endWhile;。我还将 HTML 保留为 HTML，而不是必须回显的大字符串，再次因为这样对我来说看起来更好。它还使处理引号"更容易，然后必须连接 PHP '<tag attr="'.$php.'">'。

这些事情你可以做任何一种方式，只是我在格式和可读性方面有点特别和完美主义者。有点像我的方式。

Javascript (jQuery)

(function($){
  $(document).ready(function() {

      //get and cache Outer HTML for .form_block
      var selectHtml = $('.form_block:eq(0)')[0].outerHTML;

      $("#add").click(function() {
            $('#form_block_wrapper').append(selectHtml);
      });

            //use .on for events on dynamic content ( event delegation )
     $("#form_block_wrapper").on('click', 'input[name="remove"]', function() {
         $(this).closest(".form_block").remove();
     });

      $("#insert").click(function() {
         //I have no idea what you want to do here?
         //Are you trying to insert something into the page
         //or Are you trying to insert the data into the DB, ie submit it to the server. 

          //you can serialze all the data https://api.jquery.com/serialize/
         //$('#form_block_wrapper').serialize(); 

         //you can get the selected options and get their value
         var d = [];
         $('select[name="idKategori[]"]').each( function(){
            d.push($(this).val());
         });
         alert(d.join(','));
      });

  });  //document.ready
})(jQuery); //assign jQuery to $ - for compatibility reasons.

这里要做的第一件事不是克隆，select而是拍摄它的 html 快照。存储在selectHtml. 这有几个更好的原因。

  • 如果用户更改了这些字段的值，当我们克隆时，我们必须重置所有这些值。

  • 如果我们删除所有表单块，就没有什么要克隆的了，我们在没有表单元素的页面上被击中，告诉我们刷新。

  • 仅基于我的代码的长度-vs-您的原始代码，应该很明显哪种方法更易于处理。简单易读和维护，事半功倍。

要注意的另一件事是，您在创建每个按钮时将删除按钮的事件附加到它们。$.on虽然这没关系，但我们可以通过使用事件委托来处理这个元素来做得更好。

我仍然不知道你想用 Insert 做什么，

  • 你的意思是在页面中插入一些东西

  • 你的意思是提交表格并在某处插入数据。

但希望这会有所帮助

于 2017-10-30T03:49:21.550 回答