Hacking fields and actions
by Alon Rotem
HTML
<form id="NewFeedbackForm" method="post">
<div id="container">
<textarea id="FeedbackDescription" cols="60" rows="4"></textarea>
<div class="property t-attach-files">attach</div>
</div>
<input type="button" value="Apply" onClick="xxx()" id="submitFeedbackButton"/>
</form>
CSS
.customFieldWrapper {
margin-top: 10px;
}
.customField {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #666666;
display: block;
height: 26px;
margin: 0 auto;
position: relative;
width: 561px;
}
.customFieldPlaceholder {
display: block;
font-size: 14px;
left: 5px;
position: absolute;
top: 2px;
width: 559px;
}
.customFieldSearchBox {
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
display: block;
font: 14px"segoe ui", arial, sans-serif;
height: 22px;
padding: 2px;
width: 557px;
}
.customFieldHasValue {
display:none;
}
.customFieldHasFocus {
color: #999999;
}
JavaScript
$(document).ready(function () {
$("#FeedbackDescriptionControl .placeholder-text").html("Describe clearly what you need to be documented and why;<br/>Whom to contact from the dev teams..")
InsertCustomField("feedbackLinkWrapper", "feedbackLinkPlaceholder", "(optional) Enter a link, if applicable...", "feedbackLinkCustomField");
InsertCustomField("feedbackVersionWrapper", "feedbackVersionPlaceholder", "(optional) Enter version, if applicable. E.g. Sitefinity 5.2 and later...", "feedbackVersionCustomField");
$("<div id='errMissingDescription' class='field-validation-error' style='display:none;'>Please add a description above</div>").insertAfter("#FeedbackDescriptionControl");
$("#FeedbackDescription").keyup(function(){ $("#errMissingDescription").hide(); });
var submitButton = $("#submitFeedbackButton")[0];
var originalClickFunction = submitButton.onclick;
submitButton.onclick = function(){
if(!ValidateFieldsBeforeSubmission()) {
CollectCustomFieldsData();
originalClickFunction();
}
};
});
function ValidateFieldsBeforeSubmission()
{
var errors = false;
if($("#FeedbackDescription").val() == "")
{
errors = true;
$("#errMissingDescription").show();
}
return errors;
}
function CollectCustomFieldsData()
{
var descriptionField = $("#FeedbackDescription").val();
var link = $("#feedbackLinkCustomField").val();
var version = $("#feedbackVersionCustomField").val();
var additionalFieldsSeparator = "\n\n----- Additional Fields ---- ";
descriptionField = descriptionField.split(additionalFieldsSeparator)[0];
descriptionField += "\n\n----- Additional Fields ---- ";
descriptionField += "\nLink: " + ((link=="") ? "N/A" : link);
descriptionField += "\nVersion: " + ((version=="") ? "N/A" : version);
$("#FeedbackDescription").val(descriptionField)
}
function InsertCustomField(wrapperId, placeholderId,...