how to copy some text to the clipboard with jquery or javascript, from google. i know there
is a pludgin named zeroclipboard http://code.google.com/p/zeroclipboard/ can do this with
cross browers. the instructions link http://code.google.com/p/zeroclipboard/wiki/Instructions
but when i tested it on my site. i set it to copy text optionally . it can't work.
my test link is http://xanlz.com/copy/1.html
it always copys all the values. even i uncheck some check box. may be the value doesn't be changed. but when i alter() the variable, the value is ok. how to correct it? thank you.
i want it can copy the checked box value. if the box unchecked, then don't copy its value.
EDIT :
Took me a while to figure this out (didn't have the correct references to the .swf), but here is a complete working example (tested IE 8 & Firefox 4)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://zeroclipboard.googlecode.com/svn/trunk/ZeroClipboard.js" ></script>
<script type="text/javascript" >
$(document).ready(function(){
var checkall = $('#checkall');
var boxes = $('input[type="checkbox"]').not(checkall);
checkall.click(function () {
boxes.attr('checked', this.checked);
});
boxes.change(function() {
checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length;
});
ZeroClipboard.setMoviePath('http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
clip.glue("copyvalue");
clip.addEventListener( 'onMouseOver', function(){
var text = ' '; //Make this a space since we can't copy nothing...
$('input.forminput:checked').each(function() {
text += $(this).val() + "\n";
});
clip.setText(text);
});
}) ;
</script>
</head>
<body>
<input class="forminput" type="checkbox" value="test one" checked="checked" name="VD1">
<br>
<input class="forminput" type="checkbox" value="test two" checked="checked" name="VD2">
<br>
<input class="forminput" type="checkbox" value="test three" checked="checked" name="VD3">
<br>
<input class="forminput" type="checkbox" value="test four" checked="checked" name="VD4">
<br>
<input class="forminput" type="checkbox" value="test five" checked="checked" name="VD5">
<br>
<input id="checkall" type="checkbox" checked="checked" name="checkall">
<input id="copyvalue" class="button" type="button" value="copy test">
</body>
</html>
ORIGINAL:
You don't have a click event for your button.
You need to add something like:
var clip = new ZeroClipboard.Client();
$("#copyvalue").click(function(){
var text = '';
$('input.forminput:checked').each(function() {
text += $(this).val() + "\n";
});
//alert(text);
clip.setText(text);
});
If you don't like to use (or are not allowed) to rely on flash (which I personally would not), I think you're better off creating a text area with the text (or serialized data) preselected with an instruction for the user to copy and later paste the data.
You can make the instruction feel more native by sniffing for the operating system and give different instructions on how to copy and paste (e.g. ctrl+c for windows/linux or ⌘-C for mac).
Maybe not as sexy, but way more foolproof...
Related
So I have been trying to create a dynamic form that changes the value of the offered packages, by choosing what type of customer the user is.
My JSFiddle of the section of the form:
https://jsfiddle.net/mullern/ch8z0hry/4/
$(document).ready(function(){
$('#student').on('click', function() {
$('#minimal').val('100');
$('#soundonly').val('150');
$('#soundandlight').val('175');
$('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
$('#minimal').val('150');
$('#soundonly').val('200');
$('#soundandlight').val('300');
$('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
$('#minimal').val('200');
$('#soundonly').val('300');
$('#soundandlight').val('400');
$('#totalpartypackage').val('50');
});
});
I searched the internet for hours trying different solutions. In the end I read through the W3schools page about JQuery event methods and tried to piece together what seemed right to me. In the JSFiddle I also included a script to check if the values of the Radiobuttons. I noticed that the JSFiddle seems to work but on my own private server it doesn't. What am I doing wrong?
Edit: I am currently running the page on my synology NAS with Webstation.
You have error javascript in console? And you have included jquery?
Try insert this:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
I have been Fiddling around with the code and came to the conclusion that it actually works fine. You can go check out my JSFiddle to see the final result:
https://jsfiddle.net/mullern/no0qfqhh/
The code I started with was actually already correct.
$(document).ready(function(){
$('#student').on('click', function() {
$('#minimal').val('100');
$('#soundonly').val('150');
$('#soundandlight').val('175');
$('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
$('#minimal').val('150');
$('#soundonly').val('200');
$('#soundandlight').val('300');
$('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
$('#minimal').val('200');
$('#soundonly').val('300');
$('#soundandlight').val('400');
$('#totalpartypackage').val('50');
});
});
Using the button at the end made checking the code very simple, especially for future testing when it comes to adding more values and displaying them in the end.
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="prices">
<fieldset data-role="controlgroup" id="pricetag">
<label><input type="radio" name="price" id="minimal" value checked="checked">Minimal</label>
<label><input type="radio" name="price" id="soundonly" value>Sound Only</label>
<label><input type="radio" name="price" id="soundandlight" value>Sound and Light</label>
<label><input type="radio" name="price" id="totalpartypackage" value>Total Party Package</label>
<label><input type="radio" name="price" id="custom" value="">Custom</label>
</fieldset>
</div>
<script>
function display() {
var a = document.getElementById('minimal').value;
var b = document.getElementById('soundonly').value;
var c = document.getElementById('soundandlight').value;
var d = document.getElementById('totalpartypackage').value;
alert("The value of the radio buttons are: " + a + " and " + b + " and " + c + " and " + d);
}
</script>
<button onclick="display()">Check</button>
Thank to everyone that contributed in any way.
For better understanding what I want to do, here is a screenshot
I want to be able to submit whether checkboxes are checked or not. For this I used the trick to have hidden input fields, because otherwise unchecked boxes are not submitted. What I want to do now is to give pairs (one hidden, one checkbox) the same name, but each pair a different name. I tried quite a bit with javascript and jQuery but could not figure out how to get this done. The "+" Button is for adding more Checkboxes, the "-" Button is for deleting them again.
<html>
<head>
<title>test</title>
<script type="text/javascript">
function clone(button, objid)
{
tmpvalue = document.test.elements['param[]'][1].value;
document.test.elements['param[]'][1].value = '';
var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
button.parentNode.insertBefore(clone_me, button);
document.test.elements['param[]'][1].value = tmpvalue;
}
function remove_this(objLink)
{
objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
</script>
</head>
<body>
<form name="test" method="post" action="test2.php">
<input name="param[0]" value="0" type="hidden">
<div id="hidden" style="visibility:hidden; display:none">
<div id="table"><table>
<tr><td>
<input name="param[]" type='hidden' value="0">
Parameter: <input name="param[]" type="checkbox" value="1">
</td>
<td>
<span style="margin-left:2em;"></span><input value="-" onclick="javascript:remove_this(this)" type="button">
</td>
</tr>
</table></div>
</div>
<div>
<input style="margin-top:2em;" value="+" onclick="javascript:clone(this, 'table');" type="button">
<button type="submit" name="sent">Submit</button>
</div>
</form>
</body>
</html>
So it would actually be nice to have some sort of counter like this:
<input name="param[i]" type='hidden' value="0">
Parameter: <input name="param[i]" type="checkbox" value="1">
Thanks for your help!
What about giving your checkboxes a class (for example "checkClass") and then scan all elements with this class using a jQuery? Like so..
// instead of $('button[type="submit"]') give your button an ID and use # selector
$('button[type="submit"]').click(function(){
//lets get all checkboxes..
$('.checkClass').each(function(){
// get their checked status
var checked = $(this).is(':checked');
// ..and do whatever you need here..
});
});
In terms of adding a new row on "plus" button click. Try considering the jquery "Append" method. Like so..
$('#plusButtonId').click(function(){
var rowHtml = '<tr><td>Parameter: <input name="param[]" type="checkbox" class="checkClass" value="1"></td><td><input value="-" type="button" class="remButton"></td></tr>';
$('#table').append(rowHtml);
});
..then use the ".remButton" selector and add a click event that will remove that tr element.
and last but not least - this is a great example why to start with AngularJS. It would be just one controller, a div with "ng-repeat" and a few methods. Try it ;)
I have tried a lot to add line break but it dose not work... replace \n with line brack
I'm going to save html form in txt format in Notepad see all input text with one line which is i don't want that...
need your help please.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript">
<!--
function buildData(){
var txtData = "00"+$("#nameField").val()+
" "+$("#title").val()+
"0000000000"+$("#lastNameField").val()+
"\r\n Gender: "+($("#genderMale").is(":checked")?"Male":"Female");
return txtData;
}
// This will be executed when the document is ready
$(function(){
// This will act when the submit BUTTON is clicked
$("#formToSave").submit(function(event){
event.preventDefault();
var txtData = buildData();
window.location.href="data:application/octet-stream;base64,"+Base64.encode(txtData);
});
// This will act when the submit LINK is clicked
$("#submitLink").click(function(event){
var txtData = buildData();
$(this).attr('download','sugguestedName.txt')
.attr('href',"data:application/octet-stream;base64,"+Base64.encode(txtData));
});
});
//-->
</script>
</head>
<body>
<form method="post" action="" id="formToSave">
<dl>
<dt>Date:</dt>
<dd>
<input type="text" id="nameField" value="00002014" />
<input type="text" id="title" value="Credit Card Payment" />
</dd>
<dt>Card No:</dt>
<dd><input type="text" id="lastNameField" value="Last Name" /></dd>
<dt>Gender:</dt>
<dd><input type="radio" checked="checked" name="gender" value="M" id="genderMale" />
Male
<input type="radio" checked="checked" name="gender" value="F" />
Female
</dl>
<p>Save as TXT</p>
<p><button type="submit"><img src="http://www.suttonrunners.org/images/save_icon.gif" alt=""/> Save as TXT</button></p>
thank in advance...
I think your problem is not in Javascript, but in the way it is shown afterwards. Try alert(buildData()), does it work properly? If you're appending the text to the DOM, you have to use HTML line feeds, like <br>.
Tried running the above mentioned after removing the jQuery added in. It did work as expected.
Please make sure that the returned string "txtData" is properly concatenated.
If properly concatenated then it should work unless being appended to DOM in which case you have to use a tag
I use the following code for my radio button and date field
<input type="radio" name="datefilter" value="all" checked>All sessions<br>
<input type="radio" name="datefilter" value="after" >
Changes take effect on:
<input type="text" name="date_filter" value="<? echo date('m-d-Y'); ?>">
When the user clicks on the text field, I would like the radio button with the value "after" to be selected, in case the forget to enter the value. I am a php hack, but don't know javascript much at all. If it will make it easier I can definitely add to the radio fields.
There is already a javascript function running that calls a date picking calendar popup when the user selects the text field. Don't imagine that will
Thanks!
Add some jQuery to it like this:
Example page on JSFiddle
Code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">
<script type="text/javascript">
$(document).ready(function () {
$('#date_filter').click(function () {
$("#after").attr('checked', true);
});
});
</script>
</head>
<body>
<input type="radio" name="datefilter" value="all" checked>All sessions<br>
<input type="radio" id="after" name="datefilter" value="after">
Changes take effect on:
<input type="text" id="date_filter" name="date_filter" value="2013-01-01">
</body>
</html>
This following line works as expected in Firefox but IE returns 'undefined'.
var selectedChoice = $("input[name='my.test[0].SelectedOption']:checked", '#myForm').val();
Here is a standalone sample that you can run...
Note the problem seems to be the use of '.' and '[]' in the name of the radio element. However this is how ASP.NET MVC renders them. Here is an example which works fine in Firefox but fails in IE.
<html>
<head>
<title>Testing radio selection jquery in IE 8</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<form id="myForm">
<input name="selected.Option[0]" id="selected_Option1" type="radio" value="1" checked="checked" />
<label for="selected_Option1">Option 1</label>
<br />
<input name="selected.Option1" id="selected_Option2" type="radio" value="2" checked="checked" />
<label for="selected_Option2">Option 2</label>
<br />
<input name="selectedOption[2]" id="selected_Option3" type="radio" value="3" checked="checked" />
<label for="selected_Option3">Option 3</label>
<br />
<input name="selectedOption3" id="selected_Option4" type="radio" value="4" checked="checked" />
<label for="selected_Option4">Option 4</label>
<br />
<span id="displaySelectedChoice1">No value selected.</span>
<br />
<span id="displaySelectedChoice2">No value selected.</span>
<br />
<span id="displaySelectedChoice3">No value selected.</span>
<br />
<span id="displaySelectedChoice4">No value selected.</span>
</form>
<script language="javascript" type="text/javascript">
var selectedChoice = $("input[name='selected.Option[0]']:checked").val();
$('#displaySelectedChoice1').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selected.Option1']:checked").val();
$('#displaySelectedChoice2').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selectedOption[2]']:checked").val();
$('#displaySelectedChoice3').html('You have selected: ' + selectedChoice);
var selectedChoice = $("input[name='selectedOption3']:checked").val();
$('#displaySelectedChoice4').html('You have selected: ' + selectedChoice);
</script>
</body>
</html>
Notice that the 2nd, 3rd and 4th all work but the 1st returns 'undefined' for IE. Its the only one with both '.' and '[]'.
Thanks
Try to escape the square braces in the selector, I don't think IE likes 'em too much. Also, you forgot to close the attribute selector.
var selectedChoice = $('input[name="my.test[0].SelectedOption"]:checked', '#myForm').val();
Or with escaped square braces and periods:
var selectedChoice = $('input[name="my\\.test\\[0\\]\\.SelectedOption"]:checked', '#myForm').val();
Yes, there are 2 backslashes.
I think this will work:
var selectedChoice =
$('input[name="my.test[0].SelectedOption"]:checked', '#myForm').val();
UPDATE:
Replace your JS with this:
var $radio = $('input[name="my\\.test\\[0\\]\\.SelectedOption"]');
$radio.change(function() {
$("#displaySelectedChoice")
.html("You have selected: " + $radio.filter(":checked").val());
});
See working jsFiddle demo
Your select test is invalid javascript:
var selectedChoice = $('input[name='my.test[0].SelectedOption:checked', '#myForm').val();
^--embeded quote breaks the string
This should work better:
var selectedChoice = $("input[name='my.test[0].SelectedOption']:checked", '#myForm').val();
Note that the :checked portion is not in the name= portion
I think you need to escape those [] inside your selector:
var selectedChoice = $("input[name='my.test\\[0\\].SelectedOption']:checked", '#myForm').val();
http://api.jquery.com/category/selectors/
At the top it has an entire paragraph about escaping.
I find your code pretty complicaded. Try something like this:
<form id="myForm">
<input name="my.test[0].SelectedOption" class="test" type="radio" value="1"/>
<label for="my_test_0__SelectedOption_1">Option 1</label>
<br />
<input name="my.test[0].SelectedOption" class="test" type="radio" value="2"/>
<label for="my_test_0__SelectedOption_1">Option 2</label>
<br />
<input name="my.test[0].SelectedOption" class="test" type="radio" value="3"/>
<label for="my_test_0__SelectedOption_1">Option 3</label>
<br />
<span id="displaySelectedChoice">No value selected.</span>
</form>
<script language="javascript" type="text/javascript">
$(".test").change(
function () {
var value = $(this).val();
$("#displaySelectedChoice").replaceTo("you choose: "+value)
}
)
</script>
Dont know wich version of jquery youre using, but even though I red about the new version of jquery that IE has a problem to "see" what you want with this ":checked".
Anyways avoid using this atribute for radio because, well the only checked radio is the one changed anyways.
My point is make a simpler code, it might help.