티스토리 뷰

웹

설문양식 html 입력 받은 값에 대한 결과 출력까지

krfreedevlife 2018. 2. 21. 18:25
반응형

입력값 여러 조건에서 추천 해주는 설문지 양식 html

 

예)피부스킨타입 설문조사

 

 

설문지에서 입력받아서 총점수를 구하지만 특정한 항목이 선택되어질때는

특정항목의 값만을 따로 추가적으로 결과물 출력에 조건으로 사용됨

 

(설문지 항목) 

 

 

결과조건

 

건성  59점이하

복함성 60~80

지성 981점이상

 

60~80점 복합성 '[ㅇ+크림] 복합성 피부 타입용 크림을 출력.

 

지성은 [ㅇ+크림] 지성 피부 타입용 크림을 출력. 

 

건성은 [ㅇ+크림] 건성 피부 타입용 크림을 출력. 

 

지성인경우에 추가조건

 

출력에 추가되어서 출력됨. 즉, 최대 4개 추천이 나올수있음

 

1. 주황색 항목에서 그렇다 또는 매우 그렇다를 선택하였으면 '[ㅇ+크림] 포어 케어 크림'을 출력.

 

2. 노란색 항목에서 매우 그렇다를 선택했으면 '[ㅇ+크림] 민감성 피부 타입용 크림을 출력.

 

3. 파란색 두개의 항목에서 (매우아니다를 1점 아니다를 2점 보통을 3점 그렇다를 4점 매우 그렇다를 5점으로 했을때)

8점 이상이 나오면은 '[ㅇ+크림] 수분 인텐시브 크림을 출력.

 

 

 

해결방법

 

총점은 클래스로 제어해서 합산 (총점에 영향을 주지 않는 0값으로 되는 것들은 클래스를 넣지 않아줌)

 

추가1해결

radio의 name 값을 일정조건 이상으로 제어 score1>7

 

추가2해결

radio의 name 값이 1인 것을 검사(선택자를 제거해서 총점에 포함은 안됨)

 

추가3해결

두개의 항목에 대한 클래스를 skin1 로 지정해주고 value값을 넣어줘서 제어(역시 총점 클래스인 skin이 아니어서 총점포함 안됨)

 

그리고 모든 radio값이 있을때 결과보기 버튼을 출력함

 

아래는 결과 스샷 및 코드

 

*radio버튼의 유효성 검사와 체크값이 없는 경우 등으로 

javascript 사용

 

 

 

1. 설문지입력폼

 

2. 설문지입력버튼 입력후

 

3. 결과출력부분

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>

 

<body>

<style>

td , h4{text-align:center;}

tbody tr td:first-child {text-align:left;}

input[type='radio'] {visibility: hidden;}

input[type='radio']:after {width:1.5em;height:1.5em;

        border-radius: 0.75em;

        background-color: #fff;

        content: '';

        display: inline-block;

        visibility: visible;

        border: 2px solid #8d8d8e;}

input[type='radio']:checked:after {

        background-color: #007bff;

        content: '';

        display: inline-block;

        visibility: visible;

        border: 2px solid #8d8d8e;

 }

</style>

<div class="container">

<div class="row">

        <div class="col-md-12">

        <h4>[ㅇ+크림] 자가 피부 타입 진단 테스트</h4>

        <div class="table-responsive">                 

        <form id="research" class="form-horizontal" >

<table class="table">

<thead>

<tr>

                            <td>항목</td>

                            <td>매우아니다/매우작다/매우적다</td>

                            <td>아니다/작다/적다</td>

                            <td>보통이다</td>

                            <td>그렇다/크다/많다</td>

                            <td>매우 그렇다/매우 크다/매우 많다</td>        

                        </tr>                    

</thead>

<tbody>

<tr>

                            <td>모공크기가 전박적으로 크다.</td>

                            <td><input class="skin" type="radio" name="s1" value="3"/></td>

                            <td><input class="skin" type="radio" name="s1" value="6"/></td>

                            <td><input class="skin" type="radio" name="s1" value="9"/></td>

                            <td><input class="skin" type="radio" name="s1" value="12"/></td>

                            <td><input class="skin" type="radio" name="s1" value="15"/></td>        

                        </tr>

                        <tr>

                            <td>피지분비가 활발하게 일어난다.</td>

                            <td><input class="skin" type="radio" name="s2" value="2"/></td>

                            <td><input class="skin" type="radio" name="s2" value="4"/></td>

                            <td><input class="skin" type="radio" name="s2" value="6"/></td>

                            <td><input class="skin" type="radio" name="s2" value="8"/></td>

                            <td><input class="skin" type="radio" name="s2" value="10"/></td>          

                        </tr>

                        <tr>

                            <td>피부에 윤기가 있다고 생각한다.</td>

                            <td><input class="skin" type="radio" name="s3" value="2"/></td>

                            <td><input class="skin" type="radio" name="s3" value="4"/></td>

                            <td><input class="skin" type="radio" name="s3" value="6"/></td>

                            <td><input class="skin" type="radio" name="s3" value="8"/></td>

                            <td><input class="skin" type="radio" name="s3" value="10"/></td>    

                        </tr>

                        <tr>

                            <td>세안 후 피부당김이 있다.</td>

                            <td><input class="skin" type="radio" name="s4" value="15"/></td>

                            <td><input class="skin" type="radio" name="s4" value="12"/></td>

                            <td><input class="skin" type="radio" name="s4" value="9"/></td>

                            <td><input class="skin" type="radio" name="s4" value="6"/></td>

                            <td><input class="skin" type="radio" name="s4" value="3"/></td>    

                        </tr>

                        <tr>

                            <td>T존에 유분기가 있다.</td>

                            <td><input class="skin" type="radio" name="s5" value="2"/></td>

                            <td><input class="skin" type="radio" name="s5" value="4"/></td>

                            <td><input class="skin" type="radio" name="s5" value="6"/></td>

                            <td><input class="skin" type="radio" name="s5" value="8"/></td>

                            <td><input class="skin" type="radio" name="s5" value="10"/></td> 

                        </tr>

                        <tr>

                            <td>부분적이나 전체적으로 하얀 각질이 일어난다.</td>

                            <td><input class="skin" type="radio" name="s6" value="15"/></td>

                            <td><input class="skin" type="radio" name="s6" value="12"/></td>

                            <td><input class="skin" type="radio" name="s6" value="9"/></td>

                            <td><input class="skin" type="radio" name="s6" value="6"/></td>

                            <td><input class="skin" type="radio" name="s6" value="3"/></td> 

                        </tr>

                        <tr>

                            <td>피부에 트러블이 잘 생긴다.</td>

                            <td><input class="skin" type="radio" name="s7" value="2"/></td>

                            <td><input class="skin" type="radio" name="s7" value="4"/></td>

                            <td><input class="skin" type="radio" name="s7" value="6"/></td>

                            <td><input class="skin" type="radio" name="s7" value="8"/></td>

                            <td><input class="skin" type="radio" name="s7" value="10"/></td> 

                        </tr>

                        <tr>

                            <td>세안 후 1시간 이내에 기름이 많아진다.</td>

                            <td><input class="skin" type="radio" name="s8" value="2"/></td>

                            <td><input class="skin" type="radio" name="s8" value="4"/></td>

                            <td><input class="skin" type="radio" name="s8" value="6"/></td>

                            <td><input class="skin" type="radio" name="s8" value="8"/></td>

                            <td><input class="skin" type="radio" name="s8" value="10"/></td> 

                        </tr>

                        <tr>

                            <td>얼굴이 전반적으로 건조하다.</td>

                            <td><input class="skin" type="radio" name="s9" value="15"/></td>

                            <td><input class="skin" type="radio" name="s9" value="12"/></td>

                            <td><input class="skin" type="radio" name="s9" value="9"/></td>

                            <td><input class="skin" type="radio" name="s9" value="6"/></td>

                            <td><input class="skin" type="radio" name="s9" value="3"/></td> 

                        </tr>

                        <tr>

                            <td>전체적으로 피부가 탄력적이라고 생각한다.</td>

                            <td><input class="skin" type="radio" name="s10" value="2"/></td>

                            <td><input class="skin" type="radio" name="s10" value="4"/></td>

                            <td><input class="skin" type="radio" name="s10" value="6"/></td>

                            <td><input class="skin" type="radio" name="s10" value="8"/></td>

                            <td><input class="skin" type="radio" name="s10" value="10"/></td> 

                        </tr>

                        <tr>

                            <td>평소에 피부 수분이 부족하다고 생각한다.</td>

                            <td><input class="skin1" type="radio" name="s11" value="1"/></td>

                            <td><input class="skin1" type="radio" name="s11" value="2"/></td>

                            <td><input class="skin1" type="radio" name="s11" value="3"/></td>

                            <td><input class="skin1" type="radio" name="s11" value="4"/></td>

                            <td><input class="skin1" type="radio" name="s11" value="5"/></td>    

                        </tr>

                        <tr>

                            <td>입술이 쉽게 건조해진다.</td>

                            <td><input class="skin1" type="radio" name="s12" value="1"/></td>

                            <td><input class="skin1" type="radio" name="s12" value="2"/></td>

                            <td><input class="skin1" type="radio" name="s12" value="3"/></td>

                            <td><input class="skin1" type="radio" name="s12" value="4"/></td>

                            <td><input class="skin1" type="radio" name="s12" value="5"/></td>

                        </tr>

                        <tr>

                            <td>피부가 작은 자극에도 쉽게 붉어진다.</td>

                            <td><input type="radio" name="s13" value="0"/></td>

                            <td><input type="radio" name="s13" value="0"/></td>

                            <td><input type="radio" name="s13" value="0"/></td>

                            <td><input type="radio" name="s13" value="0"/></td>

                            <td><input type="radio" name="s13" value="1"/></td>

                        </tr>

</tbody>

</table>  

</form>

<button id="actres" class="btn btn-primary" data-title="결과보기" style="width: 100%;" data-toggle="modal" data-target="#result" >결과보기</button>   

        </div>

    <!-- /.modal-content --> 

  </div>

      <!-- /.modal-dialog --> 

    </div>

    

    

    

<div class="modal fade" id="result" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">

      <div class="modal-dialog">

    <div class="modal-content">

          <div class="modal-header">

        <h4 class="modal-title custom_align" id="Heading">피부타입별 추천</h4>

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>        

      </div>

          <div class="modal-body">

          <div class="form-group">

        총점: <input class="form-control " type="text" name="sum" readonly />

        </div>

        <div class="form-group">

        피부타입 : <input class="form-control " type="text" name="skintype" readonly />

        </div>

        <div class="form-group">

        추천제품 : <textarea rows="4" class="form-control" id="itemtypelist" readonly /></textarea>           

        </div>

      </div>

          <div class="modal-footer ">

        <button type="button" class="btn btn-primary btn-lg" style="width: 100%;"> 신청하기 </button>

      </div>

        </div>

    <!-- /.modal-content --> 

  </div>

      <!-- /.modal-dialog --> 

    </div>

    

</div>   

 

<script>

function skinscore(){

    var score = 0;

    var score1 = 0;

var isResult = true ;

var itemResult = new Array() ;

var itemlist = "";

    $(".skin:checked").each(function(){

        score+=parseInt($(this).val(),10);

    });

    $("input[name=sum]").val(score);

var skintypeArray = new Array("건성","복합성","지성");

var itemtypeArray = new Array("건성 피부 타입용","복합성 피부 타입용","지성 피부 타입용","포어 케어", "수분 인텐시브", "민감성 피부 타입용");

if(score < 59)  {

$("input[name=skintype]").val(skintypeArray[0]);

itemResult[0] = itemtypeArray[0];

}

else if(score < 81) {

$("input[name=skintype]").val(skintypeArray[1]);

itemResult[0] = itemtypeArray[1];

}

else {

itemResult[0] = itemtypeArray[2];

$("input[name=skintype]").val(skintypeArray[2]);

if($("input[name=s7]:checked").val() > 7)  {

itemResult[1] = itemtypeArray[3];

}

$(".skin1:checked").each(function(){

        score1+=parseInt($(this).val(),10);

    });

 

if(score1 >7) itemResult[2] = itemtypeArray[4];

 

if($("input[name=s13]:checked").val() > 0) {

itemResult[3] = itemtypeArray[5];

}

}

for(k=0;k<itemResult.length;k++){

if(itemResult[k]) {

itemlist = itemlist + "[ㅇ+크림] " + itemResult[k] + " 크림을 추천합니다.\n";

}

 

}

$("#itemtypelist").val(itemlist);

var rsrchChk = $("#research input[type=radio]");

$(':radio').each(function () {

name = $(this).attr('name');

if (isResult && !$(':radio[name="' + name + '"]:checked').length){ isResult = false;}

console.log(isResult);

});

 

 

if(isResult) $("#actres").show();

}

$().ready(function(){

$("#actres").hide();

    $("input").change(function(){

        skinscore()

    });

});

 

 

 

</script>

</body>

 

</html>

 
 
 
 
 

 

[ㅇ+크림] 자가 피부 타입 진단 테스트

항목 매우아니다/매우작다/매우적다 아니다/작다/적다 보통이다 그렇다/크다/많다 매우 그렇다/매우 크다/매우 많다
모공크기가 전박적으로 크다.
피지분비가 활발하게 일어난다.
피부에 윤기가 있다고 생각한다.
세안 후 피부당김이 있다.
T존에 유분기가 있다.
부분적이나 전체적으로 하얀 각질이 일어난다.
피부에 트러블이 잘 생긴다.
세안 후 1시간 이내에 기름이 많아진다.
얼굴이 전반적으로 건조하다.
전체적으로 피부가 탄력적이라고 생각한다.
평소에 피부 수분이 부족하다고 생각한다.
입술이 쉽게 건조해진다.
피부가 작은 자극에도 쉽게 붉어진다.
반응형
저작자표시 비영리 동일조건

'웹' 카테고리의 다른 글

그누보드에서 iframe 출력 허용 도메인을 추가하는 방법  (0) 2019.05.27
blink css 깜빡이는 애니메이션 효과  (0) 2019.04.24
그누보드용 심플 자동완성 php js  (0) 2018.02.03
우커머스 쿠폰 설정 관련 팁  (0) 2018.02.01
https로 로그인 htaccess 화일 수정  (0) 2018.01.15
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함