I am trying to make it possible to change the background color of pull quotes by using the input type="color" tag in a form.
my HTML is as follows
<form action="change.php" method="post">
name: <input type="text"><br/>
email: <input type="email" id="email"><br/>
<label for="background-color">Choose a color for background :</label>
color: <input type="color" name="bgcolor"><br/>
<input type="submit" name="submit" value="Submit">
</form>
You see I was trying to do it in PHP by getting the color value from a POST , but I would reay like to solve this question in Jquery if possible.
You can achieve this with something like the following. You need an id attribute for you input. Then on blur event you will change the div background color with the input value if it is valid.
Also, you have to include jQuery in html <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
JSFIDDLE
HTML:
<input type="text" name="bgcolor" id="bgcolor" maxlength="6" placeholder="Hex representation of the color">
JQuery:
$(document).ready(function() {
$('#bgcolor').on('change', function() {
var color = $(this).val();
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#'+color)
if (isOk) { //If input is a valid representation of a color
$('#your_div_id').css('background-color', '#'+color);
}
});
});
isOk regex from here.
Or using type="color":
HTML:
<input type="color" name="bgcolor" id="bgcolor" value="">
JQuery:
$(document).ready(function() {
$('#bgcolor').on('change', function() {
var color = $(this).val();
$('#your_div_id').css('background-color', color);
});
});
UPDATE:
Move the following inside $(document).ready(function () { like this:
$(document).ready(function () {
$('span.pq').each(function () {
var quote = $(this).clone();
quote.removeClass('pq');
quote.addClass('pullquote');
$(this).before(quote);
}); //end each
$('#note').draggable();
$('#bgcolor1').on('change', function () {
var color = $(this).val();
$('#id1').css('background-color', color);
});
$('#bgcolor2').on('change', function () {
var color = $(this).val();
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#' + color)
if (isOk) { //If input is a valid representation of a color
$('#id1').css('background-color', '#' + color);
}
});
});
Related
I have the following hidden input in a form tag:
<input type="hidden" id="myID" name="pn" value="">
On change, if the value of this input is "abcd", then do something. But I can´t make it work.
This is my script:
$("#myID").change(function () {
var myVAR = $("#myID").val();
if (myVAR == "abcd") {
// my code here
}
});
Can someone help pls?
Thanks much.
Because the input is hidden, when you change the value, you need to trigger the change: $("#myID").val('abcd').trigger('change');
$("#myID").change(function () {
if ($(this).val() == "abcd") {
alert("Found 'abcd'");
}
});
$(document).on('click', 'button', function() {
$("#myID").val('abcd').trigger('change');
alert($("#myID").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="myID" name="pn" value="">
<button>Set abcd for myID</button>
Is there a way to display a forms preset value in a div while also displaying the users new input?
The last one I got to work with this code:
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' value="Kees" class='chatinput' id='chatinput'>
JS :
var inputBox = document.getElementById('chatinput');
inputBox.onkeyup = function(){
document.getElementById('printchatbox').innerHTML = inputBox.value;
}
But for some forms the value is already set and I need them to be displayed aswell.
Thanks in advance!
But for some forms the value is already set and I need them to be displayed aswel
You should add :
document.getElementById('printchatbox').innerHTML = inputBox.value;
Before onkeyup event.
var inputBox = document.getElementById('chatinput');
document.getElementById('printchatbox').innerHTML = inputBox.value;
inputBox.onkeyup = function(){
document.getElementById('printchatbox').innerHTML = inputBox.value;
}
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' value="Kees" class='chatinput' id='chatinput'>
Hope this helps.
You can do it like following. Just add document.getElementById('printchatbox').innerHTML = inputBox.value this line directly in script tag.
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' value="Kees" class='chatinput' id='chatinput'>
<script>
var inputBox = document.getElementById('chatinput');
inputBox.onkeyup = function () {
document.getElementById('printchatbox').innerHTML = inputBox.value;
}
document.getElementById('printchatbox').innerHTML = inputBox.value;
</script>
Firstly use jQuery because you should.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
The HTML
<input type="text" name="my_input" id="my_input" value="">
<div id="current_value">
<!-- We'll put the value here -->
</div>
The JavaScript
<script type="text/javascript">
// Check current set value and update div HTML
$( document ).ready( function() {
$('#current_value').html($('#my_input').val());
});
// On change, update the div HTML
$( document ).on('keyup', '#my_input', function() {
$('#current_value').html($(this).val());
});
</script>
That should do it for you - here's the codepen: http://codepen.io/anon/pen/yeVQVe
I'm trying to remove input's val when clicking a button that appear when focusing on input.
This is my html:
<div class="search-area">
<form action="#" id="ingredientSearchForm">
<input type="text" placeholder="Arama" id="ingredientsSearch"/>
<span class="clearable"></span>
<span></span>
<input id="ingredientSearchSubmit" type="submit" class="hidden" placeholder="Arama"/>
</form>
</div>
And this is javascript function:
var searchinput = $(".search-area").find("input");
searchinput.focus(function(){
$(this).data('placeholder',$(this).attr('placeholder'));
$(this).attr('placeholder','');
$(this).siblings(".clearable").show();
});
$(".search-area").find(".clearable").on("click", function() {
$(this).val('');
});
searchinput.blur(function(){
$(this).attr('placeholder',$(this).data('placeholder'));
$(this).siblings(".clearable").hide();
});
.clearable is a span with background. Normally it is display:none.
I think you're wanting to clear searchinput on clicking .clearable?
If so, you should instead use:
$(".search-area").find(".clearable").on("click", function() {
searchinput.val('');
});
if you want to remove value of span then:
$(".search-area").find(".clearable").on("click", function() {
$(this).text('');
});
if you are trying to remove textbox value then:
$(".search-area").on("click",".clearable", function() {
$(this).closest("#ingredientSearchForm").find('#ingredientsSearch').val('');
});
Basically just trying to add text to an input field that already contains a value.. the trigger being a button..
Before we click button, form field would look like.. (user inputted some data)
[This is some text]
(Button)
After clicking button, field would look like.. (we add after clicking to the current value)
[This is some text after clicking]
(Button)
Trying to accomplish using javascript only..
Example for you to work from
HTML:
<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />
jQuery:
<script type="text/javascript">
$(function () {
$('#button').on('click', function () {
var text = $('#text');
text.val(text.val() + ' after clicking');
});
});
<script>
Javascript
<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
var text = document.getElementById('text');
text.value += ' after clicking';
});
</script>
Working jQuery example: http://jsfiddle.net/geMtZ/
this will do it with just javascript - you can also put the function in a .js file and call it with onclick
//button
<div onclick="
document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>
Here it is:
http://jsfiddle.net/tQyvp/
Here's the code if you don't like going to jsfiddle:
html
<input id="myinputfield" value="This is some text" type="button">
Javascript:
$('body').on('click', '#myinputfield', function(){
var textField = $('#myinputfield');
textField.val(textField.val()+' after clicking')
});
HTML
<form>
<input id="myinputfield" value="This is some text">
<br>
<button onclick="text()">Click me!</button>
</form>
Javascript
const myinputfield = document.querySelector("#myinputfield");
function text() {
myinputfield.value = myinputfield.value + "after clicking";
}
I know this question is almost ten years old but this answer does not use jquery so it may be useful to others.
https://codepen.io/frog22222/full/oNdPdVB
In the below code how to validate for null values for only the dynamically added text box i.e,r_score1,r_score2.........
<script>
function validate()
{
//How to validate the r_Score.. textfields
}
$(document).ready(function() {
for(var i=0;i< sen.length;i++)
{
row += '<input type="text" name="r_score'+i+'" id="r_score'+r_count+'" size="8" />';
}
$('#details').append(row);
});
</script>
<div id="details"><input type="text" name="score' id="score" size="8" /></div>
<input type="button" value="Save" id="print" onclick="javascript:validate();" />
Give the text boxes a class name and use class selector
function validate()
{
var boxes = $("#details input:text.classname");
boxes.each(function(){
var currentVal = $(this).val();
// do your validation here
});
}
$("#details input[name^='r_score']").each(function(nr){
if($(this).val() === "") alert("Field "+(nr+1)+" is empty");
});
Use live event handler for dynamically added content.