将div转换为表单输入

时间:2018-07-02 09:45:52

标签: jquery

我有一个获取div并将其转换为表单字段的函数。我如何获取并发送div内容/文本(fieldValue)到函数,以将其实现为表单字段值?

$(document).on("click", ".edit-btn", function(e) {
  var element = $(this);

  // implant form filed inside DIVs
  element.parents(".item").find(".item-edit").each((index, data) => convert_text_to_form_field($(data)));
});

function convert_text_to_form_field(data) {
  var field;
  var fieldValue = /* SOME DIV CONTENT */
  var fieldName = data.data("name") || "";
  var fieldType = data.data("type") || "";

  switch (fieldType) {
    case "input":
      field = "<input type='text' name='" + fieldName + "' value='" + fieldValue + "' />";
      break;
    case "textarea":
      field = "<textarea type='text' name='" + fieldName + "'>" + fieldValue + "</textarea>";
      break;
  };

  if (fieldRequire = 1)
    field = field + "<span>*</span>";

  data.html(field);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action='#' method='post' id="4" class='item'>
  <div class='item-edit' data-type='input' data-name='agnt[name]' data-require='1'>SOME NAME</div>
  <div class='item-edit' data-type='textarea' data-name='agnt[contact]'>SOME contact</div>

  <div class='col-md-2 panel-menu'>
    <span class='edit_msg'></span>

    <a href='#' class='btn btn-success edit-btn'>EDIT</a>

  </div>
</form>

0 个答案:

没有答案