選択オプション値が変更された行の列の値を取得

Question

ユーザーがいくつかのプロジェクトに評価を与え、これらの評価をバックグラウンドで保存できるWebページをモデル化しようとしています。私はこのようなテーブルを持っています プロジェクトID |タイトル|評価。評価列では、条件付きでいくつかの列にタグを選択します。それ以外の場合はテキストがあります。オプションの値が変更されたときにjavascript関数をトリガしたonchangeイベントをselectに追加しましたが、select値が変更された行のproject_id feildの値を抽出したいと思います。私はJavaScriptの初心者ですので、私の問題を解決できるものを見つけることができませんでした。プロジェクトIDの値が必要です。なぜなら、私のデータベースにAjax Calls.Hereを使ってデータベースを保存する必要があるからです。 コード：

<?php if($row['status']==='complete' && $result2->num_rows==0) 
      { ?> 

       <select id="rating select" onchange="rating()" class="form-control" name="projectrating"> 
        <option selected>0</option> 
        <option value="1" >1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
       </select> 

      <?php } ?> 

       <?php if($row['status']==='complete' && $result2->num_rows > 0) 
      { $row2=$result2->fetch_assoc(); 
       $rating=$row2['rating']; 
       echo "You have already rated this Project!,You have given the project a rating of $rating"; 
       } ?> 

      <?php 
      if($row['status']!=='complete') { ?> 
       <?php echo "Ratings only for complete projects" ?> 





      <?php } ?> 
        </td> 
      <?php } ?> 

のJavascript :(私はPHPスクリプトへのAjaxを使用してそれを送ることができますので、私は値なしで変数パラメータを入力する必要があります）

<script> 

    function rating() 
    { 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
    if (this.readyState === 4) { 
     if(this.status===400){ 
     alert("There was a problem while giving the rating"); 
    } 
     if(this.status===200) 
     { 

      alert("Rating given succesfully"); 
      window.location.reload(true); 


     } 

      } 
    }; 
     xhttp.open("POST", "rating.php", true); 
     xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     var param= 
     xhttp.send(param); 

     } 

Answer 1

期待される結果を達成するために、使用。下のオプション

オプション1：最も近いTRと子供を使用して

1. 、あなたが

"）（式（）テキスト" 変化に各セルをすることによって得ることができる

を完全な行の値を取得することができます

Codepen - https://codepen.io/nagasai/pen/YVERRv

JS：

$(document).ready(function(){$('select').on('change',function(){ 
    var $td= $(this).closest('tr').children('td'); 
    var project= $td.eq(0).text(); 
    console.log(project) 
}) 
          }) 

オプション2： parentElementとのchildNodesでプレーンなJavaScriptを使用して評価を使用して（）のonchange機能

HTML：

<select onchange="rating(this)" class="form-control" name="projectrating"> 

JS：

a.parentElementが得られます

function rating(a){ 
    console.log((a.parentElement) .parentElement.childNodes[1].innerHTML) 
} 

それを囲んでいるselectとparentElementはtr要素で、最初の子innerHTMLは最初の列の値を返します

https://codepen.io/nagasai/pen/qmVQwp

Answer 2

まず、あなたはあなたがそうあなたのjsのつもりだろう

var paramToSend = document.getElementById("rating").value; 

を送りたいものを決定すべき一つの要素その後、

<select id="rating" onchange="rating()" class="form-control" name="projectrating"> 

のために複数のIDを使用することはできませんこのように

function rating(){ 
var paramToSend = document.getElementById("rating").value; 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState === 4) { 
     if(this.status===400){ 
      alert("There was a problem while giving the rating"); 
     } 
     if(this.status===200){ 
      alert("Rating given succesfully"); 
      //window.location.reload(true); 
     } 

    } 
}; 
xhttp.open("POST", "rating.php", true); 
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
var param="postedParam=" + paramToSend ;  
xhttp.send(param); } 

rating.phpであなたは$ _POST ['postedParam']