In this example (a-star.dk) the user can compose text by selecting different check boxes - the choices are instantly written to the textbox (for COUNTRY at least). But I have problems integrating line 2-3-4 (CAPITAL, COLOR, NUMBER) in the same output textbox, how can this be done? So at final all information from the checked boxes are written in the outbox, but each section (1-2-3-4) starting at a new line.
Secondly, I want to paste/copy/cut the final result in the text box to the clipboard (equals Ctrl+C) so it can be used in other software. Im using clipboard.min.js but it does not seem to work, what is wrong?
Thirdly, thus not very important, is it possible to remove the first autogenerated "," from each section? (how?) so that the final result would be: [COUNTRY: America, Burma, Chile,] and not [COUNTRY:, America, Burma, Chile,]
Fourthly, how can I integrate user input (line 4 - NUMBER - Other number) numbers or text? in the array and thus in the final output
<!doctype html>
<html><head><meta charset="UTF-8"><title>TEST</title>
<script src="clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input[name='A']").change(function(){
var checkedCountries = $("input[name='A']:checked");
var countries = [];
for(var i = 0; i<checkedCountries.length; i++) {
countries.push(checkedCountries[i].value + ",");
}
$("#countryList").val(countries.join(" "));
});
$("#copyBtn").click(function() {
var copyText = document.getElementById("countryList");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
});
});
</script>
<script>function changeText(){
var userInputA = Array.prototype.slice.call(document.querySelectorAll(".A:checked")).map(function(el) {return el.value;}).join(', ')
var userInputB = Array.prototype.slice.call(document.querySelectorAll(".B:checked")).map(function(el) {return el.value;}).join(', ')
var userInputC = Array.prototype.slice.call(document.querySelectorAll(".C:checked")).map(function(el) {return el.value;}).join(', ')
var userInputD = Array.prototype.slice.call(document.querySelectorAll(".D:checked")).map(function(el) {return el.value;}).join(', ')
document.getElementById('output1').innerHTML = userInputA;
document.getElementById('output2').innerHTML = userInputB;
document.getElementById('output3').innerHTML = userInputC;
document.getElementById('output4').innerHTML = userInputD;
return false;
}
</script>
<script>
new Clipboard('.btn');
</script>
</head><body>
<form method="get" onsubmit="return changeText()">
<table style="background-color:white;">
<tr><td style="background-color:#EFEFFB;"><input type="checkbox" name="A" class="A" value="COUNTRY:">COUNTRY:</td><td style="background-color:#EFEFFB;">
<input type="checkbox" name="A" class="A" value="America">America
<input type="checkbox" name="A" class="A" value="Burma">Burma
<input type="checkbox" name="A" class="A" value="Chile">Chile
<input type="checkbox" name="A" class="A" value="Denmark">Denmark
<input type="checkbox" name="A" class="A" value="England">England
</td></tr>
<tr><td style="background-color:#EFEFFB;"><input type="checkbox" name="B" class="B" value="CAPITAL:">CAPITAL</td><td style="background-color:#EFEFFB;">
<input type="checkbox" name="B" class="B" value="Amsterdam">Amsterdam
<input type="checkbox" name="B" class="B" value="Berlin">Berlin
<input type="checkbox" name="B" class="B" value="Copenhagen">Copenhagen
<input type="checkbox" name="B" class="B" value="Damaskus">Damaskus
</td></tr>
<tr><td style="background-color:#EFEFFB;"><input type="checkbox" name="C" class="C" value="COLOR:">COLOR</td><td style="background-color:#EFEFFB;">
<input type="checkbox" name="C" class="C" value="Amsterdam">Blue
<input type="checkbox" name="C" class="C" value="Copenhagen">Red
<input type="checkbox" name="C" class="C" value="Green">Green
</td></tr>
<tr><td style="background-color:#EFEFFB;"><input type="checkbox" name="D" class="D" value="NUMBER:">NUMBER</td><td style="background-color:#EFEFFB;">
<input type="checkbox" name="D" class="D" value="1">1
<input type="checkbox" name="D" class="D" value="2">2
<input type="checkbox" name="D" class="D" value="3">3
<input type="checkbox" name="D" class="D" value="4">4
<input type="checkbox" name="D" class="D" value="5">5
<input type="number" name="D" min="6" max="100">Other number
</td></tr>
</table>
<br /><br />
<textarea id="countryList" rows="8" cols="61"></textarea></br>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#countryList">Cut to clipboard</button>
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />
<b id='output3'></b><br />
<b id='output4'></b><br />
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire