CODEWITHSUNDEEP
javascriptjqueryhtml
deccc
deccc

Reputation: 77

How to change values in realtime with jQuery or JavaScript?

Here is my code: http://jsfiddle.net/tqjuco4x/1/

Here is my last question : Get colorpicker values in html?

I dont want to update it in my last question as its new problem and new thing I want to add in my code so that's why I ask in new question, hope editors not mind it.

How I can get live value without click on Change Color button. I mean in my code I have to pick color and then click on Change Color button so is their any way to do it live, I mean I want to remove that button and when user pick color its update live ?

<button id="triggerImg">Change Color</button>

Is that possible in my code. hope you got my point. Sorry for poor English.
Thanks

Upvotes: 0

Views: 2991

Answers (4)

Veer Shrivastav
Veer Shrivastav

Reputation: 5496

You can use change on the text field. You can find the Docs jQuery docs here. And then change the CSS inside the callback function of change using jQuery css Read the docs for css here.

$( ".your-input-text" ).change(function() {
     //Change the CSS here.
     $( this ).css([
           color: $(this).val(), "background": "#fff"
     ]);
});

Upvotes: 2

Adrian
Adrian

Reputation: 8597

It's simple. Use the .change event.

$("#clr1").on("change", function(){
    console.log("Change color to: " + this.val());
});

Edit: You're actually using JSColor library for your colour picker. I recommend you clean it up a bit if you're not using the other one.

What you should do is the following:

Create a function to listen to font edit:

function updateFont(color, jso){
    var hexStr = jso.toHEXString();
    console.log(hexStr);
}

And Create a function for your background change if needed.

Then change the input elements from:

<input class="jscolor" name="color" id="clr1" value="ab2567">

To:

<input class="jscolor" id="clr1" onchange="updateFont(this.jscolor)" name="color" value="ab2567">

Here's a modified fiddle for you.

Upvotes: 3

Mandar Dhadve
Mandar Dhadve

Reputation: 381

Probably what you want to do is -

<input id="txt_Search" type="text" onchange="Call()" />
<script>
function Call()
{
   //your code
}

</script>

Or, using simple jQuery

$("#txt_Search").keyup( function() {
    var searchQuery = $("#txt_Search").val();
    //your code
});

Upvotes: 0

Jaapaap
Jaapaap

Reputation: 221

So i edited your jsfiddle

See jsfiddle

$(document).ready(function(){
$('#colorpicker').farbtastic('#color');

$('#clr1').change(function(){
let src = 'https:/test.com/IMGService.ashx?imagetype=typeit&amp;postid=7406&amp;width=100%&amp;height=142&amp;RenderText=[field title]&amp;TextSize=96&amp;TextColor=%23ff0000&amp;BgColor=%23' + $('#clr1').val().replace('#','');
$('#testImg').attr('src', src);
});

$('#clr2').change(function(){
let src = 'https:/test.com/IMGService.ashx?imagetype=typeit&amp;postid=7406&amp;width=100%&amp;height=142&amp;RenderText=[field title]&amp;TextSize=96&amp;TextColor=%23ff0000&amp;BgColor=%23' + $('#clr2').val().replace('#','');
$('#testImg').attr('src', src);
});
});

Upvotes: 1

Related Questions