How to create an input type number using this format?
Example :
when I start writing this number 1000, it should be generated to 1'000.
Example 2: 10000 to 10'000
I think this is it.
$(document).ready(function(){
$('#num').keyup(function(){
var numbers = $(this).val().replace("'","");
var newNum = "";
var digitCount = 0;
for(var i = numbers.length-1; i>=0; i--){
if(digitCount==3){
newNum+="'";
digitCount=0;
}
newNum += numbers.charAt(i);
if($.isNumeric(numbers.charAt(i)))
digitCount++;
}
$(this).val(newNum.split("").reverse().join(""));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<input type="text" id="num">
i'm using this plugin to make the number field auto masking. Very easy to use. Try this one. Give feedback if you can't implement it.
Jquery number masking plugin repository
Examaple usage. After download plugin file, add this code into your js section code.
$('selector_element_to_mask').number(true, 0);
Try this It will surly help you:
var num = 1000000;
console.log(formatNumber(num))
function formatNumber (num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1'")
}
DEMO with textfield
http://jsfiddle.net/65y2bbrm/1/
I think you are looking for input masking posting a similar question though a bit different but I am sure it will point you in the right direction.
javascript or jquery Input text number only and auto masking
Related
I have a form with a table which has 5 rows and 8 columns. This table represents the available seats in a concert hall. After the submit button is clicked, a javascript function is called, which at the moment is this:
<script>
function submit_tickets(form){
var count=0;
var booked_seats=new Array();
var c = document.getElementById(form).getElementsByTagName('input');
for (var i = 0; i < c.length; i++) {
if (c[i].type == 'checkbox' && c[i].checked==true){
booked_seats[count]=c[i].id;
count++;
//create an array with the booked seats' ID
}
}
//alert(booked_seats.length);
} </script>
When this function is called, I want at the same time the table of the localhost database to be updated (a table which contains all the 40 seatIDs) depending on the seats that were booked.
How can I do this, can you help me?
if you'd like to i can write example in native javascript, but for now i'll try to do it using jQUery.
function submit_tickets(form){
var seats=[];
$(form).find("input:checked").each(function(){
seats.push($(this).val());//i hope you do have a value for your input tags, and if not, then push $(this).attr('id') - but highly recommend you to follow w3c
});
$.post("your/url/to/server",{seats:seats},function(data){
console.log(data);//some info from server
})
}
I believe you need to call a php file using PHP, in which the database update is done. You might consider using jquery ajax, as in http://api.jquery.com/jQuery.ajax/
I have a form that I'm trying to automatically enforce decimals in some of the input fields. Basically I would like for the users to not worry about format, but simply have the fields format themselves onBlur.
Here are a few examples of what I'm hoping to achieve:
1.) If a user enters "0.95" nothing is done, because this is the ultimate format I'm going for in the end.
2.) If a user enters ".95" I would like for the field onBlur to change to the above format "0.95". (likewise if they enter ".9" etc)
I have been scouring around on the internet all night long looking for a solution, so this is my last resort! Any help and feedback I can get would be more than appreciated!
Thank you!
Something like this would do it:
document.getElementById('amount').onblur = function() {
if(this.value && !isNaN(this.value)) {
this.value = parseFloat(this.value).toFixed(2);
} else {
this.value = 0;
}
};
jsFiddle
This is nice and concise:
function blurFormatDecimal (e) {
var val = isFinite(this.value) ? +this.value : 0;
this.value = val.toFixed(2);
}
myInput.onblur = blurFormatDecimal;
Use isFinite() instead of !isNaN() because isNaN("Infinity") returns false, but you certainly don't want to accept "Infinity" as valid input.
http://jsfiddle.net/gilly3/NjeQD/
If you need to do this with PHP try:
$formattedAmount = sprintf("%05.2f",$amount);
Here is the php solution:
$formattedAmount = sprintf("%01.2f",$amount);
Okay, so I have my div tag here and its css style 'background' is set to default.
For example
<div id="slideimage" style="background:url(01.jpg);width:xxpx;height:xxpx;"></div>
And I have my next button
Next
So I want to happen when I clicked on the Next button, the background style of #slideimage will change into 02.jpg. I tried searching with google but it seems it's not functioning properly.
That's all. Thanks in advance.
jsBin demo
var images = [
'01.jpg',
'02.jpg',
'03.jpg'
];
var iN = images.length;
var i = 0;
function changeImage(){
$('#slideimage').css({background: 'url('+images[++i % iN]+')'});
}
$('#next').click( changeImage );
Create an array of images, a var 'index counter' (i) and get the number of images in array (iN)
than you can easily toggle your images doing this math using Modulo: ++i % iN
Did you try this javascript:
function nextImage() {
$('#slideimage').css("background", "url(02.jpg)");
}
Here is a slightly more robust demo: http://jsfiddle.net/gQQBL/
See this form - http://schnell.dreamhosters.com/form.php
This form has a portion of it where you enter data and can choose to add more of the same data by clicking a button called 'Add A Site' and it will make another of that section to enter another site. This is the jQuery that performs the duplication...
$(function () {
var sites = 1;
var siteform = $("#site1").html();
$(".addsites").live("click", function(e) {
e.preventDefault();
sites++;
$("#events").append("<div id='site" + sites + "'>"
+ "<br /><hr><br />"
+ siteform
+ "<center><button class='removesites' title='site"
+ sites + "'>Remove This Site</button><br />"
+ "<button class='addsites'>Add Another Site</button>"
+ "</center></div>");
});
$(".removesites").live("click", function(e) {
e.preventDefault();
var id = $(this).attr("title");
$("#" + id).remove();
});
});
The duplication works perfectly, but one thing that's bugging me is that when I have to enter data for someone claiming a LOT of sites, it gets very annoying having to repeat same or similar parts of this section of the form (like every site is in the same city, on the same day, by the same person, etc.) So I had the idea that with each duplication, the values of the form elements would also carry over and I just edit what's not the same. The current implementation only duplicates the elements, not the data. I'm not sure how to easily copy the data into new sections, and I can't find any jQuery tools to do that.
PS - This part isn't as important, but I've also considered using this same form to load the data back in for viewing/editing, etc. The only problem with this is that the reprinting of the form means that there will be a form section with the id "Site7" or something, but jQuery starts its numbering at 1, always. I've thought about using selectors to find the highest number site and start off the variable 'sites' at that number, but I'm not sure how. Any advice how to do this, or a better system overall, would be much appreciated.
You want to itterate over the input fields in siteform and store them in an object using their name attribute as a key.
Then after the duplication of the object you made and look for the equivelant fields in the new duplicated form ans set their values.
Somthing like this (not tested, just the idea)
var obj = new Object();
$("#site1 input").each(function(){
obj[this.id] = this.value;
);
// Dupicate form
$.each(obj, function(key, value){
$('#newform input[name="'+key+'"]').value = value;
});
Mind you these two each() functions differ from each other.
http://api.jquery.com/jQuery.each/
http://api.jquery.com/each/
You could consider using cloneNode to truely clone the previous site-div and (by passing true to cloneNode) all of its descendants and their attributes. Just know that the clone will have the same id as the original, so you'll have to manually set its id afterwards
Try this in your click-function
var clone = $("#site" + sites).clone(true, true); // clone the last div
sites++; // increment the number of divs
clone.attr('id', "site" + sites); // give the clone a unique id
$("#events").append(clone); // append it to the container
As Scuzzy points out in a comment jQuery does have its own clone() method (I don't use jQuery much, so I didn't know, and I didn't bother to check before answering). Probably better to use jQuery's method than the built-in cloneNode DOM method, since you're already using jQuery for event listeners. I've updated the code
The query to transfer values is quite simple (please, check the selector for all the right types on the form):
$("#site1").find("input[checked], input:text, input:hidden, input:password, input:submit, option:selected, textarea")
//.filter(":disabled")
.each(function()
{
$('#site2 [name="'+this.name+'"]').val(this.value);
}
Ok I finally figured this out. It's, more or less, an expansion on Alex Pakka's answer.
sites++;
$("#events").append("<div id='site" + sites + "'>"
+ "<hr><br />"
+ siteform
+ "<center><button class='removesites' title='site"
+ sites + "'>Remove This Site</button><br />");
$("#site1").find("input:checked, input:text, textarea, select").each(function() {
var name = $(this).attr("name");
var val = $(this).val();
var checked = $(this).attr("checked");
var selected = $(this).attr("selectedIndex");
$('#site' + sites + ' [name="'+name+'"]').val(val);
$('#site' + sites + ' [name="'+name+'"]').attr("checked", checked);
$('#site' + sites + ' [name="'+name+'"]').attr("selectedIndex", selected);
});
I used extra vars for readability sake, but it should do just as fine if you didn't and used the methods directly.
Dont forget to create a function for registering the event! Its very important because when the DOM is loaded, all new attributes need to be registrated to the DOM.
Small example:
<script>
$(document).ready(function(){
$('#click-me').click(function(){
registerClickEvent();
})
function registerClickEvent(){
$('<input type="text" name="input_field_example[]">').appendTo('#the-div-you-want')
}
registerClickEvent();
})
</script>
I am trying to separate and reassign values in a variable. What I have is
#&first=1&second=2
can anyone help with a script that will separate and assign this values to another variable so it would be like
var first= val.(first);
var second= val.(second);
I am new to jquery so I am not even sure if I am using the correct syntax.
Thanks
You could do something like this:
var val = "#&first=1&second=2";
var first = gup(val, "first");
var second = gup(val, "second");
function gup(str, name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(str);
if (results == null) return "";
else return results[1];
}
Checkout the example on jsfiddle: http://jsfiddle.net/WxnJq/
Here's the one that breaks down the GET variables in to key/value pairs, which I believe is what you're after: http://snipplr.com/view/12208/javascript-url-parser/
Also, you can take a look at parseURI, a javascript function that can dissect a URL with GET parameters and grab sections.
Sorry for being quick to post, I thought I found the right function the first time.
JQuery has no builtin way of dealing with querystrings, so I use a plugin for this. You can get it here, works great.