0

我正在尝试创建一种在调用时将数据发布到 mysql 的方法。唯一的问题是我无法弄清楚如何从字段中传递正确的信息，因为它们的 ID 是在运行时创建的。

这些字段是使用 while 循环创建的，双击它们变得可编辑，然后在模糊时它们应该恢复到以前的状态并发布对数据库所做的任何更改。（这是我第一次写这些我希望我很清楚！）

我的JS

function disablefarm(farmid) {
  $(function() {
    var farmstr = farmid.replace(/[^0-9\.]+/g, ""),
      farmID = $("#farm" + farmstr + "").val(),
      farmName = $("#farmn" + farmstr + "").val(),
      fieldarray = $([]).add(farmName).add(farmID);
    $("input:text[id=" + farmid + "]").attr('readonly', 'readonly');
    $("input:text[id=" + farmid + "]").addClass("noshow");
    var epost_url = "editfarm.php";
    var epost_data = fieldarray.serialize();
    $.post(epost_url, epost_data, function(response) {
      alert(response);
    });
  });
}

html 元素是在输出的 while 循环中创建的

echo "<td name='farmL' ><input type='hidden' value='$id' id='farm$id' />   <input type='text' id='farmn$id' value='$fname' readonly='readonly' class='noshow' size='33' ondblclick='enablefarm(this.id)' onblur='disablefarm(this.id)' />";

最后 editfarm.php 看起来像

if (filled_out($_POST)){
    $efarmID = check_input  ($_POST['farmID']);
    $efarmName = check_input  ($_POST['farmName']);
}
else{           
    echo "not committed";       
}

$query = "UPDATE farm_name
          SET farmName='".$efarmName."' 
          WHERE farmID=".$efarmID.";";
$result = mysql_query($query);
if(!$result)
{   
    echo"".stripslashes($efarmName)." not updated";}
else{
    echo"".stripslashes($efarmName)." updated"; 
}

HTML 输出如下所示

<tr id='row27'>
    <td name='farmL'>
        <input type='hidden' value='27' id='farmid27' />
        <input type='text'
               id='farmn27'
               value='111 Gary farms'
               readonly='readonly'
               class='noshow'
               size='33'
               ondblclick='enablefarm(this.id)'
               onblur='disablefarm(this.id)' />
    </td>
</tr>

谢谢！

4

2 回答 2

1

如果您稍微重构代码，您可能会发现它更容易。如果您修改 PHP 代码以输出表格内容，如下所示：

<td>
    <input type="text"
           name="farmid27"
           value="111 Gary Farms"
           class="farmEdit" />
</td>

（缩进只是为了使其可读。）

Then you can rewrite your JavaScript to something like:

$(document).ready(function() {
    $(document).on("blur", "input.farmEdit", function() {
        var $inputElement = $(this),
            inputName = $inputElement.attr("name"),
            inputValue = $inputElement.attr("value")
            curFarmId = inputName.substr(6); // Strip off the "farmid.." prefix

        $.post(
            "editfarm.php",
            {
                farmID : curFarmId,
                farmName : inputValue
            },
            function(response) {
                alert(response);
            });
    });
});

This takes advantage of jQuery delegated events and the fact that the this object in a click handler refers to the page element that was clicked (the <input> in this case).

于 2013-09-17T12:44:02.843 回答
1

Reducing js to minimum, I would have done this by introducing an extra attribute to your dynamically generating inputs.

<td><input type="text" data-id="27" name="farmid27" value="111 Gary Farms" class="farmEdit" /></td>

Now simply update your js to:

$(document).on("blur", "input.farmEdit", function() {                
            $.post("editfarm.php",    
            {
                farmID : $(this).attr('data-id'),
                farmName : $(this).val()
            },
            function(response) {
                alert(response);
            });
    });

Here you can see the 'data-id' attribute removed the dependency on input name, and I would suggest why to introduce input name when you are posting it individually using ajax(atleast for these types of cases).

于 2013-09-17T13:35:48.933 回答