커스트마이징 텍스트추가를 필수입력으로 하게끔 할 수 있나요 ?

<!-- editor.php 파일에 입력 필드 추가 -->
<div class="kboard-attr-row">
    <label class="attr-name" for="kboard_option_tel">전화번호</label>
    <div class="attr-value"><input type="text" id="kboard_option_tel" name="kboard_option_tel" value="<?php echo
$content->option->tel?>"></div>

 

이 텍스트를 필수입력으로 하고 싶습니다 어떤 코드를 추가해야되나요 

 

라디오 버튼도 필수입력으로 되야하는데 

<!-- editor.php 파일에 입력 필드 추가 -->
<div class="kboard-attr-row">
    <label class="attr-name" for="kboard_option_inquiry_type">실외/실내</label>
    <div class="attr-value">
        <label>
            <input type="radio" name="kboard_option_inquiry_type" value="실외"<?php if($content->option-
>inquiry_type == '실외'):?> checked<?php endif?>>
            실외
        </label>
        <label>
            <input type="radio" name="kboard_option_inquiry_type" value="실내"<?php if($content->option-
>inquiry_type == '실내'):?> checked<?php endif?>>
            실내
        </label>
    </div>
</div>

 

여기서 어떤코드를 추가해야되나요 

 

 

그리고 날짜선택은 날짜선택하는 달력이 나오게끔하여 선택하게 못하나요??

 

그리고 가능하다면 요금계산하는 코드도 넣을 수 있을까요 ? 3일까지는 30,000원이고 4일부터는 36,000원 5일은 

45,000원 ... 이런식으로 나오게끔이요//   감사합니다
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    본문에 코드를 올려주실 땐 반드시 에디터의 "코드 스니펫 삽입" 기능으로 삽입해주세요. 

    그렇지 않으면 코드가 이상해져서 에러 나는 코드로 바뀌거나,

    질의응답 시 의사소통에 오해와 문제가 생길 수도 있습니다.

     

    텍스트와 라디오 버튼을 필수로 설정하시려면 required 속성을 적용해보시겠어요?

    올려주신 코드 중에서 아래의 각각의 코드를 찾아서

    <input type="text" id="kboard_option_tel" name="kboard_option_tel" value="<?php echo $content->option->tel?>">
    <input type="radio" name="kboard_option_inquiry_type" value="실외"<?php if($content->option->inquiry_type == '실외'):?> checked<?php endif?>>

    아래의 코드로 각각 교체해보세요.

    <input type="text" id="kboard_option_tel" name="kboard_option_tel" value="<?php echo $content->option->tel?>" required>
    <input type="radio" name="kboard_option_inquiry_type" value="실외"<?php if($content->option->inquiry_type == '실외'):?> checked<?php endif?> required>

     

    KBoard 플러그인에서 워드프레스에서 지원하는 datepicker를 사용하실 수 있습니다.

    날짜 선택 및 요금 계산 필드를 추가하시려면 아래의 방법을 참고해보세요.

     

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/editor.php 파일에

    아래의 코드를 추가해보세요. (입력 필드 추가)

    <?php
    if(isset($_GET['ymd'])){
    	$ymd = date('Y-m-d', strtotime($_GET['ymd']));
    }
    $today = date('Y-m-d', current_time('timestamp'));
    ?>
    <div class="kboard-attr-row">
    	<label class="attr-name">날짜</label>
    	<div class="attr-value">
    		<label>시작일<input type="text" class="datepicker" id="kboard_option_start_date" name="kboard_option_start_date" onchange="kboard_set_date(this.value)" value="<?php echo $content->option->start_date ? $content->option->start_date : (isset($ymd) ? $ymd : $today)?>" title="<?php echo __('Start Date Setting', 'kboard-cross-calendar')?>" readonly></label>
    		<label>종료일<input type="text" class="datepicker" id="kboard_option_end_date" name="kboard_option_end_date" onchange="kboard_set_date(this.value)" value="<?php echo $content->option->end_date ? $content->option->end_date : (isset($ymd) ? $ymd : $today)?>" title="<?php echo __('End Date Setting', 'kboard-cross-calendar')?>" readonly></label>
    		결과<input type="text" name="kboard_option_price" value="<?php echo $content->option->content?>" readonly>
    	</div>
    </div>

     

    editor.php 파일 제일 하단에 아래의 코드를 추가해보세요.

    <?php
    wp_enqueue_script('jquery-ui-datepicker');
    wp_enqueue_style('jquery-flick-style', KBOARD_URL_PATH.'/template/css/jquery-ui.css', array(), '1.12.1');
    ?>

     

    /wp-content/plugins/kboard/skin/사용중인스킨/script.js 파일 제일 하단에

    아래의 코드를 추가해보세요.

    jQuery(document).ready(function(){
    	jQuery('.datepicker').datepicker({
    		closeText : '닫기',
    		prevText : '이전달',
    		nextText : '다음달',
    		currentText : '오늘',
    		monthNames : [ '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월' ],
    		monthNamesShort : [ '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월' ],
    		dayNames : [ '일', '월', '화', '수', '목', '금', '토' ],
    		dayNamesShort : [ '일', '월', '화', '수', '목', '금', '토' ],
    		dayNamesMin : [ '일', '월', '화', '수', '목', '금', '토' ],
    		weekHeader : 'Wk',
    		dateFormat : 'yy-mm-dd',
    		firstDay : 0,
    		isRTL : false,
    		duration : 0,
    		showAnim : 'show',
    		showMonthAfterYear : true,
    		yearSuffix : '년'
    	});
    });
    
    function kboard_set_date(){
    	var start_date = new Date(jQuery('#kboard_option_start_date').val());
    	var end_date = new Date(jQuery('#kboard_option_end_date').val());
    	var diff_date = (end_date.getTime() - start_date.getTime()) / (1000*60*60*24);
    	
    	var price = 0;
    	switch(diff_date){
    		case diff_date <= 3: price = 10000*diff_date; break;
    		case 4: price = 36000; break;
    		case 5: price = 45000; break;
    		default: price = 0; break;
    	}
    	jQuery('input[name="kboard_option_price"]').val(price);
    }

    위의 코드를 적용하시면 날짜 차이가 0~3일 난다면 10000 * 일수 이런 식으로 계산됩니다.

    4일이라면 36000원으로 표시되며 5일이라면 45000원으로 표시됩니다.

     

    위의 코드는 예제 코드이기 때문에 원하시는 대로 레이아웃 및 로직을 수정하시려면

    HTML, CSS, jQuery에 대해서 어느 정도 알고 계셔야 할 듯합니다.

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기