I am trying to dynamically change a HTML input to a textarea field and convert it back to a text field. I can do that properly using the code given below but I am unable to copy over the events that happen on the text field. Is there a way I could copy over the events from the text field over to the textarea? If there is a better way to do this, kindly let me know.
JsFiddle
HTML:
<input id="textbox" type="text" name="fieldValue_0_3" onchange="alert('Hello WOrld');" value="this is a birthdate" tabindex="73">
Change
Change To TextField
Cheers.
Do it this way
var textbox = $("#textbox"); $("#change").click(function () {
$input = $("#textbox")
$textarea = $("<textarea id='textarea'></textarea>").attr({
id: $input.prop('id'),
name: $input.prop('name'),
value: $input.val(),
onchange: $input.attr('onchange'),
tabIndex: $input.prop('tabIndex')
});
$input.after($textarea).remove(); }); $("#changetext").click(function () {
$textarea = $("#textbox")
$input = $("<input></input>").attr({
id: $textarea.prop('id'),
name: $textarea.prop('name'),
value: $textarea.val(),
onchange: $textarea.attr('onchange'),
tabIndex: $textarea.prop('tabIndex')
});
$textarea.after($input).remove(); });
Fiddle: Demo
Note: Its always better to take two different controls
Related
I found here on Stackoverflow similar topics but not the same.
I am using jquery Minicolors on my project: https://github.com/claviska/jquery-miniColors/
Everything work fine, but I need to do easy thing - I need to get actual color value and write it to the HTML document. So for example I need to do this:
<p><script>document.write(actualColor);</script></p>
Simply just write the actual color code anywhere in static HTML. I am very bad in JS and I didnt find some working solution.
My minicolors code look like this:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
});
});
});
</script>
And I use just this input for picking color:
<input type="text" id="inline" class="color-picker-1" data-inline="true" value="#4fc8db">
What can I do? I guess solution is very easy.
On change of the color, re-assign the value to the input element so that it contains new value. Then you can use that value. If you want, you can create another hidden input element to store the color values as well.
'change' event gets triggered when color value is changed. This is where all DOM manipulation should go into.
$("#inline").minicolors({
change: function(hex, opacity) {
$("#inline").val(hex);
}
});
On your code:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
change: function(hex, opacity) {
$(this).val(hex);
}
});
});
});
</script>
I am listening to changes in the chosen-generated input element. Somehow when I trigger chosen:updated, the text in the input element wont' render.
A simple demo:
<div style="width: 400px" class="parent row">
<div class="col-lg-12">
<select multiple="multiple" class="tags"></select>
</div>
</div>
javascript:
$(".tags").chosen({
width: '50%',
});
var select = $(".tags");
var input = $(".parent input");
input.on('input', function() {
var option = $("<option value='bob'>bob</option>");
select.append(option);
// Below causes input to stop rendering text in input element
select.trigger('chosen:updated');
});
Here is jsfiddle demo. I might not be doing this correctly. What I am trying to accomplish is grab the current text after some edit in the input box, send that to server for processing, then render the result as an option in chosen.
How can I do this with chosen? The above method works, just that the text isn't being rendered after a user types something.
You can have the user type something and have it added to the list of select-options when the user presses enter. So like:
$(".tags").chosen({ width: '50%',
});
var select = $(".tags");
var input = $(".parent input");
input.keydown(function(e) {
if(e.keyCode == 13){
var option = $("<option></option>").html(input.val());
select.append(option);
select.trigger('chosen:updated');
}
});
Here is a fiddle with the result.
I moved to using selectize instead. It even supports bootstrap!
I have something very simple to just get an input value.
The code looks like this:
var $a = $('.custom-amount').val();
$('.custom-amount').on('change', function() {
alert($a)
})
And my input:
<div class='custom-amount'>
<input placeholder='Custom Amount' type='text-area'>
For some reason, my alerts are empty. Does anyone see whats going wrong?
Change your selector to $('.custom-amount input'), and get the value after the change event is fired, e.g.
$('.custom-amount input').on('change', function() {
var a = $(this).val();
alert(a);
});
Right now, you are trying to get the value of a div, which won't work. You need to get the value of the input.
Edit: also, it looks like you are trying to display a textarea. Try replacing this...
<input placeholder='Custom Amount' type='text-area'>
With this...
<textarea placeholder='Custom Amount'></textarea>
This may help:
http://jsfiddle.net/d648wxry/
The issue is very simple, you are getting the value of the div element. Instead you should retrieve the value of the input element so the 'custom-amount' class must be added to the input.
Also you need to execute the val() method inside the event to get the value updated.
var $a = $('.custom-amount');
$('.custom-amount').on('change', function() {
alert($a.val());
});
Cause your div has no value. Change your code to:
var $input = $('.custom-amount input');
$input.on('change', function() {
var $a = $input.val();
alert($a)
})
First of all, you only assign to $a outside of the change function. This would be more clear if you kept your code lined up better (see the edit I made to your post). This is the right way to do it:
$('.custom-amount').on('change', function() {
var $a = $('.custom-amount').val();
alert($a)
});
Second of all, the class custom-amount is assigned to a <div> instead of the <input> element. You have to select the <input> element, not the <div>. Change your markup to:
<div>
<input placeholder='Custom Amount' type='text-area' class='custom-amount'>
</div>
I have MULTIPLE divs, where each div consists of text followed by a dropdown followed by a textfield, like so:
<div>
Punch <select>
<option>Hawaiin Punch</option>
<option>Vodka</option>
<select/>
<input type="text" id="textfield_2"></input>
</div>
My complete example is here: http://jsfiddle.net/HsF2Y/3/
Do the following:
Type "lemons, " into the textfield.
Select "Vodka" from the dropdown; it gets appended to "lemons". Type ", " after it.
Select
"Vodka" again; the text remains the same.
I want to listen for an event other than "change" so that step 3 causes "Vodka" to be appended again. So after all 3 steps, my textfield should show the text: "lemons, Vodka, Vodka". Can somebody correct the code in the fiddle please? Thanks.
Have you tried with click instead of change?
If you add a blank option to each select can do something like this:
$("select.choices").change(function () {
if (this.value) {
$(this).next().trigger('doUpdate', [this.value]);
/* reset after selections updated*/
this.value = "";
}
});
$('.selections').each(function () { /* loop each so data array unique*/
$(this).data('selections', []).on('doUpdate', function (evt, newVal) {
var data = $(this).data('selections')
data.push(newVal)
this.value= data.join();
}).change(function(){
/* for manually added store new array*/
var arr= $.trim(this.value).split(',');
$(this).data('selections',arr)
});
});
DEMO
I have a textarea in each row of my table. I need to set this textarea to the value of a hidden field associated with it.
The names of the textarea and hidden field look like so:
Textarea name:
sc-(Account Name)c
Hidden fields name:
sc-(Account Name)h
An example would be:
Textarea:
sc-usernamec
Hidden field:
sc-usernameh
On submit or while they type the text, I need the hidden field to be updating with what is typed in the textarea. I'm fairly new to jQuery and Javascript, and I'm wondering how I can either a) go through each textarea field setting its content in the associated hidden field or b) set the hidden field to the textarea as they type.
I'm not sure which option I should use, nor how I would go about programming something of this nature.
If the textarea in question is a normal textarea then you can try
$(function() {
$(":hidden[name^='sc']").each(function() { // all hidden starting with sc
var id = this.id.substring(0,this.id.length-1)+"c";
var hid = $(this);
$("#"+id).on("keyup",function() {
hid.val($(this).val());
});
});
});
Live Demo
All bets are of course off if the textarea is converted to an editor - then you need to read
jQuery and TinyMCE: textarea value doesn't submit
which means
$(function() {
$("#myForm").on("submit",function() {
$('#sc_texth').val(tinyMCE.get('sc_textc').getContent());
});
});
or for more
$(function() {
$("#myForm").on("submit",function() {
$(":hidden[name^='sc']").each(function() { // hidden and starts with sc
var textareaID = this.id.substring(0,this.id.length-1)+"c";
$(this).val(tinyMCE.get(textareaID).getContent());
});
});
Live Demo
I think this may help you.
<p><textarea name="sc-username" id="sc-username" ></textarea></p>
<p><textarea name="sc-usernameh" id="sc-usernameh" style="display:none;"></textarea></p>
$(document).ready(function(){
$("textarea").on("keyup",function() {
var name = $("#"+$(this).attr('name')+"h");
if(name)
name.val($(this).val());
});
});