폼메일+라디오버튼
본문
라디오버튼을 포함한 폼메일 전송을 하고싶습니다.
트리플님이 올려주신 아래의 폼메일에서 라디오박스를 추가하였습니다.
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에서
<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에서
// @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에서
// @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);
를 추가했습니다.
선택된 값만 가져오려면 어떻게 추가해야할까요?
코딩을 전혀 못하다보니 바꾸는것도 어렵네요 ㅠㅠ
고수님들 고견부탁드립니다.
답변 2
재가 질문을 잘못 이해햇을수 있습니다.
ex_rd 라디오로 전달 해서 받고 싶은 것이라면?
-> 그 폼메일의 결과를 실행하는 곳에서 ex_rd을 인식시켜서 실행 하셔야 지요
네. 메일 받는 부분에도 추가를 했습니다만 수신된 메일에는 유무값만 빈칸으로 들어옵니다. 아마도 선택된 값을 받지 못하는것이 아닌가 싶습니다.
컴맹인지라 확실한 문제의 위치를 찝어 말씀드리지 못해서 질문을 잘 이해하기 힘드실 수 있습니다. ㅠㅠ
라디오버튼을 추가시 텍스트필드와 다른 추가 설정 부분이 있나요?
contact.php 파일 내 메일 수신 부분에 삽입한 부분입니다.
$array['contact_ex_rd'] = isset($_REQUEST['contact_ex_rd']) ? strip_tags(trim($_REQUEST['contact_location'])) : '';
$mail_body = "
<b>Date:</b> {$date} <br>
<b>Name:</b> {$array['contact_name']} <br>
<b>Email:</b> {$array['contact_email']} <br>
{$PHONE}
<b>유무:</b> {$array['contact_ex_rd']} <br>
<b>location:</b> {$array['contact_location']} <br>
<b>Message:</b> {$array['contact_message']} <br>
--------------------------------------------------- <br>
IP: {$ip}
";
id="ex_rd" name="ex_rds" => id="ex_rd" name="ex_rd"
<b>유무:</b> {$array['contact_ex_rd']}
=> <b>유무:</b> {$array['ex_rd']}
감사합니다. 해결하였습니다.
js 파일 내 요청되는 값에
contact_ex_rds = jQuery("#ex_rd").is(':checked')?jQuery("#ex_rd").val():jQuery("#ex_rd2").val(),
체크되는 값을 불러오도록 하였습니다.
이걸 제대로 설명할줄을 몰라서 엄청 헤맷네요.
답변 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
