從數據庫的字段中賦值給html元素

我有一個名爲quiz（quest，op1，op2，op3，op4，answer，num）的數據庫表，除num之外的所有字段的類型都是varchar，num是主鍵。現在在一個PHP頁面中，我需要將這個問題（<p>元素）動態地作爲任務字段進行檢索，四個單選按鈕使它們的值由該數據庫的op（n）字段分配。請解釋我可以如何做到這一點。 HTML：全選從數據庫的字段中賦值給html元素

<html> 
<head> 
<script language="javascript"> 

function loadXMLDoc() 
{ 
var q=Math.floor((Math.random()*3)+1); 
var xmlhttp; 
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) 
    { 
    [color=#8000FF]document.getElementById("op1").innerHTML=xmlhttp.responseText; 
    document.getElementById("op2").innerHTML=xmlhttp.responseText; 
    document.getElementById("op3").innerHTML=xmlhttp.responseText; 
    document.getElementById("op4").innerHTML=xmlhttp.responseText;[/color]//this is the code i need help //with 
    } 
    } 
xmlhttp.open("GET","questions.php?num="+q,true); 
xmlhttp.send(); 
} 
</script></head> 
<h1 align='center'><b>Object oriented programming-#1</b></h1> 
<h2 align='center'>Supriya Raheja<h2> 
<title>quiz has started</title> 
<body> 
    <div style="text-align:left"> 
    <table border="1"> 
<tr> 
    <td width="25%"><table border="0"> 
<tr> 
    <td><button type="button">Goto Q1</button></td> 
    <td><input type="checkbox"> 
</tr> 
<tr> 
    <td><button type="button">Goto Q2</button></td> 
    <td><input type="checkbox"> 
</tr> 
<tr> 
    <td><button type="button">Goto Q3</button></td> 
    <td><input type="checkbox"> 
</tr> 
<tr> 
    <td><button type="button">Goto Q4</button></td> 
    <td><input type="checkbox"> 
</tr> 
<tr> 
<td><button type="button">Goto Q5</button></td> 
<td><input type="checkbox"> 
</tr> 
<tr> 
<td><button type="button">Goto Q6</button></td> 
<td><input type="checkbox"> 
</tr> 
<tr> 
<td><button type="button">Goto Q7</button></td> 
<td><input type="checkbox"> 
</tr> 
<tr> 
<td><button type="button">Goto Q8</button></td> 
<td><input type="checkbox"> 
</tr> 
<tr> 
<td><button type="button">Goto Q9</button></td> 
<td><input type="checkbox"> 
</tr> 
<tr> 
<td><button type="button">Goto Q10</button></td> 
<td><input type="checkbox"> 
</tr> 
<tr> 
<td><button type="button">Goto Q11</button></td> 
<td><input type="checkbox"> 
</tr> 
</td> 
</table> 
<td width="1000px"> 

<input type="radio" name="op1" value="" ></br> 
<input type="radio" name="op2" value="" ></br> 
<input type="radio" name="op3" value="" ></br> 
<input type="radio" name="op4" value="" ></br> 
<button style="text-align:bottom" type="button" onclick="loadXMLDoc()">Change 

Content</button> 
</td> 
</tr> 
</table> 
</body> 
</html>

PHP

<?php 
$q=$_GET["q"]; 

$con = mysqli_connect('localhost','root','ayushigarg','quiz4'); 
if (!$con) 
    { 
     die('Could not connect: ' . mysqli_error($con)); 
    } 

mysqli_select_db($con,"quiz4"); 
$sql="SELECT * FROM quiz WHERE num = '".$q."'"; 

$result = mysqli_query($con,$sql); 

//echo "<table border='1'> 


$row = mysql_fetch_array($result) 

    echo '{"questionTxt" : "' . $row['quest'] . 
     '", "answ1" : "' . $row['op1'] . 
     '", "answ2" : "' . $row['op2'] . 
     '", "answ3" : "' . $row['op3'] . 
     '", "answ4" : "' . $row['op4'] . 
     '", "hint" : "' . $row['hint'] . '"}'; 



mysqli_close($con); 
?> 
?>

我想這些answ1，answ2等值被分配到OP1，OP2等值whecn我點擊更改內容按鈕...請幫助

來源

2013-07-09 Ayushi Garg

document.getElementById("op2").innerHTML

設置與ID OP2元素的innerHTML，例如：

如果你想設置一個字段的值

<h1 id="op2">inner HTML</h1>

，您需要：

document.getElementById("op2").value = "new value";

但我建議使用jquery這個，你會賺的少痛！

我知道這不是reqested，但要清楚，我可以告訴你如何將使用jQuery（未經測試）工作：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 

<script> 

$(document).ready(function() { 

    $('#btn1').click(function(){ 

     var q=Math.floor((Math.random()*3)+1); 
     var myurl = "questions.php?num="+q; 
     $.getJSON(myurl, function(data) { 

      $('#qs1').html(data.questionTxt); 

      $('#op1').val(data.answ1); 
      $('#aw1').html(data.answ1); 

      $('#op2').val(data.answ2); 
      $('#aw2').html(data.answ2); 

      $('#op3').val(data.answ3); 
      $('#aw3').html(data.answ3); 

      $('#op4').val(data.answ4); 
      $('#aw4').html(data.answ4); 
     }); 

    }); 

}); 

</script> 

<h1 id="qs1"></h1> 
<input type="radio" id="op1" name="op" value="" ><span id="aw1"></span></br> 
<input type="radio" id="op2" name="op" value="" ><span id="aw2"></span></br> 
<input type="radio" id="op3" name="op" value="" ><span id="aw3"></span></br> 
<input type="radio" id="op4" name="op" value="" ><span id="aw4"></span></br> 
<button style="text-align:bottom" type="button" id="btn1" value="go"> 

</body> 
</html>

來源

2013-07-09 15:17:31 steven

的document.getElementById（「OP2」）值=「新價值」 ;但是我應該寫什麼來代替新值，以便將值作爲測驗表的op2值？我可以不在HTML中做到這一點？ –

我也試過，但也不管用。點擊按鈕之前和之後沒有變化。 :( –

如果返回的json沒問題，請在螢幕控制檯標籤內查找。我更新了代碼，因爲收音機的ID缺失。 – steven

從數據庫的字段中賦值給html元素

回答

相關問題