I have a form with 6 options that runs offline on a drive with no internet access. When a user clicks a checkbox, it places a heading in the and likewise for the other options. If a checkbox is unselected, it removes the heading from the .
Problem - when a checkbox is checked or unchecked, it resets all other free text that was added leaving headings only. I don't want this to influence additional data, only remove the specific heading if option is unchecked.
I also want the last heading in the to have a few line breaks after too. Help appreciated.
JAVASCRIPT
$(function() {
$('input[name=activeOptions]').on('change', function() {
var arr = $('input[name=activeOptions]:checked').map(function () {
return this.value;
}).get();
$('#Options').val(arr.join("\n\n\n.\n"));
});
});
HTML
<script type="text/javascript" src="../dis/jquery.min.js"></script>
<script type="text/javascript" src="../dis/checkboxoptions.js"></script>
<SCRIPT LANGUAGE="JavaScript">
window.clipboardData.setData('text',
document.getElementById('Options').value
);
function ClipBoard1()
{
//create a new element, otherwise setting of range.text
//will change the form-fields values
var dummy=document.createElement('textarea');
//the range
Copied = dummy.createTextRange();
//set the text
Copied.text = ".\n" +
"\+\+\+\+\+ CHECKS \+\+\+\+\+" +
"\n.\n" +
document.getElementById('Options').value + "\n\n"
;
//expand the range to contain all contents
Copied.expand('textedit');
//Copy
Copied.execCommand("Copy");
}
</SCRIPT>
</HEAD>
<body class="body">
<P>
<FORM name="Checks">
<div class="title">++++ CHECKS ++++</div>
<div class="main">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 1--'>Option 1</div>
<div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 3--'>Option 3</div>
<div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 5--'>Option 5</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 2--'>Option 2</div>
<div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 4--'>Option 4</div>
<div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 6--'>Option 6</div>
</div>
</div>
</div>
<p>
<TEXTAREA NAME="Options" ID="Options" rows="15" cols="55"></TEXTAREA>
<p align=center>
<BUTTON onClick="ClipBoard1();" class="copyreset">Copy & Reset</BUTTON>
<INPUT class="reset" type=reset value=Reset>
<p>
</DIV>
</FORM>
</BODY>
</HTML>
Aucun commentaire:
Enregistrer un commentaire