We Keep Coding

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

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>

Change Button Name="" and Form Action based on Select Option in Jquery

Hi I have form which contains three search criteria.
These search criteria are jobs, resume, recruitment consultant.
Based on the drop down, fields are updated accordingly.
Based on the select value I want to change the action on the form, and name of the submit button. Problem is putting values with hyphen in option select makes jquery not work.
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment Consultant">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Change the form action as per following
action="search-recruitment-consultant-results?"
action="search-resume-results?"
action="search-job-results?"
And the button name (NOT VALUE OR TEXT) as per following
name="searchrecruitmentconsultantbutton"
name="searchresumebutton"
name="searchjobbutton"
I put these in option values accordingly
search-recruitment-consultant-results?
search-resume-results?
search-job-results?
and then used
<select name="search_for" onchange="this.form.action=this.value;">
but putting hyphen in option values makes the jquery show/hide not work

Try this code, see i have use hyphen in option and it works properly.
<form method="get" name="search" id="form" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment-Consultant">Recruitment Consultants</option>
</form>
<script>
$(document).ready(function() {
$("#search_for").change(function(){
if($(this).val()=='Jobs')
{
$("#form").attr("action",'search-job-results?');
$("#search_submit").attr('name',"searchjobbutton");
}
else if($(this).val()=='Resume'){
$("#form").attr("action",'search-resume-results?');
$("#search_submit").attr('name',"searchresumebutton");
}
else if($(this).val()=='Recruitment-Consultant'){
$("#form").attr("action",'search-recruitment-consultant-results?');
$("#search_submit").attr('name',"searchrecruitmentconsultantbutton");
}
});
});
</script>

i think this will help you
add id for your form 'formId'
$(document).ready(function(){
$('#search_for').change(function(){
var cur = $(this);
var search = cur.val();
if(search == 'job'){
$('#formId').attr('action', 'search-job-results?');
$("search_submit").attr('name', 'searchjobbutton');
} else if(search == 'Resume'){
$('#formId').attr('action', 'search-resume-results?');
$("search_submit").attr('name', 'searchresumebutton');
}else if(search == 'Recruitment Consultant'){
$('#formId').attr('action', 'search-recruitment-consultant-results?');
$("search_submit").attr('name', 'searchrecruitmentconsultantbutton');
}
});
});

try this
Add data attribute with button name
only you need to add - onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));" in the select
and data-name="" in the option
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>

Instead of writing multiple forms, just write one and use .change() and data-* attribute which is used to create custom tags. Store the button names inside <option data-name="button name"> then you can access this value with on change.
The data-* attributes is used to store custom data private to the page or application.
.change()
Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$('#search_for').on('change', function () {
$('form[name="search"]').attr('action', $(this).val()).find(':submit').attr('name', $(this).find(':selected').data('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option data-name="searchjobbutton" value="search-job-results?">Jobs</option>
<option data-name="searchresumebutton" value="search-resume-results?">Resumes</option>
<option data-name="searchrecruitmentconsultantbutton" value="search-recruitment-consultant-results?">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>

How to change a border color of html select tag if value is empty or 0

I have 4 select tag with class name select2 assigned to it. I want to make the border turn to red if there's no selected options or has an value equal to empty or 0. I've tried to add class using jquery but it makes all select.select2 border turns red.
Style
<style>
.errorType {
border-color: #F00 !important;
}
</style>
HTML
<select name="category" class="form-control select2" id="category" onChange="search_Operator(this.value)">
<option value="0"> Select Operator Category</option>
<option value="1">one</option> <option value="2"> two</option>
</select>
<select name="operatorName" class="form-control select2" id="operatorName" onChange="">
<option value="0"> Select operator Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="regionName" class="form-control select2" id="regionName">
<option value="0"> Select region Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="type" class="form-control select2" id="type">
<option value="0"> Select type </option>
</select>
JQUERY
$(function () {
$(".select2").select2();
});
$(".select2-selection").addClass('errorType');
Any idea?
Thanks in advance.

I've attached a function to the click event of the submit button, in order to check the value of every select element on the page:
$(function () {
$('.form-control-select2').select2();
$('#submit_btn').on('click', function(){
var submit_form = true;
$(".form-control-select2").each(function(){
var selected_value = $(this).val();
if (selected_value==0 || selected_value=='') {
$(this).next().find('.select2-selection').addClass('errorType');
submit_form = false;
} else {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
return submit_form;
});
});
Fiddle here: https://jsfiddle.net/64a41thz/21/.
Also, if you want to remove the red border when valid selection is made, add the following code:
$('.form-control-select2').on('change', function(){
if ($(this).val()!=0 && $(this).val()!='') {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
Fiddle here: https://jsfiddle.net/64a41thz/24/.

This does the trick. You just need to replace #yourButton with the actual ID you use.
$(document).on("click", "#yourButton", function() {
$(".select2").each(function(index, element) {
$(element).removeClass("errorType");
if ($(element).val() === "0") {
$(element).addClass("errorType");
}
});
});

Put your select tag inside a form with an id="submit" as shown
<form class="" action="" method="post" id="submit">
and add a button below the 4 select tags with this attribute
onclick="return submit_form('form#submit')"
the button should be like this,
<button type="button" class="btn btn-default" onclick="return submit_form('form#submit')">Submit</button>
In your jquery
function submit_form (form_id) {
$(form_id).find('select[name]').each(function (index, node) {
if (node.value == 0) {
var id = "select#" + node.id;
$(id).addClass('errorType');
}
});
}
This will search select tag with name as attribute, if found, it will get the value of the name and check of its empty or not. If found empty it will add new class that turns that select tag into a red border.
Hope this will help

Set class from <select> if selected option contains ID='answer' in HTML/JavaScript (JQuery)

I am completely new to HTML and JQuery, and I can't figure out how I can set a class for my select element if the currently selected option has an ID="answer". I want to do this to check if the multiple choice question is correct.
If this is impossible to do this in JQuery, JavaScript would also be fine. I just want to prevent making a DataBase query and thought that JQuery would be the best route to take.
This is the current html section that I have:
<form id="ansForm" class="testClass1">
<div id="QuestionForm" name="QuestionForm">
<label>Question 1: This is a question </label>
<select class="form-control select-class">
<option value="1" class="ans-class" id="answer">Answer1</option>
<option value="2" class="ans-class">Answer2</option>
<option value="3" class="ans-class">Answer3</option>
<option value="4" class="ans-class">Answer4</option>
</select>
<label>Question 2: This is another question </label>
<select class="form-control select-class">
<option value="1" class="ans-class">Another Answer</option>
<option value="2" class="ans-class">Just some text</option>
<option value="3" class="ans-class" id="answer">Test</option>
<option value="4" class="ans-class">Test2</option>
</select>
</div>
<button type="button" class="btn btn-primary"
onclick="checkAnswers()">Check</button>
</form>
When I click the button it runs a Javascript function called: "checkAnswers()".
This function should check if the option that is selected in the dropdown box, has an id="answer". In this case, that would be if option one is selected. And if that option is selected, I want the background color of the select element to change.
How would I go about checking the currently selected dropdown options' ID? And how do I do this for more than 1 question at a time?
And how would I add a class programaticly in JavaScript to that select element so it can change BG color?
This is what I tried in JavaScript:
var s = document.getElementsByClassName("select-class");
var idSelectedOption = s[s.selectedIndex].id;
alert(idSelectedOption);
But that returns an error: "Uncaught TypeError: Cannot read property 'id' of undefined"
I think that is because it returns an array from all classes. How would I go about checking every single one of them? And changing the background colors of the ones that have the correct option selected?
Thanks in advance,
Mats.

Use data-* attributes instead of id as you should not have multiple elements having same id value in a document.
getElementsByClassName will return nodelist hence you need to iterate through elements and then apply conditions accordingly. Array.prototype.forEach.call is used in example below to iterate through elements.
Try this:
function checkAnswers() {
var s = document.getElementsByClassName("select-class");
Array.prototype.forEach.call(s, function(elem) {
var idSelectedOption = elem[elem.selectedIndex].getAttribute('data-id');
if (idSelectedOption == 'answer') {
var selectedAnswer = elem[elem.selectedIndex].getAttribute('value');
alert(selectedAnswer);
}
});
}
<form id="ansForm" class="testClass1">
<div id="QuestionForm" name="QuestionForm">
<label>Question 1: This is a question</label>
<select class="form-control select-class">
<option value="1" class="ans-class" data-id="answer">Answer1</option>
<option value="2" class="ans-class">Answer2</option>
<option value="3" class="ans-class">Answer3</option>
<option value="4" class="ans-class">Answer4</option>
</select>
<label>Question 2: This is another question</label>
<select class="form-control select-class">
<option value="1" class="ans-class">Another Answer</option>
<option value="2" class="ans-class">Just some text</option>
<option value="3" class="ans-class" data-id="answer">Test</option>
<option value="4" class="ans-class">Test2</option>
</select>
</div>
<button type="button" class="btn btn-primary" onclick="checkAnswers()">Check</button>
</form>
Fiddle here

You can't have two elements with the same id. Use a custom data attribute or a class instead
After fixing that, this code should to the trick. I tried to use vanilla JavaScript since you didn't indicate using jQuery.
// Lazy: Bind the event to the form.
document.getElementById('ansForm').addEventListener('change', function(event) {
var selectElement = event.target;
// Only respond if the clicked element is one of the selects.
if (selectElement.classList.contains('select-class')) {
// Get the option that is currently selected.
var selectedOption = selectElement[selectElement.selectedIndex];
// Check if this option contains the class 'answer'.
var isAnswerSelected = selectedOption.classList.contains('answer');
console.log(isAnswerSelected);
// Remove the indicators. You could easily use classList.toggle, but the second
// argument is not supported in IE.
// selectElement.classList.toggle('right', isAnswerSelected);
// selectElement.classList.toggle('wrong', !isAnswerSelected);
// So, second best. Just remove both and re-add the class we want.
selectElement.classList.remove('right');
selectElement.classList.remove('wrong');
selectElement.classList.add(isAnswerSelected?'right':'wrong');
} else {
// Ignore clicks on any other element.
}
});
.right {
color: green;
}
.wrong {
color: red;
}
<form id="ansForm" class="testClass1">
<div id="QuestionForm" name="QuestionForm">
<label>Question 1: This is a question </label>
<select class="form-control select-class">
<option value="1" class="ans-class answer">Answer1</option>
<option value="2" class="ans-class">Answer2</option>
<option value="3" class="ans-class">Answer3</option>
<option value="4" class="ans-class">Answer4</option>
</select>
<label>Question 2: This is another question </label>
<select class="form-control select-class">
<option value="1" class="ans-class">Another Answer</option>
<option value="2" class="ans-class">Just some text</option>
<option value="3" class="ans-class answer">Test</option>
<option value="4" class="ans-class">Test2</option>
</select>
</div>
<button type="button" class="btn btn-primary"
onclick="checkAnswers()">Check</button>
</form>

Try this for jQuery approach,
$(function(){
// This will bind 'click' event handler to element with id 'checkBtn'
$('#checkBtn').on('click', function(){
// This gets all selects element which has class containing 'select-class'.
var $selects = $('select.select-class');
// Iterate all the selects element.
$selects.each(function(k, v){
// Get the option for this current select element which has an id of 'answer'.
var $selectAnswerOpt = $(this).children('option#answer');
// Get the value attribute of the option element.
var answer = $selectAnswerOpt.attr('value');
// Get the selected value for the select element.
var selectedValue = $(this).val();
// Checking if the selected value for the select element is the option that has an id of 'answer'
if (selectedValue == answer)
{
// If the selected value has the id of 'answer'
$(this).css('background-color', 'green');
}
else
{
// Else
$(this).css('background-color', 'yellow');
}
});
});
});
And the FIDDLE

Display HTML while <option> is viable selection

I have something like the below:
<select name="blah">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit"/>
I want it such that the submit button only appears if the user has selected an option with value >= 1 So on page load it will not display the submit button because the currently selected option has no value, but the moment a user selects a valid option, the submit button appears.
Is this something that can be accomplished with JS/JQ?

If you don't want to display submit button when page loads then add below css
input[type=submit] {display:none;}
To show submit button on value changes try below js code
$(function(){
$('select').change(function(){
var value = parseInt($(this).val().replace(/[^0-9-]/,""),10)
if(value >= 1)
{
$('input[type=submit]').show();
}
});
});;
Working Demo

Try following code in java script
function isSelected() {
var value =document.getElementById("blah").selectedIndex;
if(value >='1'){
document.getElementById('btnSubmit').style.display='block';
}else{
document.getElementById('btnSubmit').style.display='none';
}
}
Your HTML
<select id="blah" onChange="isSelected();">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit" style="display:none" id="btnSubmit"/>

change this
<input type="submit" value="Submit"/>
to
<input type="button" value="Submit" id="submit"/>
in jQuery:
$(document).ready(function(){
$('#submit').click(function(){
if($('select[name="blah"]').val() > 1)
$('#yourform').submit();
else
alert('selected value > 1');
});
});
you form need to have an id for example, in my case yourform
DEMO