点击后自动保存复选框

Question

我的表单在循环中通过复选框来处理多种形式。选项是通过运行我的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> 

Answer 1

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

以下是示例代码：

代码

JSFiddle

＆＃13;

＆＃13;

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);
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;