I'm trying to loop through all elements that contain a certain data attribute and then replace/remove certain characters.
//replace chars put in by money mask since model is double
$("input[data-input-mask='money']").each(function() {
alert(this.value); // shows: $ 1,000
alert('test$ ,'.replace('$ ', '').replace(',', '')); //shows: test
this.value = this.value.replace('$ ', '').replace(',', '');
alert(this.value); //shows: $ 1,000
});
this.value is still the original value. What might I be doing wrong here?
Use .localeString()
UPDATE
After rereading the OP, I realize the opposite is desired. That's still easy. Instead of using a mask, use localString(). Then it's a matter of not using localestring() when you processing the values.
SNIPPET
$("input[data-input-mask='money']").each(function() {
var cash = parseFloat(this.value);
var green = cash.toLocaleString('en-EN', { style: 'currency', currency: 'USD' });
alert(green);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-input-mask='money' value="623.23">
<input data-input-mask='money' value="20199">
<input data-input-mask='money' value="">
You can loop through each element and replace it like this.
<script>
$(document).ready(function(e) {
//Retrieve all text of amount di;
$.each( $('.amount'), function(){
var unique_id = $(this).text();
//check if any price is match to FREE THEN replace it with NOT FREE
if(unique_id=='FREE'){
$(this).text("NOT FREE");
}
});
});
</script>
Related
I'm trying to make an input for coordinate.
I use this script to add comma. But, it is adding comma every two char. I want it only add comma before the last two char.
$('.isCoor').on('keyup', function(){
$(this).val(function(index, value) {
var val_koor = value.replace(/\D/g, "").replace(/\B(?=(\d{2})+(?!\d))/g, ",")
return val_koor;
});
});
You can add a simple logic instead of using regular expression like this:
$('.isCoor').on('keyup', function(){
$(this).val(function(index, value) {
var val_koor = value;
if(value.length > 2){
value = value.replace(/,/g,'');
val_koor = value.substr(0,value.length-2)+ ',' + value.substr(value.length-2, value.length);
}
return val_koor;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='isCoor' type='text' />
I am pulling some text from a database and I have , and I would like to replace them with <br> don't really know why it's not working any ideas?
JS Code
$( document ).ready(function() {
//.MoreInfoText
var $infotext = $('.MoreInfoText').text().replace(/\+/g, '<br>');
$.each($infotext, function() {
$('.MoreInfoText').text($infotext);
});
});
Text as its coming from the DB:
Ryan open 30/01/1998, ryan added numberOFIteams of NameOFIteams
1st use replace(/\,/g, '<br>')); yours only replace +
(note the g means replace all, you can also make the search case-insensitive pass the "i" parameter ex: /gi)
2nd use $('.MoreInfoText').html() so your <br> are treated as HTML instead of string.
$( document ).ready(function() {
//.MoreInfoText
$('.MoreInfoText').html($('.MoreInfoText').text().replace(/\,/g, '<br>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="MoreInfoText">11111,22222,33333,44444,55555</span>
It should be .replace(/,/g,"<br>") so all ,s get replaced with <br>. Right now it's replacing + with <br>.
Also to iterate over every element with class MoreInfoText replacing , with <br> modify your code like this:
$('.MoreInfoText').each(function() {
var text = $(this).text().replace(/,/g, '<br>')
$(this).html(text);
});
Try to use the following code:
$( document ).ready(function() {
//.MoreInfoText
var $infotext = $('.MoreInfoText').text().replace(',', ' ');
$.each($infotext, function() {
$('.MoreInfoText').text($infotext);
});
});
I would recommend avoiding the usage of <br /> for adding line breaks, you may consider using <p> instead.
$( document ).ready(function() {
//.MoreInfoText
$('.MoreInfoText').each(function() {
var moreArray = $(this).text().split(',');
var $infotext = '';
for(var i = 0; i < moreArray.length; i++){
$infotext += '<p>' + moreArray[i] + '</p>';
}
$(this).empty().html($infotext);
});
});
If paragraphs are not already placed each on a new line, you can add a CSS rule for that. This helps separating the content from the presentation, which is what CSS is for.
On keypress in a textarea, I need to select the id and separate it. How is this possible?
If I have some jQuery code:
$(document).on("keypress", "textarea", function(){$(this).
How can I get the textarea's id and separate it like if the id is id="ta1"
Assuming you are just interested in the numeric value part of the ID, you could easily strip off all non-numeric characters using a Regular Expression using the replace() function :
$('textarea').keypress(function(){
// Get your ID
var id = $(this).attr('id');
// Strip off any non-numeric values
var idNumber = id.replace(/\D+/g, '');
});
Working Example
$('textarea').keypress(function() {
// Get your ID
var id = $(this).attr('id');
// Strip off any non-numeric values
var idNumber = id.replace(/\D+/g, '');
alert('<textarea> #' + idNumber + ' was typed in');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>Text Area 1</pre>
<textarea id='ta1'></textarea>
<hr />
<pre>Text Area 2</pre>
<textarea id='ta2'></textarea>
<hr />
<pre>Text Area 3</pre>
<textarea id='ta3'></textarea>
try this
$('body').on('keypress','textarea',function(){
var id = $(this).attr('id')
var ta = id.substring(0,2);
var num = id.substring(2);
});
I'm working on this survey form, and I'm trying to code a comment area that has a character limit of 500. From what I've seen, I'm doing everything "right", but clearly I must be overlooking something.
Here is my jsFiddle.
HTML
<span class="char-remain">500 Characters remaining</span>
<textarea class="comment" rows="10" cols="50" maxlength="500">Enter Text Here</textarea>
jQuery
comment = $(".comment");
comment.on("keyup change", function(){
charCount = $(this).text().length;
charRemain = 500 - charCount;
$(this).prev("span").text("(" + charRemain + ")");
alert(charRemain + "Characters Remaining");
});
The alert is there really for me to see if it's working or triggering at all, which it isn't. What am I missing?
You have an error in the first line.
$(document).ready(function {
Only change to:
$(document).ready(function() {
As you're trying to get the length of the comment field, you need to use the .val() function. It's an equivalent to .value in plain JavaScript.
However, you can optimize your code by using the next:
var maxlength = parseInt(comment.attr("maxlength"), 10);
The code above will store the comment's field maxlength. So you might try with:
$(document).ready(function() {
var comment = $(".comment");
var maxlength = parseInt(comment.attr("maxlength"), 10);
comment.on("keyup keypress change", function() {
charCount = $(this).val().length;
charRemain = maxlength - charCount;
//$(this).prev().prev("span").text(charRemain + " Characters remaining");
$(".char-remain").text(charRemain + " Characters remaining");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="char-remain">500 Characters remaining</span>
<br />
<textarea class="comment" rows="10" cols="50" maxlength="500">Enter Text Here</textarea>
As suggested #TiesonT. in the comments, you could easily get the span content by using:
$(".char-remain").text(charRemain + " Characters remaining");
In this context you don't need to worry about tags between the comment field and the span content.
Updated:
You might bind with the keypress event to get the current length while the user is pressing a key.
comment.on("keyup keypress change", function() {
You made two errors here.
Your document ready did not have the right syntax secondly, getting the value from a text area is not text() but it is val().
$(document).ready(function() {
comment = $(".comment");
comment.on("keyup change", function() {
charCount = $(this).val().length;
charRemain = 500 - charCount;
$(this).prev("span").text("(" + charRemain + ")");
alert(charRemain + "Characters Remaining");
});
});
how can concatenate the set variable in a for loop to be use as name in an input to get the value?
<script>
var k=0;
var counter = 50;
for(k=0; k<=counter; k++){
var choices = $('input[name=choices'+ k]).val();
var choices = choices.replace(/\ /g, '%');
var choices_ = choices_ +";"+ choices;
}
alert(choices);
</script>
there are multiple input field namely choices1,choices2 and so on.
how can i get the value of those fields using for loop?
how can i concatenate the name choices and the variable k?
can you help me solve this problem??
You could always just iterate using a specialized attribute selector and .each():
var choices = $('input[name^="choices"]'), // name starts with "choices"
choices_val = [] // an array!
;
choices.each(function () {
choices_val.push($(this).val().replace(/\ /g, '%'));
});
alert(choices_val.join(';'));
It saves you the overhead (and headache) of having to pick out and mangle a specific attribute value (choices1, choices2, etc) and having to select it out via selector ('cause I'd think that selecting via $(this) is faster than $('input[name="choices1"]')).
You're declaring choices three times, which is invalid and will lead to many errors.
You use each in jQuery, it's identical as for loop.
Say for example you have this HTML:
<input type ="text" name="field1" value="Alpha" />
<input type ="text" name="field2" value="Bravo" />
<input type ="text" name="field3" value="Charlie" />
And here is the js file:
var k = 1;
$('input').each(function(e) {
alert('choices' + k + '=' + $(this).val());
k++;
});
Demo here. Hope it helps.
$('input[name=choices'+ k +']').val();
you just forget to put another + sign and single quote.
I think you missed 2 quotes and a +.
$('input[name=choices' + k + ']').val();
add quotes
var choices = $('input[name=choices'+ k + ']').val();
use css selector
$(".className").each(function(){
$(this).myFunction();
})
jQuery.fn.myFunction = function()
var choices = $(this).val();
var choices = choices.replace(/\ /g, '%');
var choices_ = choices_ +";"+ choices;
}