javascript - 表单中的复选框到 javascript 到 php

Question

我有一个带有基于 MySQL 数据的动态复选框的表单。提交时，DIV 会刷新，不会使用 JavaScript 闪烁。我正在尝试将表单数据发送到 PHP 以更新 MySQL，但由于我缺乏 JavaScript 知识，我经常遇到一个或另一个错误。我当前的尝试(见下文)在 FireBug 中给出了“TypeError: document.multipix_form.pix is undefined”错误。

function multipicupdate(php_file, purpose, where) {
    var request =  getXMLHTTP();        // call the function for the XMLHttpRequest instance
    var a = document.getElementById("optone").value ;
    var b = document.getElementById("table").value ;
    var boxes = document.multipix_form.pix.length
    txt = ""
    for (i = 0; i < boxes; i++) {
        if (document.multipix_form.pix[i].checked) {
            txt = txt + document.multipix_form.pix[i].value + " "
        }
    }

  var  the_data = 'purpose='+purpose+'&var1='+a+'&var2='+b+'&var3='+txt;
  request.open("POST", php_file, true);         // set the request
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(the_data);       // calls the send() method with datas as parameter
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(where).innerHTML = request.responseText;
    }
  }
}

表单名称为 multipix_form。三个表单输入是 optone(选择)、table(选择)和 pix[](复选框)。正如我之前所说，pix[] 是动态的。正是复选框数据从 JavaScript 到 php 的传递让我感到困惑。我的表单提交是:

<input type="button" onClick="multipicupdate('php/ajaxprocess.php', 'multipix', 'message_profile'); return false;" value="Save changes to this photo">

ajaxprocess.php 将获取表单数据并更新 MySQL。

Answer 1

正如您已标记 jQuery，这里有一个 jQuery 解决方案。您可以大大简化这段代码。首先，您可以使用 serialize() 根据该表单中的输入值创建查询字符串。然后您可以使用 $.ajax 将该信息发送到您需要的页面。试试这个:

<input type="button" value="Save changes to this photo" id="multipicupdate">

$('#multipicupdate').click(function() {
    $.ajax({
        url: '',
        type: 'POST',
        data: $('#myForm').serialize(), // change the selector as needed
        success: function(data) {
            $('#message_profile').html(data);
        }
    });
});