0

Please I need your help HTML and JavaScript how to setup a radio button when depending on which button is checked a different calculation is run?

If the Yes - 5 days is checked - then the 5 days calculation is run. If the No - 30 days is checked - then the Yes button is closed and the 30 days calculation is run.

UPDATE:

  • First - sorry for placing the codes in the comment section. I am still learning about everything.

  • Second - I have only been doing JavaScript for about 3 weeks and HTML for about 4 weeks. I am taking courses from Lynda.com - HTML/Javascript/CSS. These courses are good but they teach the basic and the structure but not the indepth for all the tags and the attributes. In addition to Lynda.com, I am learning from other websites, the only thing is I am trying to learn the meaning of the tags which is not clear in some cases. Thank you Sebsemillia for the suggestion on codeschool.com I will be checking this site too.

The struggle and the challenge for me is I am doing this project (creating eForm) for work, while I am learning it. It is not easy.

  • Third - Okay - this is where I am - thank you Anthony - now the calculation for 30 days is working but not the calculation for 5 days. Here is my https://jsfiddle.net/IS2016/751Lx395/1/ [1] - Anthony/Sebsemillia, as you could see I learned jsfiddle from both of you. Now I could use this site, to show codes in a better format.

Not sure what I missed.

Thank you

IreneS

  [1] https://jsfiddle.net/IS2016/751Lx395/1/

UPDATE 2:

Please can someone let me know what am I missing - the 30 days calculation works but the 5 days calculation, does not work. Even though, both of the calculations are the same setup.

Your help is very greatly appreciated.

Thank you

Irene

UPDATE 3:

FYI - I figured it out, just incase anyone following this issue and wants to know. The reason it was not working on my side because the calculations for the 5 days and 30 days were in a separate files. Once I put all the codes in one file, it WORKED, yeh!. Now I need to figure out how do I leave them in a separate files and direct the function changeHandler(event)to these files. I will figure it out, meanwhile I will leave them in one file.

I thought some of you wants to know.

Thank you to Anthony and Sebsemillia for all the help.

Irene

IreneS
  • 23
  • 1
  • 5
  • Possible duplicate of [How to use radio on change event?](http://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event) – Anthony Apr 01 '16 at 20:53
  • I was able to able to complete this by using the javascript answer from the duplicate. If you have trouble solving it, set up a [jsfiddle](https://jsfiddle.net/) of what you tried and I will gladly assist. – Anthony Apr 01 '16 at 21:10
  • Anthony - I am still learning - I have no idea what jsfiddle is. Also, I check the possible duplicate - but it is not straight forward for me to understand and in some cased they are using JQuery that I have no clue how it works. I am just starting to learn javascript. – IreneS Apr 04 '16 at 13:49
  • I updated my answer for you. – Sebsemillia Apr 04 '16 at 19:16

2 Answers2

1

Your main problem is that you have the id rbPubHealthYesNo twice, so it can't work as a selector. An id should always be unique on a single page!

Here is a sample fiddle with a bit of jQuery to demonstrate how you could make it work: https://jsfiddle.net/r1hb8guu/

But there is a lot more wrong with your code, take a close look on my changes.

UPDATE:

  • using inline JavaScript Handlers is considered bad practice, therefore I removed the "onclick" stuff..

  • for radio buttons of the same group, they don't need identical id's but identical "name" attributes

  • I took the code you posted as a comment and made it work in a new fiddle: https://jsfiddle.net/gfznebfm/ please take a close look. There was again a lot wrong, besides from typos like 'changeEventHanler'. I wouldn't know where to start to explain things for you, you have a lot to learn and nobody in SO can teach you that. I recommend that you start learning properly about HTML, CSS, jQuery/JavaScript (in that order). There are lot of good sources out there for that. I can recommend https://www.codeschool.com/ for that, they also have free beginner courses, covering the basics of the aforementioned topics.

  • next time you have a question with code, please create a working jsFiddle (https://jsfiddle.net/). It is self explanatory how to use it. And if you want to post new code, just edit/update your question and don't write it in comments.

Sebsemillia
  • 9,366
  • 2
  • 55
  • 70
  • Sebsemillia - I am very new to all of this. I am still trying to learn JavaScript, I am struggling to understand it all. I have no clue about JQuery. So I am not sure where to use the JQuery statement. I have also noticed that you have removed the statement in the input tag calling for the JavaScript function - "onclick="javascript:USPublicHealth30Days();" How is it going to work? – IreneS Apr 04 '16 at 13:43
  • Sebsemillia - regarding the id - I am understand that id need to be unique but I thought from what I learned so far - that when using radio buttons, the id need to be the same, since when one button is checked that other can't be checked and vice versa. That is how I understood, I could be wrong! Thank you for your help – IreneS Apr 04 '16 at 13:46
  • You can't have the same Id twice. However, you can have the same className twice. So you can change `id="rbPubHealthYesNo"` to `class="rbPubHealthYesNo"` then in your javascript change `document.getElementById('rbPubHealthYesNo')` to `getElementsByClassName('rbPubHealthYesNo')` – Anthony Apr 04 '16 at 14:12
  • Anthony - I tried it per your recommendation - but it is still not working. Thank you – IreneS Apr 04 '16 at 15:13
0

In the accepted answer here he has a javascript solution. Use the querySelectorAll for selecting your radio buttons. Learn more about that here. Remove your USPublicHealth30Days() function and the onclick events from your radio buttons. Then implement the changeHandler() function he has. Also, use the change event the same as he has. Click here to learn more about the change event. Click here to learn more about the forEach() method. Click here to learn more about the addEventListener.

Update

There's a typo in your querySelectorAll. It should be rbPubHealthYesNo instead of rbPublicHealth. You should also remove your onchange events from your html, they are not needed. I also removed document.getElementById('calc14').style.display = 'block'; and document.getElementById('calc15').innerHTML = ''"; from your if else statement. In your date30Days14() function I changed document.getElementById('calc15').innerHTML = text + dueDate; to document.getElementById('dt30Days14').value = text + dueDate; and added document.getElementById('dt5Days').value = ""; I did basically the same thing in your date5Days() function. I also removed style="display:none" from <div id="USAPubHealthYesNo">.

Here is the jsfiddle.

Community
  • 1
  • 1
Anthony
  • 1,439
  • 1
  • 19
  • 36
  • I read everything and I tried to follow as much as I am able to understand at this time. I have implemented the changes but still doesn't work. What am I missing or doing wrong? – IreneS Apr 04 '16 at 18:01
  • HTML 1st part: – IreneS Apr 04 '16 at 18:07
  • HTML 2nd part:
  • No - thirty (30) day MDR report required

    • – IreneS Apr 04 '16 at 18:08
  • JavaScript: var radios = document.querySelectorAll('input[type=radio][name="rbPublicHealth"]'); function changeHandler(event) { if ( this.value === 'Yes' ) { document.getElementById('calc14').style.display = 'block'; date5Days(); } else if ( this.value === 'No' ) { document.getElementById('calc15').innerHTML = ''; date30Days14(); } } Array.prototype.forEach.call(radios, function(radio) { radio.addEventListener('change', changeHandler); }); – IreneS Apr 04 '16 at 18:09
  • Also, you shouldn't post code in the comment section. Next time edit your question with the updated code. – Anthony Apr 04 '16 at 20:10