2014-04-15 2 views
0

나는 솔직히 이걸 어디서 시작해야할지 전혀 모른다. 기본 html로 처리하는 방법을 알고 있지만 데이터베이스에서 질문을 가져와야하지만이 방법이 훨씬 복잡하다고 느낍니다.라디오 선택에 따라 더 많은 라디오 버튼을 표시 하시겠습니까?

혼란스러운 점은 for 루프를 사용하여 모든 최상위 수준 질문을 표시해야한다는 것입니다. 그런 다음 최상위 레벨 질문에 예를 선택하면 하위 레벨 질문이 표시됩니다. 지금은 저 레벨 질문의 잠금을 해제하는 방법을 모르기 때문에 최상위 질문 만 표시합니다.

여기 내 HTML 코드입니다.

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 
    jQuery(function($){ 

    // Prevents errors in old IE. 
    if(!window.console || !window.console.log) window.console = {log: function(){}}; 

    // Enable debugging for complex logic. 
    var debug = true; 

    function checkConditions(inputs, views){ 
     views.each(function(){ 
     var view = $(this); 
     var conditions = view.attr('data-view-conditions').split(','); 
     var display = true; 

     // Loop over all required conditions to be met. 
     for(var i = 0; i < conditions.length; i++){ 
      var name = conditions[i].split(':')[0]; 
      var value = conditions[i].split(':')[1]; 
      var input = inputs.filter('[name="' + name + '"]:checked'); 

      if(debug) console.log('\nRecalculating view conditions.'); 

      if(!input.length){ 
      display = false; 
      if(debug) console.log('View not show as no :checked input with the name "' + name + '" was found.'); 
      }else{ 
      if(value != undefined && input.val() != value){ 
       display = false; 
       if(debug) console.log('View not show as no :checked input with the name "' + name + '" has the value of "' + input.val() + '". Value needed was: "' + value + '".'); 
      } 
      } 
     } 

     if(display){ 
      view.css({display: 'block'}); 
     }else{ 
      view.css({display: 'none'}); 
     } 

     }); 
    } 

    $('form').each(function(){ 
     var form = $(this); 
     var inputs = form.find('input[type="checkbox"], input[type="radio"]'); 
     var views = form.find('[data-view-conditions]'); 

     // Recalculate which views to be shown each time the inputs change. 
     inputs.on('change', function(e){ 
     checkConditions(inputs, views); 
     }); 

     // Check conditions to set up required view state on page load. 
     checkConditions(inputs, views); 
    }); 

    }); 
    </script> 

    <!--<link href="css/bootstrap.min.css" rel="stylesheet">--> 



<meta charset="utf-8"> 
<title>Submit a Ticket</title> 

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/forms-min.css"> 
<style> 
.myForm { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 768px; 
} 
</style> 
</head> 

<body> 
<form name="ticket1" class="pure-form pure-form-stacked myForm" action="flashpoint_processing.php" method="post"> 

<h2>Submit A Ticket</h2> 


<legend> Your Details </legend> 
<label> 
<span>First Name: </span> 
    <input id="FirstName" name="FirstName" type="text" placeholder="" class="input-xlarge" required> 
</label> 
<label> 
<label> 
<span>Last Name: </span> 
    <input id="LastName" name="LastName" type="text" placeholder="" class="input-xlarge" required> 
</label> 
<label> 
<span> Business Name </span> 
    <input id="Busname" name="Busname" type="text" placeholder="" class="input-xlarge"> 
</label> 

<label>Phone</label> 
    <input id="Phone" name="Phone" type="text" placeholder="" class="input-xlarge" required> 
<label>Extension</label> 

    <input id="Ext" name="Ext" type="text" placeholder="" class="input-small"> 
<label> E-mail</label> 
    <input id="email" name="email" type="text" placeholder="" class="input-xlarge" required> 

<label>Preferred Method of Contact</label> 
     <input type="radio" name="contact" id="contact-0" value="Phone" checked="checked"> 
     Phone 
     <input type="radio" name="contact" id="contact-1" value="Email"> 
     Email 


<label> 
<legend>Issue</legend> 
<? 
$topq = array(); 
$topid = array(); 
$results = mysql_query("select questions, ID from tbl_questions where top=1"); 
while($row = mysql_fetch_array($results)) { 
    $topq[] = $row['questions']; 
    $topid[] = $row['ID']; 
}; 

for($i=0;$i<count($topq);$i++){ 
    echo "<label>"; 
    echo $topq[$i]; 
    echo "</label>"; 
    echo " <input type=\"radio\" name=\"question+$i\" id=\"$i\" value=\"1\" checked=\"checked\">No 
     <input type=\"radio\" name=\"question+$i\" id=\"$i+1\" value=\"2\">Yes"; 
    echo $topid[$i]; 
    echo "<br>"; 
}; 
?> 
<br> 
<input type="submit" name="ticket" value="Submit"> 
</form> 

다음은 내가하려는 일의 예입니다. http://jcsites.juniata.edu/students/bookhjr10/flashpoint/test6.html

질문을 하드 코딩하면 쉽게 할 수 있지만 데이터베이스에서 가져올 수 있습니다.

답변

0

Jquery가 인생을 바꿔 줄 것입니다. 각 라디오 버튼에 이벤트 리스너를 설정 한 다음 change 이벤트에서 새 항목을 서버의 배열에로드 한 다음 해당 배열을 반복하여 html을 생성하면됩니다. 그런 다음 .html() 메서드를 사용하여 생성 된 html을 선택한 div에 삽입 할 수 있습니다.

관련 문제