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/