I found a file called copyShipping.js that allows me to copy form elements from one form to another by the click of a checkbox. However, it copies by name of each field rather than ID. Below is the code. How do I get it to copy by ID? I know there's a getElementByID on Javascript but I don't know how to implement it. Ideally I would just like the code changed for me. Thanks.
function eCart_copyBillingToShipping(cb){
if(cb.checked){ // Only copy when the checkbox is checked.
var theForm = cb.form;
// The number of elements must match in billingFields and shippingFields. The type of input element must also match between the arrays.
var billingFields = new Array('firstname', 'lastname', 'email', 'phone', 'fax', 'street1', 'street2', 'city', 'state_province', 'StateOther', 'other_state_province', 'postcode', 'other_postcode', 'country');
var shippingFields = new Array('shipping_firstname', 'shipping_lastname', 'shipping_email', 'shipping_phone', 'shipping_fax', 'shipping_street1', 'shipping_street2', 'shipping_city', 'shipping_state_province', 'ShippingStateOther', 'other_shipping_state_province', 'shipping_postcode', 'other_shipping_postcode', 'shipping_country');
for(var i=0;i<billingFields.length;i++){
var billingObj = theForm.elements[billingFields[i]];
var shippingObj = theForm.elements[shippingFields[i]];
if(billingObj && shippingObj){
if(billingObj.tagName){ // non-radio groups
var tagName = billingObj.tagName.toLowerCase();
if(tagName == 'select'){
shippingObj.selectedIndex = billingObj.selectedIndex;
}
else if((billingObj.type && shippingObj.type ) && (billingObj.type == 'checkbox' || billingObj.type == 'radio')){
shippingObj.checked = billingObj.checked;
}
else{ // textareas and other inputs
shippingObj.value = billingObj.value;
}
}
else if(billingObj.length){ // radio group
for(var r=0;r<billingObj.length;r++){
shippingObj[r].checked = billingObj[r].checked;
}
}
}
}
}
}
It is always recommended to access the elements using Id. Also it is recommended to have id and name same.
Try this.
function eCart_copyBillingToShipping(cb){
if(cb.checked){ // Only copy when the checkbox is checked.
var theForm = cb.form;
// The number of elements must match in billingFields and shippingFields. The type of input element must also match between the arrays.
var billingFields = new Array('firstname', 'lastname', 'email', 'phone', 'fax', 'street1', 'street2', 'city', 'state_province', 'StateOther', 'other_state_province', 'postcode', 'other_postcode', 'country');
var shippingFields = new Array('shipping_firstname', 'shipping_lastname', 'shipping_email', 'shipping_phone', 'shipping_fax', 'shipping_street1', 'shipping_street2', 'shipping_city', 'shipping_state_province', 'ShippingStateOther', 'other_shipping_state_province', 'shipping_postcode', 'other_shipping_postcode', 'shipping_country');
for(var i=0;i<billingFields.length;i++){
//assuming that now array contains id (not name)
var billingObj = theForm.getElementById(billingFields[i]);
var shippingObj = theForm.getElementById(shippingFields[i]);
if(billingObj && shippingObj){
if(billingObj.tagName){ // non-radio groups
var tagName = billingObj.tagName.toLowerCase();
if(tagName == 'select'){
shippingObj.selectedIndex = billingObj.selectedIndex;
}
else if((billingObj.type && shippingObj.type ) && (billingObj.type == 'checkbox' || billingObj.type == 'radio')){
shippingObj.checked = billingObj.checked;
}
else{ // textareas and other inputs
shippingObj.value = billingObj.value;
}
}
else if(billingObj.length){ // radio group
for(var r=0;r<billingObj.length;r++){
shippingObj[r].checked = billingObj[r].checked;
}
}
}
}
}
}
Related
I have a Contact Form that utilizes Google Scripts. It successfully sends the email and formats it decently to my inbox, but there are 2 problems:
-I need it so that IF var key is equal to 'Action', then do not display it in the email it sends. Because right now, "Action send_message" is getting included in the email and I don't like that.
For this, I have unsuccessfully tried things like:
for (var idx in order) {
var key = order[idx];
//Skip this entry into the email output if it is the Action
if( key === 'Action') {
continue
}
It seems to not react to this code at all.
-I also need it so that if a city is selected, e.g. Alachua, that the email says 'Alachua' instead of 'Florida_Alachua'. But I can't add a NAME to an option since apparently options don't have that property. I also can't do the quick fix of changing the VALUE of the <option> to resolve this step, because of other code I have that conflicts with this route.
Google Scripts Code:
/******************************************************************************
* This tutorial is based on the work of Martin Hawksey twitter.com/mhawksey *
* But has been simplified and cleaned up to make it more beginner friendly *
* All credit still goes to Martin and any issues/complaints/questions to me. *
******************************************************************************/
// if you want to store your email server-side (hidden), uncomment the next line
var TO_ADDRESS = "myemail#email.com";
// spit out all the keys/values from the form in HTML for email
// uses an array of keys if provided or the object to determine field order
function formatMailBody(obj, order) {
var result = "";
if (!order) {
order = Object.keys(obj);
}
// loop over all keys in the ordered form data
for (var idx in order) {
var key = order[idx];
result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + sanitizeInput(obj[key]) + "</div>";
// for every key, concatenate an `<h4 />`/`<div />` pairing of the key name and its value,
// and append it to the `result` string created at the start.
}
return result; // once the looping is done, `result` will be one long string to put in the email body
}
// sanitize content from the user - trust no one
// ref: https://developers.google.com/apps-script/reference/html/html-output#appendUntrusted(String)
function sanitizeInput(rawInput) {
var placeholder = HtmlService.createHtmlOutput(" ");
placeholder.appendUntrusted(rawInput);
return placeholder.getContent();
}
function doPost(e) {
try {
Logger.log(e); // the Google Script version of console.log see: Class Logger
record_data(e);
// shorter name for form data
var mailData = e.parameters;
// names and order of form elements (if set)
var orderParameter = e.parameters.formDataNameOrder;
var dataOrder;
if (orderParameter) {
dataOrder = JSON.parse(orderParameter);
}
// determine recepient of the email
// if you have your email uncommented above, it uses that `TO_ADDRESS`
// otherwise, it defaults to the email provided by the form's data attribute
var sendEmailTo = (typeof TO_ADDRESS !== "undefined") ? TO_ADDRESS : mailData.formGoogleSendEmail;
// send email if to address is set
if (sendEmailTo) {
MailApp.sendEmail({
to: String(sendEmailTo),
subject: "Contact form submitted",
// replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
htmlBody: formatMailBody(mailData, dataOrder)
});
}
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"success",
"data": JSON.stringify(e.parameters) }))
.setMimeType(ContentService.MimeType.JSON);
} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": error}))
.setMimeType(ContentService.MimeType.JSON);
}
}
/**
* record_data inserts the data received from the html form submission
* e is the data received from the POST
*/
function record_data(e) {
var lock = LockService.getDocumentLock();
lock.waitLock(30000); // hold off up to 30 sec to avoid concurrent writing
try {
Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
// select the 'responses' sheet by default
var doc = SpreadsheetApp.getActiveSpreadsheet();
var sheetName = e.parameters.formGoogleSheetName || "responses";
var sheet = doc.getSheetByName(sheetName);
var oldHeader = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var newHeader = oldHeader.slice();
var fieldsFromForm = getDataColumns(e.parameters);
var row = [new Date()]; // first element in the row should always be a timestamp
// loop through the header columns
for (var i = 1; i < oldHeader.length; i++) { // start at 1 to avoid Timestamp column
var field = oldHeader[i];
var output = getFieldFromData(field, e.parameters);
row.push(output);
// mark as stored by removing from form fields
var formIndex = fieldsFromForm.indexOf(field);
if (formIndex > -1) {
fieldsFromForm.splice(formIndex, 1);
}
}
// set any new fields in our form
for (var i = 0; i < fieldsFromForm.length; i++) {
var field = fieldsFromForm[i];
var output = getFieldFromData(field, e.parameters);
row.push(output);
newHeader.push(field);
}
// more efficient to set values as [][] array than individually
var nextRow = sheet.getLastRow() + 1; // get next row
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// update header row with any new data
if (newHeader.length > oldHeader.length) {
sheet.getRange(1, 1, 1, newHeader.length).setValues([newHeader]);
}
}
catch(error) {
Logger.log(error);
}
finally {
lock.releaseLock();
return;
}
}
function getDataColumns(data) {
return Object.keys(data).filter(function(column) {
return !(column === 'formDataNameOrder' || column === 'formGoogleSheetName' || column === 'formGoogleSendEmail' || column === 'honeypot');
});
}
function getFieldFromData(field, data) {
var values = data[field] || '';
var output = values.join ? values.join(', ') : values;
return output;
}
Contact Form HTML
<section id="contact-form">
<form id="gform"
class="contact-form" method="post"
action="(Google Scripts URL)"
enctype="text/plain">
<p>
<label for="name">Your Name <font face="Arial" color="red">*</font></label>
<input type="text" style="height:35px;" class="heighttext required" name="name" id="name" class="required" title="* Please provide your name">
</p>
<p>
<label>Your Location <font face="Arial" color="red">*</font></label>
<select name="Location" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col00">-- State --</option>
<option value="Alabama">Alabama</option>
<option value="California">California</option>
<option value="Florida">Florida</option>
</select>
<select name="City" id="layout_select" style="height:35px;">
<option disabled selected value="Florida">-- City --</option>
<option name="Alachua" value="Florida_Alachua">Alachua</option>
<option name="Alford" value="Florida_Alford">Alford</option>
</select>
</p>
<p>
<input type="submit" value="Send Message" id="submit" class="pp-btn special">
<img src="images/ajax-loader.gif" id="contact-loader" alt="Loading...">
<input type="hidden" name="action" value="send_message">
</p>
</form>
</section><!-- #contact-form -->
Form Handler Javascript
(function() {
function validEmail(email) { // see:
var re = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}
function validateHuman(honeypot) {
if (honeypot) { //if hidden form filled up
console.log("Robot Detected!");
return true;
} else {
console.log("Welcome Human!");
}
}
// get all data in form and return object
function getFormData() {
var form = document.getElementById("gform");
var elements = form.elements;
var fields = Object.keys(elements).filter(function(k) {
return (elements[k].name !== "honeypot");
}).map(function(k) {
if(elements[k].name !== undefined) {
return elements[k].name;
// special case for Edge's html collection
}else if(elements[k].length > 0){
return elements[k].item(0).name;
}
}).filter(function(item, pos, self) {
return self.indexOf(item) == pos && item;
});
var formData = {};
fields.forEach(function(name){
var element = elements[name];
// singular form elements just have one value
formData[name] = element.value;
// when our element has multiple items, get their values
if (element.length) {
var data = [];
for (var i = 0; i < element.length; i++) {
var item = element.item(i);
if (item.checked || item.selected) {
data.push(item.value);
}
}
formData[name] = data.join(', ');
}
});
// add form-specific values into the data
formData.formDataNameOrder = JSON.stringify(fields);
formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default
console.log(formData);
return formData;
}
function handleFormSubmit(event) { // handles form submit without any jquery
event.preventDefault(); // we are submitting via xhr below
var data = getFormData(); // get the values submitted in the form
/* OPTION: Remove this comment to enable SPAM prevention, see README.md
if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted
return false;
}
*/
if( data.email && !validEmail(data.email) ) { // if email is not valid show error
var invalidEmail = document.getElementById("email-invalid");
if (invalidEmail) {
invalidEmail.style.display = "block";
return false;
}
} else {
disableAllButtons(event.target);
var url = event.target.action; //
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
// xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
console.log( xhr.status, xhr.statusText )
console.log(xhr.responseText);
//document.getElementById("gform").style.display = "none"; // hide form
/*
var thankYouMessage = document.getElementById("thankyou_message");
if (thankYouMessage) {
thankYouMessage.style.display = "block";
}
*/
return;
};
// url encode form data for sending as post data
var encoded = Object.keys(data).map(function(k) {
return encodeURIComponent(k) + "=" + encodeURIComponent(data[k])
}).join('&')
xhr.send(encoded);
}
}
function loaded() {
console.log("Contact form submission handler loaded successfully.");
// bind to the submit event of our form
var form = document.getElementById("gform");
form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener("DOMContentLoaded", loaded, false);
function disableAllButtons(form) {
var buttons = form.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
}
})();
finally, this is the extra code that would break if I simply tried changing the value of option to, e.g., 'Alachua' instead of 'Flordia_Alachua'. https://jsfiddle.net/hmatt843/504dgmqy/19/
Thanks for any and all help.
Try console.log(key) before if( key === 'Action'). I think you'll find that key never equals 'Action', exactly. Looks like you'll need if( key === 'action'), instead.
If you wish to remove part of string value, try the replace method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
It also looks like you're trying to work with elements[k].name when you mean to be working with elements[k].value.
I believe your code should look something like...
function(k) {
if(elements[k].value !== undefined) {
return elements[k].value.replace('Florida_', '');
// special case for Edge's html collection
} else if(elements[k].length > 0){
return elements[k].item(0).value.replace('Florida_', '');
}
}
... or something to that effect.
In the future, you may want to make it easier for folks trying to help you by posting only the portions of code your having trouble with, and breaking your questions into different posts. A lot to sift through up there.
Hope this helped.
The split() method splits a String object into an array of strings by separating the string into substrings, using a specified separator string to determine where to make each split.
Var splitValue = elements[k].item(0).value.split("");
splitValue[1] will give you a string of characters after the delimeter () in this case.
I am new to JS and i am trying to update option value using prompt. I have same ID element in different forms.
I have two forms and both having same IDs:dc_list_Z_side and dc_list_A_side.
Is there a way i can select ID in form using JS?
JS CODE:
function add_dc_form_down2() {
var theSelectA = form_down2.dc_list_A_side;
if (theSelectA[theSelectA.selectedIndex].value == "zzzzADD DC zzzzzz") {
var dc_name = prompt("Enter DC Name");
if (dc_name != null){
dc_a = document.getElementById("dc_list_A_side")
dc_a.options[dc_a.selectedIndex].text = dc_name;
dc_a.options[dc_a.selectedIndex].value = dc_name;
}
}
var theSelectZ = form_down2.dc_list_Z_side;
if (theSelectZ[theSelectZ.selectedIndex].value == "zzzzADD DC zzzzzz") {
var dc_name2 = prompt("Enter DC Name");
if (dc_name2 != null){
dc_z = document.getElementById("dc_list_Z_side");
dc_z.options[dc_z.selectedIndex].text = dc_name2;
dc_z.options[dc_z.selectedIndex].value = dc_name2;
}
}
return false;
}
function add_dc_form_flap() {
var theSelectA = flap_form.dc_list_A_side;
if (theSelectA[theSelectA.selectedIndex].value == "zzzzADD DC zzzzzz") {
var dc_name = prompt("Enter DC Name");
if (dc_name != null){
dc_a = document.getElementById("dc_list_A_side")
dc_a.options[dc_a.selectedIndex].text = dc_name;
dc_a.options[dc_a.selectedIndex].value = dc_name;
}
}
var theSelectZ = flap_form.dc_list_Z_side;
if (theSelectZ[theSelectZ.selectedIndex].value == "zzzzADD DC zzzzzz") {
var dc_name2 = prompt("Enter DC Name");
if (dc_name2 != null){
dc_z = document.getElementById("dc_list_Z_side");
dc_z.options[dc_z.selectedIndex].text = dc_name2;
dc_z.options[dc_z.selectedIndex].value = dc_name2;
}
}
return false;
}
Is there a way i can select ID in form using JS?
No.
If you are speaking about having the same form elements on the same page, using the same id (e.g. "dc_list_A_side") you cannot fetch them with document.getElementById(). The id-attribute has to have a unique value for the whole HTML page. JavaScript does not necessarily rely on valid HTML, but in this case it is simply impossible for JavaScript to achieve what you want.
Consider changing the IDs to "dc_list_A_side_a" and "dc_list_A_side_b" for example.
Okay guys, I am trying to use JavaScript to validate a form, and then display a "Thank you" message after its all been validated with correct information. I've got it working to validate the first name, email address, and a radio selection, however I can't seem to get it to validate the state selection, or display the thank you message, but I've also used my browser's(Firefox) Dev Console to dig for syntax errors. None are displayed. Any help?
A small snip of the code is below, and a jsfiddle link to the whole code, plus the HTML is below that.
function validForm() { // reference point
/* first name, email, comments and phone */
var fname = document.form1.fname;
var email = document.form1.email;
var comments = document.form1.comments;
var phone1 = document.form1.phone1;
var phone2 = document.form1.phone2;
var phone3 = document.form1.phone3;
/* collecting the error spans for later use */
var fnErr = document.getElementById('fnErr');
var lnErr = document.getElementById('lnErr');
var emErr = document.getElementById('emErr');
var phErr = document.getElementById('phErr');
var cmErr = document.getElementById('cmErr');
var state = document.getElementById('stErr');
if(fname.value=="") {
fnErr.innerHTML = "We need your name, please.";
fname.focus();
return false;
} else {
fnErr.innerHTML = "";
}
if(email.value=="") {
emErr.innerHTML = "We need your email, please.";
email.focus();
return false;
} else {
emErr.innerHTML = "";
}
if(state.value=="none") {
fnErr.innerHTML = "Please select your state.";
state.focus();
return false;
} else {
fnErr.innerHTML = "";
}
/[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}/i;
if(isNaN(phone1.value) || isNaN(phone2.value) ||
isNaN(phone3.value)) {
phErr.innerHTML = "If you include a phone number it should be numbers only.";
phone1.select();
return false;
} else {
phErr.innerHTML = "";
}
var notices = document.form1.notices;
var selected;
for(var i=0;i<notices.length;i++) {
if(notices[i].checked) {
selected = notices[i].value;
}
}
/* set up a message for a advert recipient */
var msg = "Thank you, <b>"+fname.value
+"!</b> Your message has been received and one of our representatives will reply to <a href='"
+email.value+"'>"+email.value+"</a> within a day or two. Relax, and enjoy the rest of the site!";
if(selected != undefined) {
document.getElementById('notePref').innerHTML = "";
if (selected == "yes") { // here's where we test the contents of "selected"
document.getElementById('fnlMsg').innerHTML = msg;
} else {
document.getElementById('fnlMsg').innerHTML = "<strong>"+fname.value+"</strong>, thank you for your feedback!";
}
var contactForm = document.getElementById('registerForm').setAttribute('class','hide');
var loseSep = document.getElementsByClassName('spec');
loseSep[0].setAttribute('class', 'hide');
} else {
document.getElementById('notePref').innerHTML = "Please make a selection:";
}
} // reference point
https://jsfiddle.net/xp5e099y/2/
first: you dont have place(div/span/etc) with id ="fnlMsg"
second: you dont have place(div/span/etc) with id ="contactForm"
then change your html
<select name="state">
with
<select id="state">
and your script from this
var state = document.getElementById('stErr');
to
var state = document.getElementById('state');
Here is your culprit 'fnlMsg' element is not defined
if (selected == "yes") { // here's where we test the contents of "selected"
document.getElementById('fnlMsg').innerHTML = msg;
} else {
document.getElementById('fnlMsg').innerHTML = "<strong>"+fname.value+"</strong>, thank you for your feedback!";
}
I am trying to make a javascript validating form, and am a bit stuck on validating drop down inputs (select)
I have been using this so far but am unsure on how to implement the validation to the select options, if anyone could give me some tips that would be great.
Edit: Also, how would I implement email validation, e.g containing #, thanks
Thanks
<input id="firstname" onblur="validate('firstname')"></input>
Please enter your first name
Thanks
http://jsfiddle.net/ww2grozz/13/
you need to handle select as follow
var validated = {};
function validate(field) {
// Get the value of the input field being submitted
value = document.getElementById(field).value;
// Set the error field tag in the html
errorField = field + 'Error';
// Set the success field
successField = field + 'Success';
if (value != '') {
document.getElementById(successField).style.display = 'block';
document.getElementById(errorField).style.display = 'none';
validated[field] = true;
} else {
document.getElementById(successField).style.display = 'none';
document.getElementById(errorField).style.display = 'block';
validated[field] = false;
}
}
function SimulateSubmit() {
// Query your elements
var inputs = document.getElementsByTagName('input');
// Loop your elements
for (i = 0, len = inputs.length; i < len; i++) {
var name = inputs[i].id;
if (!validated[name]) {
// Call validate
validate(name);
// Prevent default
}
}
var all_select = document.getElementsByTagName("select"); // get al select box from the dom to validate
for (i = 0, len = all_select.length; i < len; i++) {
var name = all_select[i].id;
if (!validated[name]) {
// Call validate
validate(name);
// Prevent default
}
}
}
here the Working fiddle
using jQuery function
$('input').on('keyup', function() {
var isValid = $.trim($(this).val()) ? true : false;
// show result field is Valid
});
You must use <form> tag and set your action to it I have done that check this link and I have added select tag and set it to -1 by default for checking purpose while validating
When I change the value of a particular column during inline edit, I want to change the editable property value of another column of the same row dynamically. Below is a part of my code:
{ name: "admin", width:250, editable:<?php echo $owner; ?>, edittype:"custom", editoptions: {
custom_element: myelem,
custom_value:myvalue,
dataEvents: [{
type: 'change',
fn: function (e) {
var $this = $(e.target), $td, rowid;
var radSel = $(e.target).val(); //alert(radSel);
if(radSel == "No"){
if ($this.hasClass("FormElement")) {
$("#request").prop("editable", true);
} else {
//alert("you are here!!");
var row = $this.closest('tr.jqgrow');
var rowId = row.attr('id'); //alert(rowId);
$("#" + rowId + '_request').prop("editable", true);
}
}
}
}]
}},
{ name: "request", width: 100},
......
function myelem (value, options) {
var radio1 = document.createElement('input');
radio1.id = 'radY';
radio1.type = 'radio';
radio1.name = 'appr';
radio1.value = 'Yes';
if(value.match(/^Yes.*/)){ radio1.checked = true; }
var radio2 = document.createElement('input');
radio2.id = 'radN';
radio2.type = 'radio';
radio2.name = 'appr';
radio2.value = 'No';
if(value.match(/^No.*/)){ radio2.checked = true; }
var label1 = document.createElement('label');
label1.setAttribute('for', radio1.id);
label1.innerHTML = 'Yes';
var label2 = document.createElement('label');
label2.setAttribute('for', radio2.id);
label2.innerHTML = 'No';
var container = document.createElement('div');
container.appendChild(radio1);
container.appendChild(label1);
container.appendChild(radio2);
container.appendChild(label2);
return container;
}
function myvalue(elem, operation, value) {
if(document.getElementById('radY').checked) {return "Yes";}
else if(document.getElementById('radN').checked) {return "No";}
else {return ""; }
}
When i change the radio button to "No", it does enter into the if loop (under dataEvents) but the editable property on the 'request' column is not set to true dynamically. Any help much appreciated. thanks.
The editable property will be used by jqGrid before starting editing. If you want to prevent editing dynamically you have to set disable or readonly property/attribute on the corresponding existing editing field instead of setting editable property.
Moreover you seems to assign fix id attributes ('radN', 'radY') for custom editing field. It's dangerous because you can have id duplicates. Inline editing allows you to editing more as one row at the same time. In the case two custom editing elements with the same ids will be created and you will have problems. I recommend you additionally to set <input> inside of <label>. In the case you will don't need any id or for attributes. Try
<label><input type="radio" name="appr" checked="checked" value="Yes"/>Yes</label>
<label><input type="radio" name="appr" value="No"/>No</label>
One can check the radio button by clicking on the label.