2014-12-20 2 views
0

나는 내 친구와 나에게 사이트를 만들고 있습니다. 주요 기능은 누가 더 나은지 묻는 설문 조사입니다. 입력 유형이 라디오로 설정되어 있습니다. 설문 조사에서 클릭 만하는 대신 내 맞춤 이미지를 버튼으로 사용할 수 있는지 알고 싶습니다. 하나의 버튼에는 내 이름이 있고, 다른 버튼에는 내 친구의 이름이 있습니다. PHP 폴링 용 사용자 정의 버튼

여기에 현재 코드입니다 : 물론

<html> 
    <head> 
     <title>Home</title> 
     <meta name="author" content="My Name"> 
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 

     <link rel="stylesheet" rev="stylesheet" href="divs.css" 
      type="text/css" media="screen" charset="utf-8" /> 
     <link rel="stylesheet" rev="stylesheet" href="styles.css" 
      type="text/css" media="screen" charset="utf-8" /> 

     <script> 
      function getVote(int) { 
       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("poll").innerHTML=xmlhttp.responseText; 
       } 
           } 
        xmlhttp.open("GET","poll_vote.php?vote="+int,true); 
       xmlhttp.send(); 
       } 
     </script> 
    </head> 

    <body> 

     <div id="all"> <!-- Start All Div --> 

      <div id="header"> <!-- Start Header Div --> 

       <embed width="800" height="100px" src="../Media/Banner/banner.swf"> 
       <embed width="800" height="50px" src="../Media/DD Menu/ddmenu3.swf"> 

      </div> <!-- End Header Div --> 

      <div id="main"> <!-- Start Main Div --> 

       <div id="poll"> 
        <h3>Me or Friend?</h3> 
        <form> 
        Me: 
        <input type="radio" name="vote" value="0" onclick="getVote(this.value)"> 
        <br> 
        Friend: 
        <input type="radio" name="vote" value="1" onclick="getVote(this.value)"> 
        </form> 
       </div> 

      </div> <!-- End Main Div --> 

      <div id="footer"> <!-- Start Footer Div --> 

       <p class="footer">&copy; Copyright, 
        2014 - <script language="javascript" type="text/javascript"> 
             var today = new Date() 
             var year = today.getFullYear() 
             document.write(year) 
            </script></p> 

      </div> <!-- End Footer Div --> 

     </div> <!-- End All Div --> 

    </body> 
</html> 


<?php 
$vote = $_REQUEST['vote']; 

//get content of textfile 
$filename = "poll_result.txt"; 
$content = file($filename); 

//put content in array 
$array = explode("||", $content[0]); 
$yes = $array[0]; 
$no = $array[1]; 

if ($vote == 0) { 
    $yes = $yes + 1; 
} 
if ($vote == 1) { 
    $no = $no + 1; 
} 

//insert votes to txt file 
$insertvote = $yes."||".$no; 
$fp = fopen($filename,"w"); 
fputs($fp,$insertvote); 
fclose($fp); 
?> 

<h2>Result:</h2> 
<table> 
<tr> 
<td>Yes:</td> 
<td> 
<img src="poll.gif" 
width='<?php echo(100*round($yes/($no+$yes),2)); ?>' 
height='20'> 
<?php echo(100*round($yes/($no+$yes),2)); ?>% 
</td> 
</tr> 
<tr> 
<td>No:</td> 
<td> 
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>' 
height='20'> 
<?php echo(100*round($no/($no+$yes),2)); ?>% 
</td> 
</tr> 
</table> 
+1

': before' 의사 요소를 살펴보십시오. 정상적인 서클 위에 무언가를 배치 할 수 있습니다. – David

답변

0

하지만, 자바 스크립트 함께합니다. 다음은 Jquery를 사용한 예제이다. 입력 라디오는 화면에서 벗어나 위치하므로 사용자가 보지 않고 설정할 수 있습니다. jQuery로

HTML

<p>Choice 1</p> 
<img id="choice-1" class="button" src="path/to/img.png"/> 
<input id="choice-1-input" type="radio" name="vote" value="0" style="position: absolute; left: -9999px" onclick="getVote(this.value)"> 

자바 스크립트. 요청 된대로 컨텍스트가 포함되었습니다.

$(document).ready(function() { 

    $('#choice-1').click(function() 
    { 
    radiobtn = document.getElementById("#choice-1-input"); 
    radiobtn.checked = true; 
    }); 

} 
+0

HTML과 자바 스크립트를 편집했습니다. 라디오 버튼에 선택자를 사용하지 않았습니다. 이제는 효과가있다. – Goose

+0

도움을 주셔서 감사합니다,하지만 난 조금 noobish, 그래서 어디서 js를 삽입합니까? – CarrdMan

+0

문서 준비 기능의 아무 곳이나 있습니다. 이렇게 $ (document) .ready (function() {* HERE *}. 명확하게 편집 할 것입니다. – Goose