How can i change the color of the text inside input box to different color. eg. text to green, red, purple etc.. I planned to use select box to store the different color and based on the selected color change the "text" color: but I am having hard time implementing into code. I am new to js, jquery any help will be greatly appreciated. Also what needs to be done to get the text with selected color to a table(do i save the color in databse?). I will be very thankful to get any help on this .
I made a small demo based on your requirements. You can read the comments in the code.
Something like this:
(function() {
function get(id) {
return document.getElementById(id); // Return the element given an id.
}
var selColors = get("selColors"); // Store the context of the selColors element.
var txtMyText = get("txtMyText"); // Store the context of the txtMyText element.
var myForm = get("myForm"); // Store the context of the myForm element.
var selectedColor = get("selectedColor");
// This is an object that has 2 properties: (color and value). These properties can hold in it string values.
var obj = {
color: "",
value: ""
};
// When you select an option.
selColors.onchange = function() {
if (this.value.length > 0) {
obj.color = this.value; // this.value contains the color that you have selected.
selectedColor.setAttribute("style", "background-color: " + obj.color);
txtMyText.setAttribute("style", "color: " + this.value); // With this you can set a style to the txtMyText textbox.
}
};
// When you submit the form.
myForm.onsubmit = function(e) {
obj.value = txtMyText.value;
console.log(obj); // Shows in the console the object with the current color and value of your textbox.
e.preventDefault();
};
})();
#myForm {
border: solid 1px #335a82;
}
#myForm fieldset {
border: solid 1px #a3c9d4;
}
#myForm fieldset div {
margin: 5px;
}
#myForm fieldset div label {
display: inline-block;
width: 120px;
}
#selectedColor {
display: inline-block;
padding: 10px;
width: 120px;
}
<form id="myForm">
<fieldset>
<legend>Configuration</legend>
<div>
<label>Colors:</label>
<select id="selColors">
<option value="">[Select a color]</option>
<option value="#5069b1">#5069b1</option>
<option value="#ff0000">#ff0000</option>
<option value="#841b72">#841b72</option>
</select>
</div>
<label>Selected color:</label>
<div id="selectedColor">
</div>
</fieldset>
<fieldset>
<legend>Preview</legend>
<div>
<label>Text:</label>
<input id="txtMyText" type="text" />
</div>
<div>
<button type="submit">Send</button>
</div>
</fieldset>
</form>
You could use js to select the class or id of the <input class=".." id="..">
Then you would be able to change the CSS attributes with js.
See the following example
<form method="post">
<input type="text" class="input1">
</form>
So your <input> class is input1. Using the following CSS code you could select a class by its name. See the example below
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
}
</script>
Now by adding a CSS atribute like color to the function you could change the existing or add a new CSS rule to your <input> field.
I think you could get pretty far with this example.
Let me know if it helps!
$('#myinput').css("color","#fdd");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="test" id="myinput">
You could try this also:
$('#myinput').css('color',$('#myinput').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="#04edee" id="myinput" onkeyup="$('#myinput').css('color',$('#myinput').val());">
jQuery option to show some fun stuff:
$(function() {
$('#myColors').on('change', function() {
var picked = $(this).val();
$('#currentcolor').css("background-color", picked);
$('#results').append("<div>" + $(this).find("option:selected").text() + "|" + picked + "</div>");
});
// verbose add on click of button
$('#addHot').on('click', function() {
var valHot = '#69b4ff';
var newName = "Hot Pink Triadic Blue";
//$('#myColors').append("<option value='"+valHot+" style='color:"+nameHot+"'>"+nameHot+"</option>");
var newOpt = $("<option></option>");
newOpt.css("color:" + valHot);
newOpt.prop("value", valHot);
newOpt.text(newName);
newOpt.appendTo('#myColors');
console.log(newOpt);
});
});
<div>
<select id="myColors">
<option value="red" style="color:red">Red</option>
<option value="green" style="color:green">Green</option>
<option value="cyan" style="color:cyan">Cyan</option>
<option value="#0080ff" style="color:#0080ff">Analogous Cyan</option>
</select>
<button id="addHot" type="button">
Add Hot Pink Triadic Blue
</button>
</div>
<div>
<div id="currentcolor">
current color is background
</div>
<div id="results">
Show stuff:
</div>
</div>
What you can do create class for every color like .green .purple and just remove and add classes
$(".input1").addClass("red").removeClass("green");
and you can also add remore these classes with selected box color change
Related
I have a form with input elements:
<form method="POST" action="User.do">
<div id="buddy-form-group">
<input type="text"
class="form-control form-input-field form-interests-input-field"
name="interests"
onchange="checkFilled()">
</div>
<br/><br/><button class="btn btn-success" type="submit">Send</button>
</form>
I have a scrip that takes all elements of class form-interests-input-field and checks if they are empty. If empty, it sets the color to red, else to green:
function checkFilled() {
var interests = document.getElementsByClassName("form-interests-input-field");
for (var i = 0; i<interests.length; i++) {
if (interests[i].value = "") {
interests[i].style.backgroundColor = "red";
}
else {
interests[i].style.backgroundColor = "green";
}
}
}
The problem is, the color of all fields gets changed to green if at least one field gets field. Once they are green, it never changes to red, even if I erase all the input. I suspect the script puts the green color property on class, rather than individual element. What is the best way to fix it?
Wanted to do this by using css. This worked for me.
input:not([value = ""]){
background-color: black;
color: white;
}
Something like the following should work:
<script>
function checkFilled() {
var interests = document.getElementsByClassName("form-interests-input-field");
for (var i = 0; i<interests.length; i++) {
if (interests[i].value == '') {
interests[i].style.backgroundColor = 'red';
} else {
interests[i].style.backgroundColor = 'green';
}
}
}
</script>
<form>
<div id="buddy-form-group">
<input type="text"
class="form-control form-input-field form-interests-input-field"
name="interests"
onkeyup="checkFilled()">
</div>
<br/><br/>
<button class="btn btn-success" onclick="checkFilled()" type="button">Send</button>
</form>
Changed the = to == in the if statement.
With the addition of the onkeyup and onclick fields, it does what you want. When you click the button, it checks the value of the input field and sets the background color accordingly. It also sets the input field's background color as you type.
I have the code below and i want every time someone enter/type text inside the input field, force the background of the div with class "target_bg" to change its color from red(default) to green.
<div class="target_bg"></div>
<input placeholder="Search for Restaurants..."
class="search_field" name="" type="text">
I searched a lot for a solution but i found only how to change the background of the input field itself.
if using jquery:
$('.search_field').on('input', function() {
$('.target-bg').css('background-color','green');
});
Here is a solution using plain javascript
var bgElement = document.querySelector('.target_bg');
var input = document.querySelector('.search_field');
input.oninput = function() { bgElement.style.background = 'green'; };
.target_bg {
width: 50px;
height: 50px;
background: red;
}
<div class="target_bg"></div>
<input placeholder="Search for Restaurants..." class="search_field" name="" type="text">
I need help about using append in jquery. Everytime I click button right btnRight the selected option value will add in the textarea so I used append to add the value in the textarea. It is already adding a value in the textarea but the value is "undefined,". can anyone help me why I am getting a value "undefined,"?
Sample HTML Code:
<textarea name="include_field_list" cols="70" rows="5" required="required" readonly="readonly" /></textarea>
<section class="container">
<div>
<select id="leftValues" size="5" multiple="multiple">
<option value="post_id">Post ID</option>
<option value="status">Status</option>
<option value="shipper_name">Shipper Name</option>
</select>
</div>
<div>
<input type="button" id="btnLeft" value="<<" />
<input type="button" id="btnRight" value=">>" />
</div>
<div>
<select id="rightValues" size="4" multiple>
</select>
<div>
<input type="text" id="txtRight" />
</div>
</div>
SELECT, INPUT[type="text"] {
width: 160px;
box-sizing: border-box;
}
SECTION {
padding: 8px;
background-color: #f0f0f0;
overflow: auto;
}
SECTION > DIV {
float: left;
padding: 4px;
}
SECTION > DIV + DIV {
width: 40px;
text-align: center;
}
</style>
JQUERY Code:
$("#btnLeft").click(function () {
var selectedItem = $("#rightValues option:selected");
$("#leftValues").append(selectedItem);
});
$("#btnRight").click(function () {
var selectedItem = $("#leftValues option:selected");
$("#rightValues").append(selectedItem);
/***********This code has a problem************/
$value = $( "#leftValues>option:selected" ).val();
$("textarea[name=include_field_list]").append($value + ',');
/***************/
});
$("#leftValues").change(function () {
var selectedItem = $("#rightValues option:selected");
$("#txtRight").val(selectedItem.text());
});
});
there is silly mistake take place...
when user click on button the right hand side not remain selected values.
because it's move on right side... you just need to change your direction.
$value = $( "#rightValues>option:selected" ).text();
SEE DEMO
there is an other problem if user deselect any item on right side. then this value not append in textarea.. the better way to handle this use each option in right side..
SEE THIS DEMO
Second, $(textarea).append(txt) doesn't work like you think.
Instead of .append() sth to <textarea> element simply use:
var $textarea = $("textarea[name=include_field_list]"),
$oldValue = textarea.val();
$textarea($oldValue + 'new value text')
In this jsFiddle You have working solution
You can try this code..
$("textarea[name=include_field_list]").val($value + ',');
if you are appending value after existing, then get that value and pass that value in parameter too,
You have to correct ^^^^ indicated code in your code.
$value = $( "#leftValues option:selected" ).val();
^^^^
$("textarea[name=include_field_list]").val($value + ',');
^^^^^
If you call val() on a multiple-choice select list, you get an array instead of a string. So you are actually trying to append a "," to an array. Try this:
$value = $( "#leftValues>option:selected" ).val();
$("textarea[name=include_field_list]").append($value.join( ", " ) + ',');
The JSFiddle of the fix (Without CSS): http://jsfiddle.net/hyoLedxw/
Input ids when called through JS doesn't work. What I need is to make changes to the input fields such as hide & show, set input property to "required" and remove property "required"
through ids called in JS when a radiobutton is clicked. I did put "div" referred from a source, edited some and come up with this. I have here my complete codes for my problem so I can deliver my problem understandably.
CSS & JS in the head:
<style type="text/css">
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=='red'){
$(".box").hide();
$(".red").show();
$('input[type="text"]').hide();
$('input[type="submit"]').hide();
}
if($(this).attr("value")=='rd1'){
var show1 = getElementById('showthis1');
var show2 = getElementById('showthis2');
$('input[type="text"]' + show1).show();
$('input[type="text"]' + show1).attr("required","required");
$('input[type="text"]' + show2).hide();
$('input[type="text"]' + show2).removeAttr("required");
$('input[type="submit"]').show();
}
if($(this).attr("value")=='rd2'){
var show1 = getElementById('showthis1');
var show2 = getElementById('showthis2');
$('input[type="text"]' + show1).hide();
$('input[type="text"]' + show1).removeAttr("required");
$('input[type="text"]' + show2).show();
$('input[type="text"]' + show2).attr("required","required");
$('input[type="submit"]').show();
}
});
});
</script>
for the body:
<from action="">
<label><input type="radio" name = 'selecthere' value="red"> red</label>
<label><input type="radio" name = 'selecthere' value="rd1"> rad1</label>
<label><input type="radio" name = 'selecthere' value="rd2"> rad2</label>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<input type="text" name="here1" id="showthis1" required/>
<input type="text" name="here2" id="showthis2" required/>
<input type="submit" id="showthis" value="Click"/>
</form>
Do I need to reconstruct this one? I really need help about this. Any help may add additional idea to me in the field of page development. Thanks in advance.
1.- You have to use document.getElementById
2.- To optimize code use switch
3.- As you are getting the elements by ID and then you pass them to JQuery, you simply can pass them use this:
$("#showthis1").hide();
$("#showthis1").removeAttr("required");
instead of
var show1 = document.getElementById('showthis1');
var show2 = document.getElementById('showthis2');
$('input[type="text"]' + show1).show();
$('input[type="text"]' + show1).attr("required","required");
JSFIDDLE DEMO
I have created a template html block with allow me to copy that block when I click on Add button. This is done via append()
How to change the value of name='category[]' input field after it has been appended?
For example:
$('#add').click(function() {
$('#LinesContainer').append($('#templatePlan').html());
var getCategory = $("#selectCategory").val();
// How to put getCategory value into category[] field?
});
Select Category and click on + button
<div>
<select id="selectCategory">
<option value="New">New</option>
<option value="Old">Old</option>
</select>
<input value="+" id="add" type="button"/>
</div>
Template Block
<div id="templatePlan" style="display:none;">
<div style='padding: 5px; border: 1px solid white; background-color: #FFA86F;'>
<select name="selectType[]">
<option>Consumer</option>
<option>Business</option>
</select>
<input name='category[]' type='hidden' value='' />
</div>
</div>
<div id="LinesContainer"> </div>
I am not sure if this is a neat way to implement it, is there alternative better way?
Just select it. I'd recommend to use .clone() for the template instead of innerHTML, that will make the selection easier. Otherwise you might have multiple category inputs and have to use that last one.
$('#add').click(function() {
$('#templatePlan').children('div').clone().appendTo('#LinesContainer')
.find('input name="category[]"').val($("#selectCategory").val());
});
//after
var getCategory = $("#selectCategory").val();
//To set the actual input
$('input[type="hidden"]').val(getCategory);
//or to update the attribute rather
$('input[type="hidden"]').attr('name', 'category[' + getCategory + ']');