The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
 Reply to this topicStart new topic
> Help with a radio, and changing labels based on the variable.
pricelessbrewing
post Mar 30 2016, 02:39 PM
Post #21


Novice
**

Group: Members
Posts: 22
Joined: 11-January 16
Member No.: 23,897
QUOTE(CharlesEF @ Mar 25 2016, 07:53 PM) *

Can you attach your files to a post?


I found a workaround, which is to convert he inputs into the new unit type, so the outputs don't really change besides rounding differences, but it's still something I'd like to know how to do.

http://codepen.io/anon/pen/JXWwrP

also the three files are attached.


Attached File(s)
Attached File  css.css ( 7.33k ) Number of downloads: 291
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 30 2016, 04:30 PM
Post #22


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
I know the files are on codepen but I know nothing about it. I would prefer to see the files on my own system, where I know how everything works. Can you attach the files?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pricelessbrewing
post Mar 30 2016, 04:41 PM
Post #23


Novice
**

Group: Members
Posts: 22
Joined: 11-January 16
Member No.: 23,897
QUOTE(CharlesEF @ Mar 30 2016, 04:30 PM) *

I know the files are on codepen but I know nothing about it. I would prefer to see the files on my own system, where I know how everything works. Can you attach the files?

Sorry, I tried to last time but it looks like only the css did. Apparently there's a permission blockage for html and js file attachments, so here's a .rar


Attached File(s)
Attached File  Documents.rar ( 11.27k ) Number of downloads: 134
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 30 2016, 06:40 PM
Post #24


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
QUOTE(pricelessbrewing @ Mar 30 2016, 04:41 PM) *

QUOTE(CharlesEF @ Mar 30 2016, 04:30 PM) *

I know the files are on codepen but I know nothing about it. I would prefer to see the files on my own system, where I know how everything works. Can you attach the files?

Sorry, I tried to last time but it looks like only the css did. Apparently there's a permission blockage for html and js file attachments, so here's a .rar

Got it. Give me some time to go over things.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pricelessbrewing
post Mar 30 2016, 08:33 PM
Post #25


Novice
**

Group: Members
Posts: 22
Joined: 11-January 16
Member No.: 23,897
Of course, thanks for all the help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 2 2016, 08:33 PM
Post #26


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
QUOTE(pricelessbrewing @ Mar 30 2016, 08:33 PM) *

Of course, thanks for all the help!

index.html didn't have a link to the external javascript file (js.js). And the link to the CSS was wrong also (css.css). The <html> tag goes before the <head> tag. You really should use a !DOCTYPE also.

Seems the function updateCalc() is not defined anywhere in the javascript file. Can you post that function here?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 3 2016, 03:23 PM
Post #27


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
I removed the updateCalc() function for now. I also made other changes and I can't remember them all. So, I have attached a corrected file to this post. It runs with no error messages but you need to check that everything you want done is actually done.
I removed this section of code. I don't do jQuery but I don't see how this code would help:
CODE
  <script>
    window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')
  </script>

It was probably the file size that prevented the 2 files from uploading before. AFAIK there is not limit on .html or .js attachments.
Attached File  Radio.zip ( 11.73k ) Number of downloads: 364
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pricelessbrewing
post Apr 5 2016, 03:11 PM
Post #28


Novice
**

Group: Members
Posts: 22
Joined: 11-January 16
Member No.: 23,897
Alright thanks, looks like you cleaned it up quite a bit.

The thing I was referring to last time, was that the output numbers in the red section (third column) doesn't change values unless there's a change in input variables. For example I can change the radio to metric, and the labels will change from gal to liters, but the value will still be as if it were gallons, until an input is changed.

updateCalc() is the main function in the js. Starts at line 491 in the js file, down to line 810.

From what I can tell, is that I want to do something like this, but for radio change,

CODE
$(document).ready(function() {
    $('#calcForm').delegate('input[type=text]', 'change', function() {
      if (validateField(this)) {
        updateCalc();
      }
    }).submit(function(e) {
      e.defaultPrevented;
      updateCalc();
    });
    updateCalc();
    $('#GBill').focus();
  });



or

something like this, which doesn't appear to be doing anything.

CODE

<label for="imperial"><input name="units" value="imperial" data-units="lb|Gallon|Oz|F|Gal/Hr|Gal/Lb|Quart/Lb|Gal/Oz|Inches" type="radio" id="imperial" onchange="radioSelect(this);updateCalc();">imperial</label><br>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 6 2016, 01:33 PM
Post #29


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
Ok, let me look into it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 11 2016, 07:05 PM
Post #30


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
Ok, I'm back. Sorry for the delay, I got busy with a company and 10 Windows 10 computers. Anyway, this turned out to be a bigger job than I thought. Just tracking global vs local variables took several hours by itself. While I was at it I re-wrote your javascript code. Not a complete re-write but I did remove duplicate stuff. I also changed the logic a little but not much. Most of the javascript is your original code.

I found the reason why the 3rd column did not update. In the updateCalc() function you were setting the radio variable to be either 1, 2 or 3. You should not do that. radio is a global variable and it is set when you make a radio button selection. For this reason you MUST have a onload function that calls the radioSelect() function. Using the checked attribute on the radio button will NOT set these variables. I put the radioSelect(default_radio_id) call in the jQuery ready function. The only time you will need to change it is when you change the default radio button to a different one.

Now, that being said, there is still a logic error in your code. When you select a different radio button the 3rd column changes but as you click back and forth between the default radio button and the Metric radio button the number just keep getting bigger and bigger. I leave this problem for you.

The attached zip file contains index.html and temp.js, which work together with your original css.css file. I cleaned up the HTML page to remove unnecessary stuff. Don't mix them with your other files.
Attached File  temp.zip ( 9.84k ) Number of downloads: 378
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 15 2016, 01:23 AM
Post #31


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
Here is another version that I cleaned up more. I removed redundant code and I changed the radio variable from a number to the id of the radio button. You should not be assigning numbers anyway, if you ever chang the order of the radio buttons then you must remember to change your code also. By using the id you don't have to worry about this problem.

I still think you need more work on your conversions. Some are converted and some seem not to be.
Attached File  temp1.zip ( 11k ) Number of downloads: 377
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pricelessbrewing
post Apr 22 2016, 12:48 PM
Post #32


Novice
**

Group: Members
Posts: 22
Joined: 11-January 16
Member No.: 23,897
Thanks. No worries on the delay, as you can tell I'm not in any rush atm.

Will have to look through your changes and see if I can find out why your new version has escalating values when radios change back and forth. Thanks for the clean up!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 22 2016, 01:55 PM
Post #33


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
QUOTE(pricelessbrewing @ Apr 22 2016, 12:48 PM) *

Thanks. No worries on the delay, as you can tell I'm not in any rush atm.

Will have to look through your changes and see if I can find out why your new version has escalating values when radios change back and forth. Thanks for the clean up!

The reason for the escalating values is because of the lack of conversion from metric to imperial. When the metric radio button is selected the values in the left column get converted to metric. But when you then select the imperial radio button those values are not converted back, therefore the calculated numbers keep escalating.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pricelessbrewing
post Jun 7 2016, 01:38 PM
Post #34


Novice
**

Group: Members
Posts: 22
Joined: 11-January 16
Member No.: 23,897
Got it all working, had to move the conversions around a bit so it converted inputs, returned the inputs, converted inputs back to imperial units, did the math, then converted outputs to desired unit family.

Thanks!

New project: Local storage of a couple variables. But I'll make a new thread for it as it's not on topic anymore.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jun 7 2016, 09:02 PM
Post #35


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
QUOTE(pricelessbrewing @ Jun 7 2016, 01:38 PM) *

Got it all working, had to move the conversions around a bit so it converted inputs, returned the inputs, converted inputs back to imperial units, did the math, then converted outputs to desired unit family.

Thanks!

New project: Local storage of a couple variables. But I'll make a new thread for it as it's not on topic anymore.

Good news, glad you got it worked out.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 17th April 2024 - 08:46 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC