Question

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

这是我的代码，底部的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);
    });

我的英语非常糟糕，所以让我尽可能简单地解释一下。

我想像通常那样用提交按钮创建一个表单字段。区别是我想制作一个克隆按钮，所以我可以添加单个提交按钮的更多表单字段。
我写的代码是我从另一个页面学到的东西，我不熟悉它。
我不知道如何从克隆页面获取vallue，我不知道如何在脚本中处理值本身，因为我真的在javascript noob
我想要做的是如何在点击提交按钮时从所有克隆的表单字段中获取价值？我的familiran方法是POST方法，但我考虑在javascript上写下我的所有查询，因为POST方法无法为所有表单字段进行循环，这就是为什么我在javascript上进行循环

对不起我的英语，我不是很擅长

Answer 1

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

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%;">

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

   $_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之后，你可以将所有这些挂起{{1}}括号放在任何地方。当它们像} endIf;那样时，跟踪代码块的关闭会更容易。我还将HTML保留为HTML而不是必须被回显的大字符串，再次因为它看起来这样对我更好。它还使得处理引号endWhile;更容易，然后必须连接PHP "。

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

Javascript（jQuery）

'<tag attr="'.$php.'">'

这里要做的第一件事不是克隆(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.，而是拍摄它的html快照。存储在select中。有几个原因可以解决这个问题。

如果用户更改了这些字段的值，那么当我们克隆时，我们必须重置所有这些值。
如果我们删除所有表单块，就没有什么可以克隆的，我们会在没有表单元素的页面上敲击，告诉我们刷新。
仅基于我的代码的长度-vs-你的orignal代码，应该很明显哪种方法更容易处理。简单易于阅读和维护，用更少的资源做更多事情。

另外需要注意的是，您是在创建每个按钮时将删除按钮的事件附加到每个按钮。虽然这没问题，但我们可以通过使用事件委派selectHtml来处理此元素。

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

您的意思是在页面中插入内容
您的意思是提交表单并在某处插入数据。

但希望这会有所帮助

从克隆表单字段插入查询

1 个答案: