Search code examples
javascripthtmlsubmitform-submitonsubmit

Cannot Create Alert Message for User When Radio Button Option is Submitted - Javascript/HTML

I'm fairly new to Javascript. I have a chrome extension where there are 2 radio buttons for the user to choose from (The options are called Facebook or Instagram). When they choose one and press 'save' I'd like an alert message to pop up, just to let the user know it saved. I've tried a bunch of different things I saw on Stack Overflow but none of them have worked so I'm not sure if maybe I just don't understand where to put the code?

How can I create a simple alert when the save button is clicked? I've tried using the onsubmit event for example, but nothing happened. The code already does what it's supposed to - the Javascript file correctly blocks one of the two websites, depending on which radio button is clicked. So the code is all set. I just can't seem to figure out to how to generate the alert.

HTML:

<!DOCTYPE html>
<html>
<head><title>User Options</title></head>
<body>
Which website should I block?<br><br>

<label><input type="radio" name="blockingMethod" id="close_tab" 
value="close_tab" checked> Facebook <br></label>
<label><input type="radio" name="blockingMethod" id="closetab" 
value="closetab" checked> Instagram <br></label>
<br><br>

<input type="submit" id="save" value="save">

<script src="background.js"></script> 
</body>

JAVASCRIPT FILE:

let closingMethodRadios = document.getElementsByName('blockingMethod');
let saveButton = document.getElementById('save');

document.addEventListener('DOMContentLoaded', function() {

if(saveButton) {
    saveButton.addEventListener('click', function() {


    if(closingMethodRadios[0].checked){
        chrome.storage.sync.set({'blockingMethod': 'close_tab'}),
        
        
    chrome.webRequest.onBeforeRequest.addListener(
        () => ({cancel: true}),
        {
        urls: ['*://*.facebook.com/*'],
        types: ['main_frame'],
        },
        ['blocking']);
        }


        if (closingMethodRadios[1].checked) {
            chrome.storage.sync.set({'blockingMethod': "closetab"}),
        
            chrome.webRequest.onBeforeRequest.addListener(
            () => ({cancel: true}),
            {
            urls: ['*://*.instagram.com/*'],
            types: ['main_frame'],
            },
            ['blocking']);
            }

    });
    
    }            
});
Solution

  • You just have to use the alert function in javascript, you already have the onclick Method working, just add an alert there like so:

    let closingMethodRadios = document.getElementsByName('blockingMethod');
let saveButton = document.getElementById('save');



document.addEventListener('DOMContentLoaded', function() {

if(saveButton) {
    saveButton.addEventListener('click', function() {
        
    alert("Option Saved")

    if(closingMethodRadios[0].checked){
        chrome.storage.sync.set({'blockingMethod': 'close_tab'}),
        
        
    chrome.webRequest.onBeforeRequest.addListener(
        () => ({cancel: true}),
        {
        urls: ['*://*.facebook.com/*'],
        types: ['main_frame'],
        },
        ['blocking']);
        }


        if (closingMethodRadios[1].checked) {
            chrome.storage.sync.set({'blockingMethod': "closetab"}),
        
            chrome.webRequest.onBeforeRequest.addListener(
            () => ({cancel: true}),
            {
            urls: ['*://*.instagram.com/*'],
            types: ['main_frame'],
            },
            ['blocking']);
            }

    });
    
    }            
});
    <!DOCTYPE html>
<html>
<head><title>User Options</title></head>
<body>
Which website should I block?<br><br>

<label><input type="radio" name="blockingMethod" id="close_tab" 
value="close_tab" checked> Facebook <br></label>
<label><input type="radio" name="blockingMethod" id="closetab" 
value="closetab" checked> Instagram <br></label>
<br><br>

<input type="submit" id="save" value="save">

<script src="background.js"></script> 
</body>

    jsFiddle: https://jsfiddle.net/ryzuc1n7/