jQuery copy and paste using document.execCommand("copy") and ("paste") - javascript

I have one dropdown upon selection of which I want to copy the value of that dropdown and paste in an input field below without using clt+v every time
Here is the code what I tried:
$('body').append(`<div id="selectDialog" title="Select Regex Type" style="text-align:center;display:none;">
<select id="listSelection">
<option value ="">None</option>
<option value ="[a-z]+">Single Digit Integers</option>
<option value ="^[0-9]">Multi Digit Number</option>
<option value ="/^-?[0-9]+\.?[0-9]*$/">Decimal Number</option>
</select>
<div style="margin:10px">
<button id="closeSelection" style="background-
color:#3B5E9E" >save</button>
</div>
</div>`);
$(function () {
$("#selectDialog").dialog({
autoOpen: false,
});
$('#changePattern').on("click", function () {
$("#selectDialog").dialog("open");
});
$("#listSelection")
.change(function () {
var s = $("#listSelection option:selected").val();
$("#changePattern").val(s);
$("#changePattern").attr("patternMask" , s);
$('#changePattern').select();
document.execCommand("copy");
$('#reg').select();
})
.trigger("change");
$('#reg').select( function (){
/*here I am trying to copy using document.texecCommand("copy");
but unable to copy*/
});
$('#closeSelection').on("click", function () {
$("#selectDialog").dialog("close");
});
});
});
on clicking input having an id changePattern , i am opening an dropdown from which i am populating another field with id =reg
h i am saving a pattern to:
<input id="changePattern" />
<input id="reg" />

<input type="hidden"> or <input hidden>
.on() change of select store it's selected value to a hidden input. then register the inputs to the click event. Whenever a click happens on those inputs the value of the hidden input will be pasted to it.
Did you get an .execCommand() to work on an input? document.execCommand() are for contenteditable elements not form elements.
Demo
$('select').on('change', function(event) {
$('#X').val($(this).val());
});
$('input').on('click', function(event) {
if ($('#X').val() !== null) {
$(this).val($('#X').val());
}
});
<input id='X' hidden value=null>
<select>
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<br><br>
<input>
<input>
<input>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Related

Changing display to "inline"/"none" with a select

I want show or hide an input by selecting an option in a select if value = 4 or 8, then show the inputs. I know that I have to work with the css (display: "block/none") but my onchange seems to not be working. When I use radio button, it works with an onclick.
Here's my code:
function WorkTravelControl() {
window.addEventListener("load", function() {
document.getElementById("homeworkingselect")
.addEventListener("change", function() {
var value = document.getElementById("homeworking").value
if (value === 0) {
document.getElementById("homeworking").style.display.none
} else {
document.getElementById("homeworking").style.display.inline
}
});
});
}
<!-- probleme de visbilité des elements -->
<select name="homeworkingselect" value="0" onchange="WorkTravelControl()">
<option value="0" selected></option>
<option value="4">4</option>
<option value="8">8</option>
</select>
</td>
<td>
<input type="text" ng-model="outsideluxWork.value" id="homeworking"></td>
</td>
<td>
<input type="text" ng-model="outsideluxTravel.value" id="homeworking"></td>
</tr>
can someone help with the Javascript going with?
You have an event handler wrapped in a function called by an inline event handler. So try getting rid of the onchange in the select and don't have window.addEventListener("load" wrapped in a function. Also add id="homeworkingselect" to your select since that is what the event listener is looking for. You are also reusing IDs, but you can't duplicate IDs.
I used a class for the text elements and looped through the text elements on change.
window.addEventListener("load", function() {
document.getElementById("homeworkingselect").addEventListener("change", function(e) {
value = e.target.value;
homeworking = document.querySelectorAll(".homeworking");
homeworking.forEach(function(el) {
el.style.display = (value == 0) ? "none" : "inline";
});
});
});
<select name="homeworkingselect" id="homeworkingselect">
<option value="0" selected></option>
<option value="4">4</option>
<option value="8">8</option>
</select>
<input type="text" ng-model="outsideluxWork.value" class="homeworking">
<input type="text" ng-model="outsideluxTravel.value" class="homeworking">

Change ReadOnly Input Value on <select> option change

I want to display the value in a "select > option" in an based on the location selected from my tag.
Here is the html:
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
And here is the javascript:
$(document).ready(function() {
$("#stateCoord option").filter(function() {
return $(this).val() == $("#stateCoordInfo").val();
}).attr('selected', true);
$("#stateCoord").live("change", function() {
$("#stateCoordInfo").val($(this).find("option:selected").attr("value"));
});
});
I'm still getting the hang on javascript so a detailed explanation won't hurt. Thanks in advance.
If I assume correctly, you want this:
1) initialization of the select option at document ready, that strange thing the code with filter() was trying to do.
2) Capture the change event on the select and show the value of the current selected option on the input. This is what the live() (deprecated) part was trying to do.
$(document).ready(function()
{
$("#stateCoord").val("").change();
$("#stateCoord").change(function()
{
$("#stateCoordInfo").val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord">
<option value="" selected>SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo">
$(document).ready(function() {
$("body").on("change","#stateCoord",function() {
$("#stateCoordInfo").val($(this).find("option:selected").val());
});
$("#stateCoord").trigger("change");
});
From what I understand, you want to update the text shown in the readonly text box with the value attribute of the selected option from the dropdown.
To do this, you just need to update the val of your read-only text box to the val of the drop-down whenever change event is fired.
$(document).ready(function() {
$('#stateCoord').change(function(e) {
$('#stateCoordInfo').val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="stateCoord" id="stateCoord" autocomplete="off">
<option selected="selected">SELECT STATE</option>
<option value="lg">Lagos</option>
<option value="abj">Abuja</option>
</select>
<input type="text" name="stateCoordInfo" value="" id="stateCoordInfo" readonly>
I am not sure, if this is what you need, but I think it should be: JSfiddle
Here is the JS code:
$(document).ready(function() {
$("#stateCoord").change(function() {
var value = $("#stateCoord option:selected").text();
$("#stateCoordInfo").val(value);
});
});

Select box option based on text box value

Below is my code which change select option based on text box value but I want to change value of select option without click on "Select Now" button. Means select option change directly from text box value, button is not needed to do same.
<select name="sel" id="MySelect">
<option value="">Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select><br><br>
Select By Text: <br>
<input type="text" name="selText" value="Six">
<input type="button" name="selectNow" value="Select Now">
$(function() {
$('input[name=selectNow]').on('click', function(event) {
selectByText($.trim($('input[name=selText]').val()));
}).click();
});
function selectByText(txt) {
$('#MySelect option')
.filter(function() {
return $.trim($(this).text()) == txt;
})
.attr('selected', true);
}
The logic is the same, except you need to hook to the keyup event on the selText element:
$('input[name=selText]').on('keyup', function() {
selectByText($.trim($(this).val()));
});
Example fiddle
Just change the event to be raised when the value of selText changes:
$('input[name=selText]').on('change', function(event) {
selectByText($.trim(this.value));
}).change();
See Fiddle

Creating a text and dropdown list search functionality

I've written a piece of code that allows a Sharepoint list user to select a search criteria from a drop down list. By default, next to this, I'd like a textbox to be present. Besides the text box on the page is a Search button and a Reset button. This looks like this:
Ideally, what I'd like is that if the user selects a specific option in the search criteria drop down list (say, Field 3), the text box will change to a drop down list, which they choose their option from and then search for as usual.
This is what I have so far:
<script type="text/javascript">
function RedirectUrl() {
var sField = document.getElementById("searchField").value;
if (sField == "Field3") {
var search = document.getElementById("dropdownSearch").value;
} else {
var search = document.getElementById("textSearch").value;
}
var url = "";
if (search != "") {
url = "FilterName=" + sField + "&FilterMultiValue=*" + search + "*";
window.location.href = //Url of our site
}
else {
return false;
}
}
function ClearUrl() {
//Refresh page
}
</script>
Search Field: <select id="searchField">
<option selected value="Field1" >Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>
if (searchField == "Field3") {
Search text: <select id="dropdownSearch" />
<option selected value="One" >One</option>
<option value="Two">Two</option>
</select>
} else {
Search text: <input type="text" id="textSearch" />
}
</script>
<input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
<input type="button" id="btnClear" value="Reset Filters" onclick="return ClearUrl();" />
The functionality of this code works. If the user selects "Field3" from the search field drop down list, whatever is selected in the drop down list is shown. If the user selects any other option from the search field drop down list, the text in the "search text" field is shown.
However, due to the if statement contained within, it looks like this:
Questions:
How can I get the code to automatically display either the text box or the drop down list depending on the user's selection in the Search Field?
How can I hide the if statement logic?
As can probably be guessed from the code I have almost zero experience in Javascript (and absolutely zero experience in JQuery, if any answers tend that way) - although I have tagged JQuery as from what little I do know I feel it might be better(?) suited for it.
Edit: My not-working code after ZiNNED's help:
Search Field:
<select id="searchField">
<option selected value="Field1">Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>Search Text:
<select id="dropdownSearch" style="display: none;">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<input id="textSearch" />
<input type="button" id="btnSearch" value="Search" />
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js">
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>
You should do a couple of things.
First: remove the if-statement from the code and hide the dropdownSearch select by default:
HTML
Search Field: <select id="searchField">
<option selected value="Field1" >Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>
Search text:
<select id="dropdownSearch" style="display: none;" />
// All options and their values
</select>"
<input type="text" id="textSearch" />
Second, add a reference to jQuery and the following JavaScript to your document:
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
This adds an event to the searchField dropdown that triggers when its value is changed. If the value equals Field3 the dropdownSearch is shown; otherwise the textSearch.
See this FIDDLE.
EDIT: After your edit, try changing the following:
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js">
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>
to:
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>
You shouldn't add JavaScript to script tags when you're also referring to an external file in it.

More Properties of Dropdown options

I've got a dropdown setup going on in which the user enters an input value, chooses a calculation to perform on that number from a dropdown, then a function displays the result.
What I would like is to add more 'values' to the dropdown, so when an option is selected from the list, it can also, say, display some text stored in the list, or some other information. Right now I can return the selected option's value (.value) and use the option's name (.text) to perform functions, but is there any more data I can add to each selection to be used later?
<html>
<head>
<script language="JavaScript">
function myfunction(form)
{
var i = parseFloat(form.Input.value, 10);
var e = document.getElementById("calculationList");
var strUser = e.options[e.selectedIndex].value;
form.Output.value = strUser*i;
}
</script>
</head>
<body>
<form>
Input Number:
<INPUT NAME="Input" SIZE=15>
Make a selection:
<select id="calculationList" onchange="myfunction(form)">
<option></option>
<option value="2">Double It</option>
<option value="3">Triple It</option>
<option value="10">Multiply It By ten</option>
</select>
Output Number:
<INPUT NAME="Output" SIZE=15>
</FORM>
</body>
</html>
Basically you may attach data attribute to your options like that:
<select id="calculationList">
<option></option>
<option value="2" data-aaa="10">Double It</option>
<option value="3" data-aaa="20">Triple It</option>
<option value="10" data-aaa="30">Multiply It By ten</option>
</select>
And later get the content of the attribute:
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
jsfiddle -> http://jsfiddle.net/pzKrr/
Edit:
If you want to implement my solution remove onchange="myfunction(form)" from the select tag. After that add the following code just after that myfunction
window.onload = function() {
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
};

Categories