Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons:

<form action='' method='post' onsubmit='return checkForm(this, event)'>
     <input type = 'radio' name='allow' value='allow' checked>Allow
     <input type='radio' name='allow' value='disallow'>Disallow
</form>

The checkForm function includes code to verify if the Disallow button is selected. If it is, an alert instructs the user to select Allow, otherwise, it returns true.

However, I noticed that even after changing my selection from Disallow to Allow, the alert remains prompting me to choose Allow.

Below is the checkForm function:

<script type="text/javascript">
    function checkForm(form, event) {
        var radio  = document.getElementsByName("allow");
        var counter=0;
        for(i=0;i<radio.length;i++){
            if(radio[i].value=="disallow"){
                alert("Please allow the system to get your data!");
                return false;
            }
        }
        return true;    
    }
</script>

Any suggestions or solutions would be greatly appreciated.

Answer №1

Ensure to verify whether the option is selected or not:

<script type="text/javascript">
function checkForm(form, event) {
    var radio  = document.getElementsByName("allow");
    var counter=0;
    for(i=0;i<radio.length;i++){
        if(radio[i].checked && radio[i].value=="disallow") {
            alert("Please allow the system to get your data!");
            return false;
        }
    }
    return true;    
}
</script>

For modern browsers:

function checkForm(form, event) {
    if(document.querySelector('input[name="allow"]:checked').value=="disallow") {
        alert("Please allow the system to get your data!");
        return false;
    }

    return true;    
}

Answer №2

It appears that a few issues were identified in your HTML code:

<input type='radio' name='allow' value='disallow' Disallow

The tag here is not properly closed and should be corrected to:

<input type='radio' name='allow' value='disallow'> Disallow

In addition, it is important to consider the version of HTML being used. For HTML5 or XHTML Strict, self-closing tags are required:

<input type='radio' name='allow' value='disallow' /> Disallow

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS problem causing issues with block display in basic gallery

I've created this code: <head> <style type="text/css"> div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; border: 1 ...

Exporting CSS file from css-loader in Webpack: A step-by-step guide

My application structure is set up like this: /src /app.js /styles.css /images /img.png The content of the app.js file is as follows: const styles = require('./styles.css'); console.log(styles) // => I want a URL to t ...

What causes the table to expand with new cells once the database information is shown?

I'm confused as to why an empty cell is being added to the right even if there is data from the database to display. This particular code is meant to showcase a school schedule. Attached is a picture showing how it currently appears. Below is the PH ...

What steps can I take to identify and manage a browser's inability to play a media file?

I am currently utilizing a JavaScript utility to stream mp3 content. Unfortunately, there are instances where I direct users to a file that cannot be played due to external factors. In such cases, Firebug displays an error message indicating that the file ...

When a webpage reload triggers a 404 error, my website's iframe with the source "videoUrl | sanitize" will display

I am attempting to retrieve a videoUrl from a database and set it to the iframe [attr.src] in order to display a YouTube video. It is imperative that the data originates from the database, as there are limitations preventing us from directly uploading and ...

Implement a Loop that Generates Buttons with Popups Using jQuery Mobile

Within the context of XML parsing, I have utilized this code to generate buttons dynamically using a loop: $('#button' + counter + paramcounter).click(function(){ sendData(escape(parameterarray[cnt2] + $('#textinput' + cnt + cnt2).v ...

Experiencing difficulty receiving a full response from an ajax-php request displayed in a div

Having trouble getting a response in a div from an ajax request triggered by an onclick event in a form and a PHP page. Here's the code: <html> <head> <script language="javascript"> function commentRequest(counter) { new Ajax. ...

Eliminate the blank choice from X-editable Select

Lately, I've been dealing with AngularJS and X-editable and one thing that has been troubling me is the fact that the select option always includes an empty first child. Here's the HTML <span editable-select="curuser.roles" e-name="roles" ...

Replicate and modify the settings on a fresh radio inspection

In my approach, I am avoiding direct HTML editing and instead utilizing JavaScript/jQuery to accomplish the desired outcome. Initially, one input (specifically 'Express Shipping') is pre-selected by default. The goal is to clone/copy the HTML co ...

Controlling data tables with knockout.js

I have successfully integrated an API in knockout.js, but I am facing an issue with displaying the amount based on accounting principles. My table definition includes columns for id, name, debit, credit, and amount. Since not all amounts fall under debit o ...

Struggling to display a function's output on a separate web page within a flask application

After spending close to 10 hours on this, I find myself stuck. My restaurant search app is functioning perfectly when I print the output to the terminal. However, I can't seem to figure out how to display it on a new page. Here's a snippet of my ...

Retrieve the current element when the key is released and send it as a parameter to a different function

Imagine a scenario where my website contains textbox elements that are dynamically generated, each with the class 'mytxt'. <input type="text" class="mytxt" /> <input type="text" class="mytxt" /> <input type="text" class="mytxt" /& ...

Positioning of vertical linear gradients in CSS

Check out this live demonstration: http://jsfiddle.net/nnrgu/1/ I then adjusted the background position to 0px -70px and observed the changes here: http://jsfiddle.net/nnrgu/2/ The linear gradient seems to disappear! Am I doing something wrong, or is ...

Ways to implement the React.FC<props> type with flexibility for children as either a React node or a function

I'm working on a sample component that has specific requirements. import React, { FC, ReactNode, useMemo } from "react"; import PropTypes from "prop-types"; type Props = { children: ((x: number) => ReactNode) | ReactNode; }; const Comp: FC< ...

The absence of a flickering flame is noticeable in the THREE.js environment

I have been working on creating a flame using THREE.js and spark.js. However, even after rendering the world, I am unable to see the flame and it seems like the world is empty. Although I checked the console for errors, there are no indications of what mig ...

The transition effect of changing opacity from 0 to 1 is not functioning properly in Firefox

Having some trouble with this animation not working in Firefox. I'm triggering the animation using JavaScript after a delay like so: document.getElementById('my_id').style.webkitAnimationPlayState = "running"; I've also attempted: s ...

Tips for invoking a JavaScript class method from an HTML document

I've created a Typescript class that dynamically inserts an HTML element to a page after it's loaded. Here is the code snippet: const calcElement: string = ` <div class="container"> <span class="cc-title">Field</span> ...

Enable content to be displayed when hovering over it with a mouse in

As a newcomer to JavaScript, I am eager to learn how to add an interactive feature to my menu item. I want to create an info box that pops up when the menu item is clicked, and can also be displayed when hovering over it. Below is the script I have so far, ...

Concealing a CSS element within another one

Hey there, I've got a little issue I could use some help with. So, I've created a progress bar for my portfolio website, but there's a small hiccup. The #ability div is causing some trouble - when I adjust the width property to 1%-3%, it e ...

How to show or hide a textbox in JavaScript?

Within my user control, there is a panel with two controls: ddlType, a drop-down list, and txtOthers, a text box. Initially, txtOthers is set to be invisible. The goal is for txtOthers to become visible when the user selects an option in ddlType that corr ...