如何將輸入文本框及其id的值傳遞給javascript函數，以便通過ajax發出請求？

Question

我在html表格單元格中有一些可編輯的文本框！ 每個文本框都有一個峰值按鈕。 我希望將textbox的值和textbox的id發送到javascript函數，這樣就可以向php腳本發送ajax post請求並編輯mysql行！

我的問題是我不知道如何將文本框值及其相應的id傳遞給javascript並更改ajax響應時的文本框按鈕。我的按鈕是否也需要唯一的ID？ 任何人都可以告訴我這是怎么做的。謝謝

 $table3.="<tr>";
 $table3.="<td>" . $row['ID'] ."(".$totalRows. ")</td>";
 $table3.="<td bgcolor=\"#FF0000\"><input type=\"text\" id =\"". $row['ID'] ."\" name=\"". $row['ID'] ."\" value=\"edit\"><button onclick='setNewValue(\"".$row['ID']."\")'>Edit this Row</button></td>";
 $table3.="<td>" . $row['imgPURL'] . "</td>";
 $table3.="<td>" . $row['imgUrl'] . "</td>";
 $table3.="<td>".$line."</td>";  echo "</tr>";

javascript：

<script>
function setNewValue(a,b) {
var button = $(event.target);  // get button here

var text = $("#"+a);
var textboxvalue = text.val();

//alert("inputId:"+a+"\nuInputValue:"+b);


    var url = "./edit.php";
    $.post(url, {
        "method": "post",
        "rowId": a,
        "rowValue": textboxvalue,

    }, function(data) 
       {

          var ajaxResponse = data;

        //alert("success"+ajaxResponse);

            if(ajaxResponse.indexOf("SuccessEdit")>=0)
            {
              //remote the edit button
               button.hide();
            } 
            else
            {
              //change caption of edit button to try again
             button.text("some text");
            }

      })
    }

</javascript>

Answer 1

通過setNewValue（23）之類的函數傳遞輸入框的id

function setNewValue（id）{

$（ “＃” + ID）;

}

多數民眾贊成你可以獲得輸入框的所有值

如果將提交按鈕命名為id或更確切的類，則此方法有效;

Answer 2

這一行：

$table3.= "<td bgcolor=\"#FF0000\"><input type=\"text\" id =\"". $row['ID'] ."\" name=\"". $row['ID'] ."\" value=\"edit\"><button onclick=\'setNewValue()\'>Edit this Row</button></td>";

至：

$table3.= "<td bgcolor=\"#FF0000\"><input type=\"text\" id =\"". $row['ID'] ."\" name=\"". $row['ID'] ."\" value=\"edit\"><button onclick=\'setNewValue(" . $row['ID'] . ")\'>Edit this Row</button></td>";

然后在你的js：

function setNewValue(id){
    var text = $("#"+id);
    var value = text.val();

}

更新，隱藏按鈕或更改標題

function setNewValue(id){
    var button = $(event.target);  // get button here

     // change caption 
     button.text("some text");

     // hide 
     button.hide();

}

Answer 3

 $table3.="<tr>";
 $table3.="<td>" . $row['ID'] ."(".$totalRows. ")</td>";
 $table3.="<td bgcolor=\"#FF0000\"><input type=\"text\" id =\"". $row['ID'] ."\" name=\"". $row['ID'] ."\" value=\"edit\"><button onclick=\'setNewValue(this)\'>Edit this Row</button></td>";
 $table3.="<td>" . $row['imgPURL'] . "</td>";
 $table3.="<td>" . $row['imgUrl'] . "</td>";
 $table3.="<td>".$line."</td>";  echo "</tr>";

'this'會對點擊的按鈕元素進行處理。

function setNewValue(btn) {
   var cell = btn.parentNode.querySelector("input[type='text']");
   var input = cell.querySelector("input[type='text']");
   var inputId = input.id;

...

Answer 4

你可以像普通的js參數一樣傳遞這個==>

<input type=text id = <?php echo $row['id'];  ?> onclick= setNewValue(<?php echo $row['id']; ?>);


    function setNewValue(id){

    var obj = $("#"+id);

    console.log(obj);

    }

Answer 5

請記住，如果他正在使用默認類型提交的元素，他的整個表單可能會提交。 添加type =“button”或在JS事件上使用event.preventDefault（）。