2017-05-08 71 views
0

我試圖對允許用戶給某些項目評分並在後臺存儲這些評分的網頁建模。我有這樣的桌子 項目標題|標題|評級。在評分欄中,我有條件地選擇某些欄中的標籤,否則有一些文字。我在選擇哪個觸發了javascript函數時添加了一個onchange事件,當選項的值被更改時,但是我想提取選擇值已更改的行的project_id feild的值。我是一個新手在javascript中,所以我找不到任何可以解決我的問題,我需要該項目的id值,因爲我需要將該值存儲在我的數據庫中,我已經通過Ajax調用它的工作。這裏是我的表格: 代碼:獲取選擇選項值已更改的行的列的值

<?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 :(我需要填寫可變參數是沒有價值的,所以我可以把它使用Ajax的PHP腳本發送)

<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); 

     } 

+0

什麼是**評級()**功能?請顯示您的js –

+0

發佈javascript – user3930213

回答

0

爲了達到預期的結果,使用低於選項

選項1:

  1. 使用最接近tr和孩子,你可以改變得到完整的行值
  2. 每個單元可以通過以下方式獲得 「EQ()文本()。」

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和使用等級()函數電平變化

HTML:

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

JS:

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

a.parentElement會給td包含它的select和parentElement是tr元素,並且第一個孩子innerHTML給出第一列值

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

+0

嗨,這可以在java腳本中完成?我不太瞭解jQuery庫。 – user3930213

+0

請檢查我的第二代codepen - https://codepen.io/nagasai/pen/qmVQwp使用普通的javascript –

+0

非常感謝你 – user3930213

0

第一,你不能使用多個ID的一個元素

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

,那麼你應該確定要發送

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

什麼讓你的js將要去像這樣

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

所以在您的評級.php你會得到$ _POST ['postedParam']