I have been looking for this script everywhere however i was unable to find it. I am trying to create a simple donation count. When a value is added inside a textbox I want it to be permanently fixed into second textbox after button submission. Thanks in advance for all your help.
1) First get the value from textBox1 (assuming id=textbox1)
2) Assign the value to second textbox (assuming id=textbox2)
3) Add the below code in form submission or button click.
document.getElementById('textbox2').value =
document.getElementById('textbox1').value
Try this:
<script>
window.onload = function () {
var textfield6 = document.getElementById('textfield6');
textfield6.value = 0;
document.querySelector('input[type=button]').onclick = function () {
textfield6.value = parseInt(textfield6.value) + parseInt(document.getElementById('textfield5').value);
}
}
</script>
Demo here
Related
How to 1) get and 2) output the current value of my odometer on button click? The snipet which should do that is at the bottom of the JavaScript but it does not work.
My code: https://jsfiddle.net/aht87opr/8/
Documentation of odometer might come in handy:
http://brock-family.org/gavin/software/web/odometer.html (where it says "Get the current value from the odometer: val = myOdometer->get();")
//My attempt to output the current value from the odometer:
$('button').click(function() {
n = myOdometer.get();
return n;
});
You should just use myOdometer.get(), which already gives you the number you are looking for.
If you want to put the value inside the #value element you can use the following:
$('button').click(function() {
var mefedron = myOdometer.get();
$('#value').text(mefedron);
});
Here is the fix in your jsfiddle:
https://jsfiddle.net/aht87opr/14/
Here's a working fiddle - https://jsfiddle.net/6abu3ruf/ (you'll have to fix the CSS)
There are two issues with the fiddle you shared:
You don't have to do mefedron.val();, mefedron has the value you are looking for.
You are not setting that value anywhere.
So basically, just change your onclick to:
$('button').click(function() {
var mefedron = myOdometer.get(n);
$("#value").text(mefedron);
});
I tried your code and confirm(Math.floor(mefedron*10)); works.
$('button').click(function() {
var mefedron = myOdometer.get(n);
confirm(Math.floor(mefedron*10)); // it works
function number() {
return mefedron.val();
}
number();
});
So, if you just want to return the odometer, then on the button click event just return Math.floor(mefedron*10);
To display it on div#value, $("div#value").html(Math.floor(mefedron*10));
just update your button event handler with the following:
$('button').click(function() {
var mefedron = myOdometer.get(n);
mefedron= Math.round(mefedron * 100) / 100
$("#value").text(mefedron)
});
Here is a working version of the code hosted on jsFiddle jsFiddle
I have a simple form (text field and submit button). I am trying to have the user submit a number, and the resulting number will display one div (from a set of divs).
I tried using this example as a base (when the user clicks a link, it shows a div, but hides others).
My test is below:
var divState = {};
function showhide(oFrm) {
var dividnum = oFrm.Inputed.value;
var prepar = "para";
var divid = prepar + theInput; /* should result in something like "para52" */
divState[divid] = (divState[divid]) ? false : true;
//close others
for (var div in divState){
if (divState[div] && div != divid){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
http://jsfiddle.net/LfzYc/431/
Note: I am NOT proficient in JavaScript at all, which is why I am having difficulty.
Also, I'd like to add a function ... if the number entered is not between 1-4, show a different div, maybe with the id paraEnd.
Please look at the jsFiddle based on your one. I hope I've done what you want. I changed the showhide function and your HTML (fixed div's IDs and added one more div#paraEnd). I'd suggest you refactoring your code.
You should use jQuery to have an easy way to manipulate the DOM.
Using jQuery I made an example for you, just change your JS and paste mine:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
// get the paragraphs
var paragraphs = $('.paragraph');
// form submit
$('#paragraphform').submit(function (e) {
// prevent the event to flow
e.preventDefault();
// get the input value
var value = $('#Inputed').val() - 1;
// reset all divs removing active css class
paragraphs.removeClass('active');
$('.error').removeClass('active');
// verify if the value doens't exist
if(value < 0 || value > paragraphs.length - 1) {
$('.error').addClass('active');
return;
}
// show the active div
paragraphs.eq(value).addClass('active');
});
})(jQuery);
</script>
Is that what you need?
If you not familiar with jQuery, this is the jquery Learn Center:
https://learn.jquery.com/
And this is a nice tutorial for beginners:
http://www.tutorialspoint.com/jquery/
Everything works fine, except the problem with a pricing plan selection. What I want is that whenever user clicks on a specified price (even while the text is already present in textarea), it should immediately update the final Price. But it won't change at first click.
I should click twice on it instead. Any one got an idea what's wrong ?
So here how it looks like:
And here comes the javascript code:
function __textCalculatorCounter(){
var value = $('#calculateText').val();
var spanWords = $('#calculatedWordsTotal'),
spanChars = $('#calculatedCharsTotal'),
spanPrice = $('#calculatedPriceTotal');
if (value.length == 0) {
spanWords.html(0);
spanChars.html(0);
return;
}
var selectedPricing = $("input[name=calculatePrice]:checked").val();
var wordCount = value.trim().replace(/\s+/gi, ' ').split(' ').length;
var totalChars = value.length;
var totalPrice = (wordCount * parseFloat(Math.round(selectedPricing * 100) / 100));
spanWords.html(wordCount);
spanChars.html(totalChars);
spanPrice.html(totalPrice.toFixed(2));
}
function _initTextCalculator(){
var textblock = $('#calculateText');
textblock.change(__textCalculatorCounter);
textblock.keydown(__textCalculatorCounter);
textblock.keypress(__textCalculatorCounter);
textblock.keyup(__textCalculatorCounter);
textblock.blur(__textCalculatorCounter);
textblock.focus(__textCalculatorCounter);
$('label', '#pricesGroup').click(__textCalculatorCounter);
}
==== UPDATED ====
I don't know why, but it works fine in jsfiddle... it's exactly the same code extracted from html and javascript.
JSFIDDLE
So, since no one had an answer, I post mine, which solved the issue.
The problem is in Twitter's Bootstrap 3 radio button styles which is actually common issue when using along with javascript.
I've changed a click handler for radio buttons:
function _initTextCalculator(){
var textblock = $('#calculateText');
textblock.change(_textCalculatorTrigger);
textblock.keydown(_textCalculatorTrigger);
textblock.keypress(_textCalculatorTrigger);
textblock.keyup(_textCalculatorTrigger);
textblock.blur(_textCalculatorTrigger);
textblock.focus(_textCalculatorTrigger);
// Fixing bootstrap 3 radio buttons
$("#pricesGroup label").on('click', function(){
// Once clicked, mark current radio as checked
$('input:radio', this).prop("checked", true);
// Then call a function to calculate the price
_textCalculatorTrigger();
});
}
As it already commented, it assigns a property "checked" to radio button first once it's parent label tag is clicked, and then it calls a function to calculate the price.
Thanks to everyone
I have 7 input textboxes.Based on the input enter i need to disable them accordingly.For eg if i enter input as 4 out the first four text boxes should be diabled accordingly(input is restricted to less than 7),and this is to be done using Jquery
This is a simple example on how to do that:
$("input").on("change", function()
{
$("input:lt(" + $(this).data("index") + ")").prop("disabled", "disabled");
});
Fiddle.
Using data attributes I set the index of each element(you can use index() in some cases, but it is more complex). So, when any element is changed I get all inputs with index less than the changed one (input:lt(index)) and disable it setting its property disabled.
I hope it is clear.
for (i = 0; i < contract; i++)
{
$('#tblTest').find('tbody').find('tr').find('.Year')[i].disabled = false;
var samtes = $('#tblTest').find('tbody').find('tr').find('.Year')[0].disabled = false;
}
I am trying to get the value of each input and put it in the span tag below without using ID's or classes. It's easy if I use classes or Id's. But I need to be able to use it without those. I need each input values put into each span tag. I have two but it will be more in actuality.
Thanks in advance.
any help is appreciated
below is my fiddle
var input = $('input:text');
$(input).each(function(){
values = $(this).val();
});
$('b').each(function(){
$(this).html(values);
console.log(values);
});
http://jsfiddle.net/6LB76/3/
Simple enough, just juggle the index.
jQuery
$('input:text').each(function(i){//get index for each input
var tx = $(this).val();//get value for this input
$('b').eq(i).html(tx);//print value on output with same index
});
Which can easily be expanded to update irt, as you can see in this fiddle...
You need to loop through ieach input and then each output. This is assuming that you have exactly the same number of input fields and spans to show the values.
Here is the code:
var input = $('input:text');
var values = new Array();
$(input).each(function (i) {
values[i] = $(this).val();
});
$('b').each(function (i) {
$(this).html(values[i]);
console.log(values[i]);
});
Here is the Fiddle:
First, set a counter variable i to 0. The loop through each <b> element and increment i as we go through each. Populate the <b> element with the value of the input at index i.
function run() {
var inputs = $('input:text');
var i = 0;
$('b').each(function(){
$(this).html(inputs.eq(i++).val());
});
}
Here is the Fiddle
You're being somewhat vague in your question, so please clarify if this is not what you want.