이전 목록 다음

폼메일+라디오버튼

fffff

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2019-04-05 (금) 21:24:46 5,180

라디오버튼을 포함한 폼메일 전송을 하고싶습니다.

트리플님이 올려주신 아래의 폼메일에서 라디오박스를 추가하였습니다.

https://sir.kr/g5_skin/20940?sfl=wr_subject%7C%7Cwr_content&stx=%ED%8F%BC%EB%A9%94%EC%9D%BC#c_28795

formmail/js/contact.js

formmail/php/contact.php

파일에 텍스트박스 넣듯 값을 추가하였으나 보여지지가 않습니다.

formmail.php에서

Copy

<div class="checks">
                      <input type="radio" id="ex_rd" name="ex_rds" value="유"> 
                      <label for="ex_rd">유</label> 
                      <input type="radio" id="ex_rd2" name="ex_rds" value="무"> 
                      <label for="ex_rd2">무</label> 
                    </div>

contact.js에서

Copy

// @CONTACT FORM - TRANSLATE OR EDIT
    _subject_required        = 'Subject is Required!',
    _agree_name                = 'Agree is Required!',
    _email_name                = 'Name is Required!',
    _email_required            = 'Email is Required!',
    _phone_required            = 'Phone is Required!',
    _email_message            = 'Message is Required!',
    _email_location            = 'Location is Required!',
    _email_ex_rds            = 'Select is Required!',
    _email_all                = 'Please complete all fields!',
    _email_invalid            = 'Invalid Email!',
    _email_sent                = '<strong>메세지가 전달 되었습니다.</strong>';


    /**    CONTACT FORM
    *************************************************** **/
    jQuery("#contact_submit").bind("click", function(e) {
        e.preventDefault();

        var agree             = jQuery("#agree").is(':checked'),                    // required
            contact_subject = jQuery("#contact_subject").val(),            // required
            contact_name     = jQuery("#contact_name").val(),            // required
            contact_email     = jQuery("#contact_email").val(),            // required
            contact_phone     = jQuery("#contact_phone").val(),            // required
            contact_location= jQuery("#contact_location").val(),            // required
            contact_ex_rds  = jQuery("#contact_ex_rds").val(),            // required
            contact_message = jQuery("#contact_message").val(),            // required
            _action            = jQuery("#contactForm").attr('action'),    // form action URL
            _method            = jQuery("#contactForm").attr('method'),    // form method
            _err            = false;                                    // status

        // Remove error tooltips
        //jQuery("#contactForm span.tooltip_error").remove();

        // Agree Check
        if(!agree) {
            jQuery("#alertErrResponse").empty().append(_agree_name);
            jQuery("#alertErr").show();
            alert('개인정보 수집 및 이용에 관한 동의해주세요.');
            return false;
        }

        // Name Check
        if(contact_name == '') {
            jQuery("#alertErrResponse").empty().append(_email_name);
            jQuery("#alertErr").show();

            return false;
        }

        // Email Check
        if(contact_email == '') {
            jQuery("#alertErrResponse").empty().append(_email_required);
            jQuery("#alertErr").show();
            return false;
        }

        // Phone Check
        if(contact_phone == '') {
            jQuery("#alertErrResponse").empty().append(_phone_required);
            jQuery("#alertErr").show();
            return false;
        }

        // Subject Check
        if(contact_subject == '') {
            jQuery("#alertErrResponse").empty().append(_subject_required);
            jQuery("#alertErr").show();
            return false;
        }
        
        // Subject Check
        if(contact_location == '') {
            jQuery("#alertErrResponse").empty().append(_location_required);
            jQuery("#alertErr").show();
            return false;
        }
        
        // Subject Check
        if(contact_ex_rds == '') {
            jQuery("#alertErrResponse").empty().append(_ex_rds_required);
            jQuery("#alertErr").show();
            return false;
        }

        // Comment Check
        if(contact_message == '') {
            jQuery("#alertErrResponse").empty().append(_email_message);
            jQuery("#alertErr").show();
            return false;
        }


        // SEND MAIL VIA AJAX
        $.ajax({
            url:     _action,
            data:     {ajax:"true", action:'email_send', contact_name:contact_name, contact_email:contact_email, contact_phone:contact_phone, contact_location:contact_location, contact_ex_rds:contact_ex_rds, contact_message:contact_message},
            type:     _method,
            error:     function(XMLHttpRequest, textStatus, errorThrown) {

                alert('Server Internal Error'); // usualy on headers 404

            },

            success: function(data) {
                data = data.trim(); // remove output spaces


                // PHP RETURN: Mandatory Fields
                if(data == '_required_') {
                    jQuery("#alertErrResponse").empty().append(_email_all);
                    jQuery("#alertErr").show();
                } else

                // PHP RETURN: INVALID EMAIL
                if(data == '_invalid_email_') {
                    jQuery("#alertErrResponse").empty().append(_email_invalid);
                    jQuery("#alertErr").show();
                } else

                // VALID EMAIL
                if(data == '_sent_ok_') {

                    // hide error warning if visible
                    jQuery("#alertErr").hide();

                    jQuery("#alertOkResponse").empty().append(_email_sent);
                    jQuery("#alertOk").show();

                    // reset form
                    jQuery("#contact_name, #contact_email, #contact_phone, #contact_location, #contact_ex_rds #contact_message").val('');

                } else {

                    // PHPMAILER ERROR
                    alert(data); 

                }
            }
        });

    });

    /* ========================================================================
     * Bootstrap: alert.js v3.2.0
     * http://getbootstrap.com/javascript/#alerts
     * ========================================================================
     * Copyright 2011-2014 Twitter, Inc.
     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
     * ======================================================================== */

    +function ($) {
      'use strict';

      // ALERT CLASS DEFINITION
      // ======================

      var dismiss = '[data-dismiss="alert"]'
      var Alert   = function (el) {
        $(el).on('click', dismiss, this.close)
      }

      Alert.VERSION = '3.2.0'

      Alert.prototype.close = function (e) {
        var $this    = $(this)
        var selector = $this.attr('data-target')

        if (!selector) {
          selector = $this.attr('href')
          selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector)

        if (e) e.preventDefault()

        if (!$parent.length) {
          $parent = $this.hasClass('alert') ? $this : $this.parent()
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.removeClass('in')

        function removeElement() {
          // detach from parent, fire event then clean up data
          $parent.detach().trigger('closed.bs.alert').remove()
        }

        $.support.transition && $parent.hasClass('fade') ?
          $parent
            .one('bsTransitionEnd', removeElement)
            .emulateTransitionEnd(150) :
          removeElement()
      }


      // ALERT PLUGIN DEFINITION
      // =======================

      function Plugin(option) {
        return this.each(function () {
          var $this = $(this)
          var data  = $this.data('bs.alert')

          if (!data) $this.data('bs.alert', (data = new Alert(this)))
          if (typeof option == 'string') data[option].call($this)
        })
      }

      var old = $.fn.alert

      $.fn.alert             = Plugin
      $.fn.alert.Constructor = Alert


      // ALERT NO CONFLICT
      // =================

      $.fn.alert.noConflict = function () {
        $.fn.alert = old
        return this
      }


      // ALERT DATA-API
      // ==============

      $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

    }(jQuery);

contact.php에서

Copy

// @CONTACT FORM - TRANSLATE OR EDIT
    _subject_required        = 'Subject is Required!',
    _agree_name                = 'Agree is Required!',
    _email_name                = 'Name is Required!',
    _email_required            = 'Email is Required!',
    _phone_required            = 'Phone is Required!',
    _email_message            = 'Message is Required!',
    _email_location            = 'Location is Required!',
    _email_ex_rds            = 'Select is Required!',
    _email_all                = 'Please complete all fields!',
    _email_invalid            = 'Invalid Email!',
    _email_sent                = '<strong>메세지가 전달 되었습니다.</strong>';


    /**    CONTACT FORM
    *************************************************** **/
    jQuery("#contact_submit").bind("click", function(e) {
        e.preventDefault();

        var agree             = jQuery("#agree").is(':checked'),                    // required
            contact_subject = jQuery("#contact_subject").val(),            // required
            contact_name     = jQuery("#contact_name").val(),            // required
            contact_email     = jQuery("#contact_email").val(),            // required
            contact_phone     = jQuery("#contact_phone").val(),            // required
            contact_location= jQuery("#contact_location").val(),            // required
            contact_ex_rds  = jQuery("#contact_ex_rds").val(),            // required
            contact_message = jQuery("#contact_message").val(),            // required
            _action            = jQuery("#contactForm").attr('action'),    // form action URL
            _method            = jQuery("#contactForm").attr('method'),    // form method
            _err            = false;                                    // status

        // Remove error tooltips
        //jQuery("#contactForm span.tooltip_error").remove();

        // Agree Check
        if(!agree) {
            jQuery("#alertErrResponse").empty().append(_agree_name);
            jQuery("#alertErr").show();
            alert('개인정보 수집 및 이용에 관한 동의해주세요.');
            return false;
        }

        // Name Check
        if(contact_name == '') {
            jQuery("#alertErrResponse").empty().append(_email_name);
            jQuery("#alertErr").show();

            return false;
        }

        // Email Check
        if(contact_email == '') {
            jQuery("#alertErrResponse").empty().append(_email_required);
            jQuery("#alertErr").show();
            return false;
        }

        // Phone Check
        if(contact_phone == '') {
            jQuery("#alertErrResponse").empty().append(_phone_required);
            jQuery("#alertErr").show();
            return false;
        }

        // Subject Check
        if(contact_subject == '') {
            jQuery("#alertErrResponse").empty().append(_subject_required);
            jQuery("#alertErr").show();
            return false;
        }
        
        // Subject Check
        if(contact_location == '') {
            jQuery("#alertErrResponse").empty().append(_location_required);
            jQuery("#alertErr").show();
            return false;
        }
        
        // Subject Check
        if(contact_ex_rds == '') {
            jQuery("#alertErrResponse").empty().append(_ex_rds_required);
            jQuery("#alertErr").show();
            return false;
        }

        // Comment Check
        if(contact_message == '') {
            jQuery("#alertErrResponse").empty().append(_email_message);
            jQuery("#alertErr").show();
            return false;
        }


        // SEND MAIL VIA AJAX
        $.ajax({
            url:     _action,
            data:     {ajax:"true", action:'email_send', contact_name:contact_name, contact_email:contact_email, contact_phone:contact_phone, contact_location:contact_location, contact_ex_rds:contact_ex_rds, contact_message:contact_message},
            type:     _method,
            error:     function(XMLHttpRequest, textStatus, errorThrown) {

                alert('Server Internal Error'); // usualy on headers 404

            },

            success: function(data) {
                data = data.trim(); // remove output spaces


                // PHP RETURN: Mandatory Fields
                if(data == '_required_') {
                    jQuery("#alertErrResponse").empty().append(_email_all);
                    jQuery("#alertErr").show();
                } else

                // PHP RETURN: INVALID EMAIL
                if(data == '_invalid_email_') {
                    jQuery("#alertErrResponse").empty().append(_email_invalid);
                    jQuery("#alertErr").show();
                } else

                // VALID EMAIL
                if(data == '_sent_ok_') {

                    // hide error warning if visible
                    jQuery("#alertErr").hide();

                    jQuery("#alertOkResponse").empty().append(_email_sent);
                    jQuery("#alertOk").show();

                    // reset form
                    jQuery("#contact_name, #contact_email, #contact_phone, #contact_location, #contact_ex_rds #contact_message").val('');

                } else {

                    // PHPMAILER ERROR
                    alert(data); 

                }
            }
        });

    });

    /* ========================================================================
     * Bootstrap: alert.js v3.2.0
     * http://getbootstrap.com/javascript/#alerts
     * ========================================================================
     * Copyright 2011-2014 Twitter, Inc.
     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
     * ======================================================================== */

    +function ($) {
      'use strict';

      // ALERT CLASS DEFINITION
      // ======================

      var dismiss = '[data-dismiss="alert"]'
      var Alert   = function (el) {
        $(el).on('click', dismiss, this.close)
      }

      Alert.VERSION = '3.2.0'

      Alert.prototype.close = function (e) {
        var $this    = $(this)
        var selector = $this.attr('data-target')

        if (!selector) {
          selector = $this.attr('href')
          selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector)

        if (e) e.preventDefault()

        if (!$parent.length) {
          $parent = $this.hasClass('alert') ? $this : $this.parent()
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.removeClass('in')

        function removeElement() {
          // detach from parent, fire event then clean up data
          $parent.detach().trigger('closed.bs.alert').remove()
        }

        $.support.transition && $parent.hasClass('fade') ?
          $parent
            .one('bsTransitionEnd', removeElement)
            .emulateTransitionEnd(150) :
          removeElement()
      }


      // ALERT PLUGIN DEFINITION
      // =======================

      function Plugin(option) {
        return this.each(function () {
          var $this = $(this)
          var data  = $this.data('bs.alert')

          if (!data) $this.data('bs.alert', (data = new Alert(this)))
          if (typeof option == 'string') data[option].call($this)
        })
      }

      var old = $.fn.alert

      $.fn.alert             = Plugin
      $.fn.alert.Constructor = Alert


      // ALERT NO CONFLICT
      // =================

      $.fn.alert.noConflict = function () {
        $.fn.alert = old
        return this
      }


      // ALERT DATA-API
      // ==============

      $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

    }(jQuery);

를 추가했습니다.

선택된 값만 가져오려면 어떻게 추가해야할까요?

코딩을 전혀 못하다보니 바꾸는것도 어렵네요 ㅠㅠ

고수님들 고견부탁드립니다.

그누보드5 폼메일 라디오버튼

답변 2개 / 댓글 2개

잠실삼촌

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2019-04-08 (월) 20:58:08

id="ex_rd" name="ex_rds" => id="ex_rd" name="ex_rd"

유무: {$array['contact_ex_rd']}

=> 유무: {$array['ex_rd']}

답변에 대한 댓글 1개

fffff

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2019-04-10 (수) 19:57:05

감사합니다. 해결하였습니다.

js 파일 내 요청되는 값에

[code]

contact_ex_rds = jQuery("#ex_rd").is(':checked')?jQuery("#ex_rd").val():jQuery("#ex_rd2").val(),

[/code]

체크되는 값을 불러오도록 하였습니다.

이걸 제대로 설명할줄을 몰라서 엄청 헤맷네요.

답변 감사합니다.

잠실삼촌

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2019-04-08 (월) 10:53:07

재가 질문을 잘못 이해햇을수 있습니다.

ex_rd 라디오로 전달 해서 받고 싶은 것이라면?

-> 그 폼메일의 결과를 실행하는 곳에서 ex_rd을 인식시켜서 실행 하셔야 지요

답변에 대한 댓글 1개

fffff

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2019-04-08 (월) 11:51:31

네. 메일 받는 부분에도 추가를 했습니다만 수신된 메일에는 유무값만 빈칸으로 들어옵니다. 아마도 선택된 값을 받지 못하는것이 아닌가 싶습니다.
컴맹인지라 확실한 문제의 위치를 찝어 말씀드리지 못해서 질문을 잘 이해하기 힘드실 수 있습니다. ㅠㅠ

라디오버튼을 추가시 텍스트필드와 다른 추가 설정 부분이 있나요?

contact.php 파일 내 메일 수신 부분에 삽입한 부분입니다.
[code]
$array['contact_ex_rd'] = isset($_REQUEST['contact_ex_rd']) ? strip_tags(trim($_REQUEST['contact_location'])) : '';
[/code]
[code]
$mail_body = "
Date: {$date} 
Name: {$array['contact_name']} 
Email: {$array['contact_email']} 
{$PHONE}
유무: {$array['contact_ex_rd']} 
location: {$array['contact_location']} 
Message: {$array['contact_message']} 
--------------------------------------------------- 
IP: {$ip}
";
[/code]

답변을 작성하려면 로그인이 필요합니다.

폼메일+라디오버튼

답변 2개 / 댓글 2개

답변에 대한 댓글 1개

답변에 대한 댓글 1개

공유하기