javascript - JQuery/AJAX 从 MYSQL 更新 DIV - 从不同输入 2 个输入获取值

Question

我对 JQuery 有点陌生，我有一个脚本，它将从 onchange 事件的文本输入中获取值，并将数据发送到外部 PHP 文件，以便我们可以从数据库中获取一些数据来获取它进入 ID 为“txtHint3”的 DIV。

整个脚本工作得很好，但我遇到的问题是我需要从 2 个不同的文本输入字段获取值并将这 2 个值发送到 PHP 文件。

本质上，如果 2 个输入文本中只有 1 个发生更改，我们需要将这 2 个值推回到 jQuery 和 PHP 脚本。

我尝试了几种不同的方法，但没有任何明显的结果。任何帮助/想法将不胜感激!!

这是我迄今为止编写的 jQuery 代码:

<script>
    function recordTrans(str) {
if (str == "") {`enter code here`
    document.getElementById("txtHint3").innerHTML = "";
    return;
} else {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint3").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","recordtransaction.php?pos=1&code="+str,true);
    xmlhttp.send();
  }
}
</script>

function recordTrans(str) {
if (str == "") {
    document.getElementById("txtHint3").innerHTML = "";
    return;
} else {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint3").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","recordtransaction.php?pos=1&code="+str,true);
    xmlhttp.send();
}

这是我的 HTML 表格/表单:

<table class="table table-striped" id="FinancialDataTable">
            <thead>
              <tr>
                <th style="width: 10%;">Code</th>
                <th style="width: 5%;">Qté</th>
                <th style="width: 25%;">Produit</th>
                <th style="width: 25%;">Description</th>
                <th style="width: 25%;">Prix</th>
                <th style="width: 10%;">Action</th>
              </tr>
            </thead>

            <tbody>



              <tr>
                <td>

                    <div class="form-group">
                  <input type="text" id="code" name="code" class="form-control" onchange="recordTrans(this.value)"   />
                </div>

                </td>
                <td>

                    <div class="form-group">
                  <input type="text" name="qte" id="qte" class="form-control" value="1" onchange="recordTrans(this.value)" />
                </div>

                </td>

                <td colspan="3"><div id="txtHint3" style="width: 100%"> </div></td>



                <td><button type="button" class="btn btn-primary btn-sm" onClick="$(this).addClone();">Ajouter un autre article</button></td>
              </tr>

                             </tbody>
          </table>

Answer 1

<input type="text" id="code" name="code" class="form-control" onchange="oncode_change(this.value)"   />

function oncode_change(str){
   var qteval = $("#qte").val();
   recordTrans(str,qteval )
}

function onqte_change(str){
   var codeval = $("#code").val();
   recordTrans(codeval,str)
}

function recordTrans(codeval, qteval) {
     ...your ajax call here
}