单击时自动保存复选框

autosave checkboxes on click

本文关键字：保存 复选框 单击      更新时间：2023-09-26

>我把我的表单放在一个循环中，用复选框来收集许多表单。这些选择是通过运行我的php的隐藏iframe提交的。我可以将此复选框自动保存到数据库吗？

<form action='http://www.toppromomkt.com/wp-content/themes/toppromo/insert_wallet.php' method='post'  class="my-form" target='hidden-form'>
  <input class="styled"  type='checkbox' name='pago'   value='yes' <?php if ($che=='yes') {echo "checked='yes'"; } else if ($cccc='') {} else {} ; ?> > <br> </div><div class='tb1 tb1_small sc' >
  <input class="styled"  type='checkbox' name='recibo'   value='yes' <?php if ($rec=='yes') {echo "checked='yes'";} else{}; ?>  > <br></div><div class='tb1 tb3_md sc '>
  <input class="styled"  type="hidden" name="contador"  readonly value="<?php  echo $id_postt1."linha_".$events[0];  ?>"> 
  <input class="styled"  type="hidden" name="id_p"  readonly value="<?php  echo $events[2];?>"> 
  <input type='Submit' class="button white small" value='Salvar' onclick='saved(<?php echo $fid ?>)' />
</form>

您可以创建一个setInterval，该将在单击复选框时初始化，并发出ajax请求将其保存到DB。

下面是一个示例代码：

法典

JSFiddle

var formCount = 1;
var saveInterval = null;
var data = []; // Used to mimic DB
function createForm() {
  var html = "<form id='frm_" + formCount + "' >"
  for (var i = 0; i < 5;) {
    html += "<input type='text' name='input_" + ++i + "' /> <br/>";
  }
  document.getElementById("content").innerHTML += html;
  formCount++;
}
function autoSaveInit(el) {
  if (el.checked) {
    if (!saveInterval) {
      saveInterval = setInterval(function() {
        saveData();
      }, 3000);
    }
  } else {
    window.clearInterval(saveInterval);
    saveInterval = null;
  }
}
function saveData() {
  var forms = document.getElementsByTagName("form");
  var _tempObj = {};
  // Reset Data for Demo purpose.
  data = [];
  for (var i = 0; i < forms.length; i++) {
    _tempObj = new Object();
    _tempObj.formID = forms[i].id;
    _tempObj.data = [];
    var inputs = forms[i].getElementsByTagName("input");
    for (var j = 0; j < inputs.length; j++) {
      var name = inputs[j].name;
      _tempObj.data.push({
        "name": name,
        "value": inputs[j].value
      });
    }
    data.push(_tempObj);
  }
  console.log("Save Completed: ", data);
}
Following is a sample for generating form with auto-save;
<div id="content"></div>
<button onclick="createForm()">Create Form</button>
<input type="checkbox" id="chkAutoSave" onclick="autoSaveInit(this)">
<label for="chkAutoSave">Auto save forms?</label>

相关文章：