Add numerical value to variable, and then be able to add further values to it

James_Hibbard · March 13, 2014, 12:04pm

Hey,

What do you mean by “nothing”?
Did it log anything to the console?

Oh, btw, you can access the console using your browser’s tools.
Here’s a short tutorial.

multichild · March 13, 2014, 12:12pm

Ah I see, i opened it up in Chrome, and here is the result:


[COLOR=#222222][FONT=Consolas]In success callback [complete.php:230](http://devchecksafetyfirst.csf.dcmanaged.com/Adam/complete.php)[/FONT][/COLOR]
[COLOR=#222222][FONT=Consolas][COLOR=#222222][FONT=Consolas][FONT=Consolas]
[COLOR=#222222][I][[COLOR=#881280]input[/COLOR], prevObject: [COLOR=#222222]x.fn.x.init[1][/COLOR], context: [COLOR=#881280]document[/COLOR], selector: [COLOR=#C41A16]"input[name=FName]"[/COLOR], jquery: [COLOR=#C41A16]"1.10.2"[/COLOR], constructor: function&#8230;][/I][/COLOR]
[/FONT]

[/FONT][/COLOR] [complete.php:231](http://devchecksafetyfirst.csf.dcmanaged.com/Adam/complete.php)[/FONT][/COLOR]

James_Hibbard · March 13, 2014, 12:14pm

Ok, and what does this give you?

success: function (html) {              
   console.log("In success callback");
   console.log(fname.val());    
 }

multichild · March 13, 2014, 12:20pm

ah yes that better, i used myhouse as first name.
In success callback complete.php:230
myhouse

James_Hibbard · March 13, 2014, 12:25pm

Cool. In that case, all you have to do is:

success: function (html) {              
  if (html==1) {
    $('#namePay').val(fname.val());
    $('#formMain')[0].reset();
    $.fancybox({
      content: $('#access-policy'),
      modal: true
    });
    return false;                
  }
}

multichild · March 13, 2014, 1:02pm

Perfic, cheers Pullo.

Ddidnt know that way of working it out, so learnet something new again.

Thanks

multichild · March 14, 2014, 11:18am

James_Hibbard:

That’s good - I can never remember which one does what, but I invariably end up selecting the wrong one.

This is weird:
$("#firstline, #secondline, #thirdline").keyup(function () {
var inputBox1 = document.getElementById('firstline');
inputBox1.onkeydown = function(){
    document.getElementById('textBox1').innerHTML = inputBox1.value;
}
});
You are attaching an event handler:
$("#firstline, #secondline, #thirdline").keyup(function () {
   ...
});
The code within this event handler will be fired every time one of these divs has focus and a key is pressed.

Withing your event handler, you then do this:
var inputBox1 = document.getElementById('firstline');
This makes no sense.
You are including jQuery, so use it:
var inputBox1 = $('#firstline');
And use it in the right place:
var inputBox1 = $('#firstline'),
    inputBox2 =  $('#secondline'),
    inputBox3 = $('#thirdline')
    $allBoxes = inputBox1.add(inputBox2).add(inputBox3);

$allBoxes.keyup(function () {
   ...
});
This is only one possibility (I don’t know how many boxes you have).
You might also consider the attribute ends with selector: https://api.jquery.com/attribute-ends-with-selector/
$( "input[name$='line']")
Inside your keyup event handler, you are then attaching a keydown event handler.
You only need to attach handlers once, not every time a key is pressed.

I strongly suspect you could get away with something like this:
$("input[name$='line']").keyup(function(){
    val = $('#firstline').val();
    $('#textBox1').text(val);
});
Hope that helps

Morning Pullo,

I’ve gone back to a previous post with regard to the text input areas…

This is what i am using


var inputBox1 = $('#firstline'),
    inputBox2 =  $('#secondline'),
    inputBox3 = $('#thirdline')
    $allBoxes = inputBox1.add(inputBox2).add(inputBox3);
$allBoxes.keyup(function () {
   document.getElementById('textBox1').innerHTML = inputBox1.value;
   document.getElementById('textBox2').innerHTML = inputBox2.value;
   document.getElementById('textBox3').innerHTML = inputBox3.value;
});

And there a little issue with it, basically when I start typing ‘undefined’ appears.

In some of the slate sizes as you know i dont need all three lines, sometimes just 2 and sometimes just 1, but this does seem to work, just getting that little glitch.

http://devchecksafetyfirst.csf.dcmanaged.com/Adam/index3.php

The two im testing it on is 150 x 150 and 220 x 150, the first one only has 1 line, the second one uses 2 lines.

So maybe adding three together might not work, do you think its better to split them up into three different functions.

I’ll keep looking though

multichild · March 14, 2014, 1:04pm

Nope im still trying, and this isnt right either…


var inputBox1 = $('#firstline');
var inputBox2 =  $('#secondline');
var inputBox3 = $('#thirdline');
    //$allBoxes = inputBox1.add(inputBox2).add(inputBox3);

   inputBox1.onkeydown = function(){
   document.getElementById('textBox1').innerHTML = inputBox1.value;
}

Not getting any text appear with this one

James_Hibbard · March 16, 2014, 8:45am

Works fine for me.
When I start typing, text appears.
How can I reproduce the problem?

BTW, you offer an option of title case, but all you are doing is capitalising the first letter of each word.
This is not title case.

Title case: I Am off to the Gym in a Moment. I Love Lifting Weights.
Your site: I Am Off To The Gym In A Moment. I Love Lifting Weights.

Check out: http://titlecase.com/

multichild · March 17, 2014, 9:52am

Morning Pullo,

Right good point with the Title cae, will have to look at that.

With the other issue, i had to revert it back to how I had it because the client likes to look at it as I’m putting it together, always interfearing.

It works like you say, but its not right and its because as you pointed out the onkeyup and down issue.


$("#firstline, #secondline, #thirdline").keyup(function () {

var inputBox1 = document.getElementById('firstline');
inputBox1.onkeydown = function(){
document.getElementById('textBox1').innerHTML = inputBox1.value;
}
var inputBox2 = document.getElementById('secondline');
inputBox2.onkeydown = function(){
document.getElementById('textBox2').innerHTML = inputBox2.value;
}

});

<div id="copyFirst"><div id="textBox1"></div></div>
<div id="copySecond"><div id="textBox2"></div></div>

Basically there two issues which highlight the problem, when you go to type your first letter it doesnt appear in the dev area until you type the second letter, and then when your finished with your word, the last letter wont appear until you do something else, liek click in the box below, or add a space at the end.

James_Hibbard · March 17, 2014, 12:17pm

What about using keydown?

multichild · March 17, 2014, 12:20pm

Hi Pullo,

Ye tried that already and have changed it to it now and its the same issue.


$("#firstline, #secondline, #thirdline").keydown(function () {
var inputBox1 = document.getElementById('firstline');
inputBox1.onkeydown = function(){
document.getElementById('textBox1').innerHTML = inputBox1.value;
}
var inputBox2 = document.getElementById('secondline');
inputBox2.onkeydown = function(){
document.getElementById('textBox2').innerHTML = inputBox2.value;
}
var inputBox3 = document.getElementById('thirdline');
inputBox3.onkeydown = function(){
document.getElementById('textBox3').innerHTML = inputBox3.value;
}
});

James_Hibbard · March 17, 2014, 12:26pm

You’re still attaching event handlers inside your event handlers as outlined in post 32.
This can only result in pain

multichild · March 17, 2014, 12:39pm

Ye I thought I would be heading back there, and i tried a few ways but for some reason ended up with undisclosed keep coming up…

I will go back and try and work it out again, I had to change it back to the way it is now as the client was moaning that he couldnt play with it (nighmare he is!)

James_Hibbard · March 17, 2014, 12:41pm

The best way to get help (reasonably) quickly, is to make a bare-bones example demonstrating your problem.
If I can just copy paste a few lines of code and run them on my PC, that is so much easier for me than working out what goes where and remembering where we were at previously.

Good luck!

Off Topic:

Are you a freelancer or do you work for an agency?

multichild · March 17, 2014, 12:49pm

Sure will do, i’ll chop it up for you now and send you a link.

I’m a freelancer, i pretty much work on my own all day, and I think thats why I sort of have conversations in the forums lol.

multichild · March 17, 2014, 2:03pm

Rightyo,

This is where it is now -

http://devchecksafetyfirst.csf.dcmanaged.com/Adam/index5.php


$("#firstline").keydown(function () {
var inputBox1 = $('#firstline');
document.getElementById('textBox1').innerHTML = inputBox1.value;
});

$("#secondline").keydown(function () {
var inputBox2 = $('#secondline');
document.getElementById('textBox2').innerHTML = inputBox2.value;
});

$("#thirdline").keydown(function () {
var inputBox3 = ('#thirdline');
document.getElementById('textBox3').innerHTML = inputBox3.value;
});

Basically I think the idea of it is right, its just that instead of letters appearing I get ‘undefined’.

i will go through the rest of your posts too as will also try and work this out.

James_Hibbard · March 17, 2014, 2:23pm

Ok, I see where the problem is - inputBox1 is a jQuery object and as such doesn’t have a value attribute.
You need to do this:

$("#firstline").keydown(function () {
  var inputBox1 = $('#firstline');
  document.getElementById('textBox1').innerHTML = inputBox1.val();
});

If I was you, I would include jQuery and stick to the jQuery syntax.

multichild · March 17, 2014, 2:30pm

Thanks Pullo,

I’ll try and work the other bit out as your probably very busy.

The letters work, but still got the problem of it needing 2 types to get one letter.

This is my first proper jquery project, and its possibly whay Im getting things a little muddled up.

I usually build websites and CMS’s and all, so this has been a little stp into the unknown for me, but thanks for the help.

multichild · March 17, 2014, 3:46pm

OK seems to have done the trick


$("#firstline").on('keyup paste change focus blur keydown', function () {
var inputBox1 = $('#firstline');
document.getElementById('textBox1').innerHTML = inputBox1.val();
});
$("#secondline").on('keyup paste change focus blur keydown', function () {
var inputBox2 = $('#secondline');
document.getElementById('textBox2').innerHTML = inputBox2.val();
});
$("#thirdline").on('keyup paste change focus blur keydown', function () {
var inputBox3 = $('#thirdline');
document.getElementById('textBox3').innerHTML = inputBox3.val();
});

Topic		Replies	Views
Adding amounts together JavaScript	9	2303	October 8, 2014
Add value to total using drop down JavaScript	9	1251	October 8, 2014
Adding numbers in a form with JavaScript JavaScript	4	614	October 8, 2014
These 2 number cant add up JavaScript	2	449	October 8, 2014
Problem when you add a variable inside a variable JavaScript	3	456	September 21, 2010

Add numerical value to variable, and then be able to add further values to it

Related topics