Set jquery mask on a dynamically inserted input? - javascript

Set jquery mask on a dynamically inserted input?
I'm trying to do it in the down format, but I'm not succeeding.
The new input loses the mask.
Can someone help me with this please.?
<div class="control">
<input type="text" name="item_valor" placeholder="Valor" class="input valor" maxlength="255" id="id_item_valor">
</div>
.
$(document).ready(function(){
$('.valor').mask("#.##0,00", {reverse: true});
});
.
$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
})

set the mask on focus of the input like this
$(document).on("focus", ".valor", function() {
$(this).mask("#.##0,00", {reverse: true});
});
you can probably remove it from document.ready function and also instead of cloning and appending in 2 lines you can shorten it to 1 line with this
$('.control:last').after($('.control:last').clone());
here is a working fiddle https://jsfiddle.net/tv7w3Lku/3/
Side note: cloning an element with ID will create multiple elements with same ID which is probably not the best way, you should just stick with class in this case

Just recall your mask function after each input is added to the DOM.
$(document).on('click', '#addItem', function () {
var newElement = $('.control:last').clone(true);
$('.control:last').after(newElement);
$('.valor').mask("#.##0,00", {reverse: true});
})

I was having this same problem, and discovered the .masked() function will apply the mask to a dynamic value. Hope this helps:
HTML:
<input name="phone" type="text">
<button>insert dynamic value</button>
JS:
$(function(){
$("input[name='phone']").mask("(000) 000-0000");
});
$("button").click(function(){
newPhoneNumber = "1231231234";
maskedValue = $("input[name='phone']").masked(newPhoneNumber));
$("input[name='phone']").val(maskedValue);
});
fiddle: https://jsfiddle.net/qcsf3z0j/4/
and docs: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#getting-a-masked-value-programmatically

Related

How can I edit a hidden input field with jquery and a textarea?

I am not sure if what I am trying to do is possible at all. Ok, so I have successfully created a "drop your images" feature for a site I am working on. This is how it looks (looks will improve).
Now, I have this textbox where I can edit the caption but I am trying to make it so that when I type the text I am able to edit parts of the hidden input box. For, example, the enter caption would edit the Caption part inside the hidden input box.
This is how it looks:
<input value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}">
This is the code I have used
<div class="addtextTopic">
<div class="leimage">
<img src="funnylookingcar.png">
<input class="tosend" value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}">
</div>
<textarea class="lecaptine" placeholder="Enter A Caption"></textarea>
</div>
$(document).ready(function() {
$(".addtextTopic .lecaptine").onchange(function() {
var $cap = $(this)
$(".tosend").val($cap);
});
});
Now, the code above doesn't work, and for some reason, I am beginning to think that if it works, it will replace the entire value, instead of the caption part.
Also, am I on the right direction? is this even possible?
Here's a possible solution.
http://jsfiddle.net/o2gxgz9r/3167/
$(document).ready(function() {
$(".addtextTopic .lecaptine").keyup(function() {
var metaDefault = '"meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"{{CAPTION}}","DateStamp":"","Privacy":""}';
var $cap = $(this).val();
$(".tosend").val(metaDefault.replace('{{CAPTION}}', $cap));
});
});
A few things wrong with your original code.
The change event will only fire when the textarea is blurred, not on keystroke. I changed this to keyup
I created a default string of metaDefault with a magic string of {{CAPTION}} so .replace() would know what to replace.
$cap needs to be the .val() of $(this).
First change your Onchange method to change method and copy value of .lecaptline to .tosend use $cap.val() please find below fiddle for more info
$(document).ready(function() {
$(".addtextTopic .lecaptine").change(function() {
debugger;
var $cap = $(this);
$(".tosend").val($cap.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addtextTopic">
<div class="leimage">
<img src="funnylookingcar.png">
<input class="tosend" value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}">
</div>
<textarea class="lecaptine" placeholder="Enter A Caption"></textarea>
</div>
how about change like this?
$('.addtextTopic .lecaptine').bind('input propertychange', function({
});

Change value of input with jquery under this class

jQuery:
$('.clickhere').click(function(e){
e.preventDefault();
$(this).closest('.row').children('.abc').hide(); // working
$(this).closest('.row').children('.abc').children('input').value = ''; // not working
$(this).closest('.bookingrow').children('.addressbox').children('input').value(''); // alternative - not working
});
html
<div class="row">
<div class='abc'>
<input type='text' class='unknown' />
</div>
<div class="clickhere">hide</div>
</div>
my target is if i click the "clickhere" class, content under "abc" class will hide and whatever content added by customer on those input box, they will be clear.
same html used multiple time on the same form. that's why using "$(this)".
any solution? what i am doing wrong?
Thanks in advance.
You need to use .val() to set the value, jQuery methods normally will return a jQuery object not a dom element reference so you would not have a properly called .value.
$(this).closest('.row').find('.abc input').val('');
So
$('.clickhere').click(function (e) {
e.preventDefault();
//cache the value of .row since it is used multiple times
var $row = $(this).closest('.row');
$row.children('.abc').hide(); // working
$row.find('.abc input').val('');
});

Run jquery plugin with javascript onclick method

I am using a Jquery plugin for my checkboxes the page of the plugin is this: http://fronteed.com/iCheck/#skin-line
The thing is I used a Javascript function for adding new checkboxes:
function add(){
var userInput = document.getElementById('reg').value;
document.getElementById('checklist').innerHTML = document.getElementById('checklist').innerHTML +
"<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>";
}
$(document).ready(function(){
$(' input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '-10%' // optional
});
});
my HTML where I'm executing the function looks like this:
<p><input type="button" onclick="add()" class="bttns" value="Add"/></p>
</div>
<h3>Added:</h3>
</div>
<div class="scrollpersonalizado">
<ul class="listacheck-radio" id="checklist">
</ul>
</div>
the problem is if I have checkboxes within the:
<ul class="listacheck-radio" id="checklist">
</ul>
when the page loads, they have the style of the plugin, but whenever I click the button and add a new checkbox, this one doesn't get the style of the plugin, and the ones that were there before stop working.
Can anybody please help?
Thanks in advance!
You will need to do two things:
Stop resetting the entire .innerHTML because that wipes out all objects in that sub-hierarchy and creates all new ones (losing all event handlers and styling).
Dynamically create your new elements and use on of the .append() methods and then call .iCheck() on them after creating in order to inherit the new functionality.
Code to do both of those using jQuery:
function add() {
var userInput = $("#reg").val();
$("<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>")
.appendTo("#checklist")
.find("input")
.iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '-10%' // optional
});
}
Conceptually, this is what this code does:
Get the reg value.
Create a new HTML fragment using the reg value
Append that to the end of the existing checklist
Find the new input tag in that new HTML fragment
Call .iCheck() on it to bless it with the desired behaviors/styles like the other ones.
try this:
$(document).ready(function(){
$('.scrollpersonalizado').on('click', 'input', function(){
var userInput = document.getElementById('reg').value;
$('#checklist').append("<li> <input type='checkbox'> <label>"+ userInput + "</label> </li>");
}).iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '-10%' // optional
});
});
remove the inline onclick handler from the button try unobtrusive this way with event delegation as you have created your inputs dynamically.

Transform input back into a div on button click

I am using the following code
$(document).on('click', '#editDetailBtn', function () {
var input = $('<input id="#detailprimaryDescription" type="text" />');
input.val($('#detailprimaryDescription').text());
$('#detailprimaryDescription').replaceWith(input);
$('#editDetailBtn').hide();
$('#detailPrimaryCancel').show();
$('#detailPrimarySave').show();
});
$(document).on('click', '#detailPrimaryCancel', function () {
var input = $('<div id="#detailprimaryDescription" ></div>');
//input.val($('#detailprimaryDescription').text());
$('#detailprimaryDescription').replaceWith(input);
$('#editDetailBtn').show();
$('#detailPrimaryCancel').hide();
$('#detailPrimarySave').hide();
});
what I am trying to achieve is to once cancel is clicked then it will turne the input field back into a div
http://jsfiddle.net/7XWAu/
I think this is what you're shooting for.
JS FIDDLE
you don't need to place '#' at the beginning of an id in the dom, its only used to reference elements.
so basically, every where you had something like:
var input = $('<input id="#detailprimaryDescription_input" type="text" />');
you shouuld be doing something like:
var input = $('<input id="detailprimaryDescription_input" type="text" />');
once I cleaned that up it worked as it does in the fiddle.
I do want to say, that it would be a muchhhhhhh better practice to just show and hide a div containing all those inputs rather than manipulating the DOM to create / destroy them constantly.

Get text inside the label with jQuery

From the following HTML, I want to get the text inside the <label></label> with jQuery but exclude the text inside the span in the label.
<label for="name">Name<span class="required">Required</span></label>
<input type="text" class="requiredField" name="name" />
I am trying following:
jQuery('.requiredField').each(function() {
var labelText = jQuery(this).prev().text();
}
It receives the text which is inside the span .required as well (ie. NameRequired), but I want to get only "Name". How can I exclude that? Thanks.
An efficient way:
Create an fn that you can call again and again, rather than having to do clone and remove every where:
jQuery.fn.onlyText = function() {
return this
.clone()
.children()
.remove()
.end()
.text();
};
// And then your code
jQuery('.requiredField').each(function() {
var labelText = jQuery(this).prev().onlyText();
});
http://jsfiddle.net/OMS_/x7xPB/
This should work:
jQuery('.requiredField').each(function() {
labelTextCopy = jQuery(this).prev().clone();
copyChild = labelTextCopy.children();
copyChild.remove();
console.log(labelTextCopy.text());
})​
JSFiddle: http://jsfiddle.net/5xRLg/5/

Categories