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>

(インデントは読みやすくするためのものです。)

次に、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>この場合は) を参照するという事実を利用します。

于 2013-09-17T12:44:02.843 に答える
1

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 を使用して個別に投稿するときに入力名を導入する理由をお勧めします (少なくともこれらのタイプのケースでは)。

于 2013-09-17T13:35:48.933 に答える