2

I am have trouble linking my radio buttons that I have created in HTML using materlizeCSS to JavaScript. I have a form containing 2 groups of radio buttons and user can select 1 option from each set of groups and press the submit button. Upon pressing this button, I call a function that should check which radio buttons have been selected and then call the right function.

Below is my HTML code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">

</head>

<body> 
<div class="container">
<h3>A Demo of Materialize Radio</h3>
  <form action="#">
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio" checked />
        <span>Apple</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio" />
        <span>Pineapple</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group2" type="radio" />
        <span>Juice 1</span>
      </label>
    </p>  
     <p>
      <label>
        <input class="with-gap" name="group2" type="radio" />
        <span>Juice 2</span>
      </label>
    </p>  
    <button type="button" onclick="menuSubmitted" >Submit menu</button>
  </form>
</div>

</body>   
</html>

I tried few different ways but was not able to get it working, below is a rough code of how I want to make the javascript work.

function menuSubmitted(){ // This method is called when submit button is pressed, which then calls the correct function based on radio buttons selected.

    if (option == 'apple') {
  apple();

  } else if (option == 'pineapple') {
  pineapple();

  } else if (option == 'Juice 1') {
  juice1();

  } else if (option == 'Juice 2') {
  juice2();

  }

}


function apple() {
 alert("Apple selected");
}

function pineapple() {
alert("Pineapple selected");
}

function juice1() {
alert("Juice 1 selected");
}

function juice2() {
alert("Juice 2 selected");
}

I am fairly new to web development and have spent quite some time researching this but have not found anything helpful. All resources I came accross only show how the HTML works and do not provide anything on the JavaScript side.

Can someone please help me, if I have not explained myself properly, please let me know and I will try my best to explain better.

Here is a JSfiddle of the code: https://jsfiddle.net/pauwnqcf/1/

Jackie
  • 427
  • 1
  • 9
  • 19

2 Answers2

1

To make it simpler to understand and follow, I kept your original code as much as possible and extended it a little.

The option variable you use is not declared anywhere, and is not a reference to any of your input's.

Also, your menuSubmitted function doesn't gets called as it miss the ending parenthesis () in your onclick handler, and should look like this onclick="menuSubmitted()"

For it to work you could loop the input's, check which one is checked and assign its value to the option variable, and note, I added the value="fruit" attribute to each, to make it easier to get, than to have to find the text inside the span

As inline script like onclick is bad practice, I replaced it with an addEventListener to "upgrade" your code a little :)

Stack snippet

var button = document.querySelector('button');

button.addEventListener('click', function() {
  menuSubmitted();
})

function menuSubmitted() {

  var option, inputs = document.querySelectorAll('input');

  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      option = inputs[i].value;
    }
  }

  if (option == 'apple') {
    apple();

  } else if (option == 'pineapple') {
    pineapple();

  } else if (option == 'juice1') {
    juice1();

  } else if (option == 'juice2') {
    juice2();

  }

}


function apple() {
  alert("Apple selected");
}

function pineapple() {
  alert("Pineapple selected");
}

function juice1() {
  alert("Juice 1 selected");
}

function juice2() {
  alert("Juice 2 selected");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">

<div class="container">
  <h3>A Demo of Materialize Radio</h3>
  <form action="#">
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio" value="apple" checked />
        <span>Apple</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio" value="pineapple" />
        <span>Pineapple</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group2" type="radio" value="juice1" />
        <span>Juice 1</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group2" type="radio" value="juice2" />
        <span>Juice 2</span>
      </label>
    </p>
    <button type="button">Submit menu</button>
  </form>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • thanks for the answer - it seems to be working fine when I test it on stackoverflow but it doesnt work when I do it in my actual code. I am using and
    tags and I didnt think it would be a problem but it doesnt seem to work with them. Please see the updated section of the post.
    – Jackie Jul 08 '18 at 12:15
  • @Jackie You need to add `value="apple"` etc. to your `input`'s – Asons Jul 08 '18 at 12:22
  • thanks it working now - not sure how I missed that part :) thanks again – Jackie Jul 08 '18 at 12:25
  • Thanks again, I had been searching online for days - not sure why things simple as this are not posted on the internet already for beginners like myself. Please could you also help on this, if you know - https://stackoverflow.com/questions/51210205/multiple-input-boxes-alertifyjs-jquery – Jackie Jul 08 '18 at 12:29
  • @Jackie I did...and posted an answer – Asons Jul 08 '18 at 12:59
-1

First of all change the type="button" to type="submit" Then add on submit event to the form element onsubmit="menuSubmitted" And what is option? You should get the value of radio button like this:

function menuSubmitted(e){
        e.preventDefault();
    var option1 = document.querySelector('input[name="group1"]:checked').value;
    var option2 = document.querySelector('input[name="group2"]:checked').value;
}
Julia
  • 95
  • 1
  • 7
  • Your code is awful: ` if (option == 'apple') { apple(); } else if (option == 'pineapple') { pineapple(); } else if (option == 'Juice 1') { juice1(); } else if (option == 'Juice 2') { juice2(); }` You don't know how to handle form events and get values of the inputs. Shame. – Julia Jul 08 '18 at 13:46
  • Sorry to hear how you feel about my coding, just so you know, not everything is an expert! and everyone starts at the beginning - in this case its mean but you were in my shoes once :) Also, I didn't down vote you as I am do not have high enough reputation - if thats the reason your trying to have a go at me – Jackie Jul 08 '18 at 13:49