Question

我正在尝试创建一个在调用时将数据发布到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>

谢谢！

Answer 1

如果您稍微重构代码，可能会觉得更容易。如果修改PHP代码以输出表格内容，则显示如下：

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

（缩进只是为了让它可读。）

然后，您可以将JavaScript重写为：

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

这利用了jQuery委托事件以及点击处理程序中的this对象引用了被点击的页面元素（在这种情况下为<input>）。

Answer 2

将js降低到最小值，我会通过为动态生成输入引入额外属性来实现此目的。

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

现在只需将你的js更新为：

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

在这里你可以看到'data-id'属性删除了对输入名称的依赖关系，我建议为什么在使用ajax单独发布输入名称时引入输入名称（至少对于这些类型的情况）。

JQuery使用动态创建的ID发布到php

2 个答案: